Como usar toda a altura e largura de um SettingsFlyout no Windows 8.1

Question

Eu tenho um Windows 8.1 aplicação com um submenu de configurações que será aberto quando você clicar em uma configuração personalizada na caixa de configurações de barra de "charms".

No entanto a minha conteúdo dentro do submenu de configurações não estiver usando a altura/largura do submenu de configurações, em vez disso, tem um uniforme de margem em todos os cantos.A imagem a seguir exibe o mesmo.

Para melhor compreensão, eu coloquei o preto e o vermelho de fundo.O fundo negro é para SettingsFlyout, o vermelho é para o StackPanel dentro do Submenu.Eu tenho definir o StackPanel altura e largura para a actualheight e actualwidth do submenu Aqui está o 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>

Como você pode ver o vermelho não está cobrindo todo o preto região.Eu quero criar uma INTERFACE de usuário como este.

Agora, se você notar, na parte inferior da figura acima.O Botão Adicionar Uma Conta cobre toda a largura do Submenu.

Como faço para obter uma INTERFACE de utilizador semelhante a este?

Answer 1

ActualHeight não é uma propriedade de dependência, de modo a vinculação é, provavelmente, a não funcionar.O caminho para 'ligar' a altura é usar um SizeChanged manipulador de eventos como este.

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

O SettingsFlyout Estilo tem um estofamento interno.Para usar a área total de seu conteúdo, definir a propriedade de preenchimento para 0.

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

Última coisa, para definir o tamanho correto, use o tamanho do apresentador de conteúdo.

<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 é herdada do ContentControl, portanto, você precisa mudar apenas seguinte propriedades para o preenchimento total da seção :

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