Come utilizzare l'altezza completa e la larghezza di un impostazioniFlyout in Windows 8.1

Question

Ho un'applicazione Windows 8.1 con un flyout delle impostazioni che si aprirà quando si fa clic su un'impostazione personalizzata nella barra delle impostazioni Charms.

Comunque il mio contenuto all'interno del flyout delle impostazioni non utilizza l'altezza / larghezza completa del flusso delle impostazioni invece ha un margine uniforme su tutti gli angoli. La seguente immagine visualizza lo stesso.

Per una migliore comprensione ho messo sfondi neri e rossi. Lo sfondo nero è per impostazioniFlyout, il rosso è per lo stackpanel all'interno del flyout. Ho impostato l'altezza e la larghezza dello stackpanel per l'attualità e l'attualità del flyout Ecco lo 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>

.

Come puoi vedere il rosso non copre l'intera regione nera. Voglio creare un UI come questo.

Ora se si nota nella parte inferiore della figura sopra. Il pulsante Aggiungi un account copre l'intera larghezza del flyout.

Come faccio a raggiungere un UI simile a questo?

Answer 1

ActualHeight non è una proprietà di dipendenza in modo che il vincolo stia probabilmente non funziona.Il modo per "legare" l'altezza è utilizzare un gestore di eventi sizechanged come questo.

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

.

Lo stile SettingsFlyout ha un'imbottitura incorporata.Per utilizzare l'area totale per i tuoi contenuti, impostare la proprietà di imbottitura su 0.

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

.

L'ultima cosa, per impostare le dimensioni corrette, utilizzare la dimensione del contenuto del contenuto.

<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

ImpostazioniFlyout è ereditata da ContentControl Pertanto è necessario modificare solo le prossime proprietà per il riempimento Sezione completa:

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

.