Windows 8.1에서 설정 플라이 아웃 전체 높이와 너비를 사용하는 방법

Question

설정 CARM BAR에서 사용자 정의 설정을 클릭하면 설정 플라이 아웃이있는 Windows 8.1 응용 프로그램이 있습니다.

그러나 설정 플라이 아웃 내의 내용은 설정 플라이 아웃의 전체 높이 / 너비를 사용하지 않습니다. 대신 모든 모서리에 걸쳐 균일 한 마진이 있습니다. 다음 그림이 동일하게 표시됩니다.

더 나은 이해를 위해 나는 검은 색과 빨간색 배경을 넣었습니다. 검정색 배경은 SettingsFlyout에 대한 것입니다. 빨간색은 플라이 아웃 내부의 스택 패널 용입니다. 나는 스택 패널 높이와 너비를 실제 가치와 플라이 아웃의 실제 방향으로 설정했습니다. 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는 Dependency 속성이 아니므로 바인딩이 아마도 작동하지 않을 것입니다.'바인드'로가는 길은이 (가)와 같은 sizechanged 이벤트 핸들러를 사용하는 것입니다.

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

.

SettingsFlyout 스타일에는 패딩 내장이 있습니다.콘텐츠 전체 영역을 사용하려면 패딩 속성을 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

SettingsFlyOut은 ContentControl에서 상속됩니다. 따라서 전체 섹션 채우기에 대한 다음 속성 만 변경해야합니다.

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

.