Comment utiliser toute la hauteur et la largeur d'un paramètres de réglage dans Windows 8.1

Question

J'ai une application Windows 8.1 avec un vol de paramètres qui s'ouvrira lorsque vous cliquez sur un paramètre personnalisé dans la barre de caractères des paramètres.

Cependant, mon contenu à l'intérieur du vol de paramètres n'utilise pas la hauteur / la largeur complète du vol de paramètres, a plutôt une marge uniforme à travers tous les coins. La photo suivante affiche la même chose.

Pour une meilleure compréhension, j'ai mis des arrière-plans noirs et rouges. Le fond noir est pour les paramètres de réglage, le rouge est destiné à la StackPanel à l'intérieur du flyout. J'ai défini la hauteur et la largeur de la stackpanel sur la fraîcheur et réelWidth du flyout Voici le 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>

Comme vous pouvez le voir, le rouge ne couvre pas l'ensemble de la région noire. Je veux créer un UI comme ça.

Maintenant, si vous remarquez au bas de la figure ci-dessus. Le bouton Ajouter un compte couvre toute la largeur du flyout.

Comment puis-je réaliser un UI similaire à celui-ci?

Answer 1

ActuelleHeight n'est pas une propriété de dépendance afin que la liaison ne fonctionne probablement pas.Le moyen de "lier" la hauteur consiste à utiliser un gestionnaire d'événements sizéchangé tel que celui-ci.

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

Le style ParamètresSflyout a un rembourrage intégré.Pour utiliser la superficie totale de votre contenu, définissez la propriété Rembourrage sur 0.

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

dernière chose, pour définir la taille correcte, utilisez la taille du présentateur de contenu.

<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

ParamètresSflyout est hérité de ContentControl, vous devez donc modifier uniquement les propriétés suivantes pour remplir la section complète:

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