Windows 8.1でSettingsFlyOutのフルハイトと幅を使用する方法

Question

設定チャームバーのカスタム設定をクリックしたときに開く設定フライアウトを持つWindows 8.1アプリケーションを持っています。

しかし、設定フライアウト内の私のコンテンツは、設定フライアウトのフルハイト/幅を使用していない代わりに、すべてのコーナーにわたって均一なマージンがあります。次の画像は同じ表示です。

より良い理解のために私は黒と赤の背景を置きました。黒の背景はSettingsFlyOout用です。赤はフライアウト内のスタックパネル用です。私はスタックパネルの高さと幅を実際のHeightと実際の幅に設定しました。 これがxaml

です

<SettingsFlyout
x:Name="AccountsSettingsFlyoutElement"
x:Class="Something.AccountsSettingsFlyout"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="Black"
mc:Ignorable="d"
IconSource="Assets/SmallLogo.png"
Title="Accounts"
d:DesignWidth="346">

<!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
<StackPanel Background="Red"
            Width="{Binding ElementName=AccountsSettingsFlyoutElement, Path=ActualWidth}"
            Height="{Binding ElementName=AccountsSettingsFlyoutElement, Path=ActualHeight}">
    <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
        <TextBlock Text="Accounts"
                   x:Uid="AccountsSettings_Title"
                   VerticalAlignment="Bottom"
                   Style="{StaticResource SettingTitleStyle}" />

    </StackPanel>
</StackPanel>

.

あなたが見ることができるように、赤い地域全体を網羅していません。私はこのようなUIを作成したいです。

上記の図の下部に気付いた場合。 [アカウントの追加]ボタンは、フライアウトの幅全体をカバーします。

これに似たUIをどのように達成するか？

Answer 1

ActualHeightは依存プロパティではありませんので、バインディングはおそらく機能していません。高さを「バインド」する方法は、このようなSizeChangedイベントハンドラを使用することです。

    private void ScrollViewer_OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        YourGrid.Width = e.NewSize.Width;
        YourGrid.Height = e.NewSize.Height;
    }

.

SettingsFlyountスタイルにはパディング内蔵があります。コンテンツの合計領域を使用するには、PDDingプロパティを0に設定します。

<SettingsFlyout x:Class="ApplicationSettings.SettingsFlyout1"
            Padding="0" ...

.

最後のもの、正しいサイズを設定するには、コンテンツプレゼンターのサイズを使用してください。

<ScrollViewer x:Name="ScrollViewer"
                AutomationProperties.AccessibilityView="Raw"
                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                Grid.Row="1"
                SizeChanged="ScrollViewer_OnSizeChanged"
                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
    <ContentPresenter x:Name="ContentPresenter"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{Binding TemplateSettings.ContentTransitions, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                        Content="{TemplateBinding Content}"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ScrollViewer>

.

Answer 2

SettingsFlyOoutはContentControlから継承されます。

<SettingsFlyout .....
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Padding="0">
    <Grid Background="blue" 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Stretch">
        ....
    </Grid>
</SettingsFlyout>

.