Cómo usar la altura y el ancho total de una configuración de configuración en Windows 8.1

Question

Tengo una aplicación Windows 8.1 con un flyout de configuración que se abrirá al hacer clic en una configuración personalizada en la barra de encameles de configuración.

Sin embargo, mi contenido dentro de la configuración FlyOut no está utilizando la altura / ancho total de la configuración FlyOut, en su lugar, tiene un margen uniforme en todas las esquinas. La siguiente imagen muestra lo mismo.

Para una mejor comprensión, he puesto fondos negros y rojos. El fondo negro es para configuraciones, el rojo es para el Packpanel dentro del fluido. He establecido la altura y el ancho de PackPanel a la luz actual y el ancho real del flyout Aquí está el 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 puede ver, el rojo no está cubriendo toda la región negra. Quiero crear una UI como esta.

Ahora, si se da cuenta en la parte inferior de la figura anterior. El botón Agregar una cuenta cubre todo el ancho del flyout.

¿Cómo logro una UI similar a esta?

Answer 1

ActualHeight no es una propiedad de dependencia para que la unión sea probablemente no funciona.La forma de "enlazar" la altura es usar un manejador de eventos de SizeChanged como este.

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

El estilo de configuración de configuración tiene un relleno incorporado.Para usar el área total para su contenido, configure la propiedad de relleno a 0.

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

La última cosa, para establecer el tamaño correcto, use el tamaño del presentador de contenido.

<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

Configuración de Configuración se hereda de ContentControl, por lo tanto, necesita cambiar solo las próximas propiedades para rellenar la sección completa:

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