Question

我有一个带有设置弹出窗口的Windows 8.1应用程序，当您单击设置超级按钮栏中的自定义设置时，该应用程序将打开。

但是，我在设置弹出窗口内的内容未使用设置弹出窗口的完整高度/宽度，而是在所有角落都有均匀的边距。以下图片显示相同。

enter image description here

为了更好地理解我已经把黑色和红色背景。黑色背景用于SettingsFlyout，红色用于Flyout内的StackPanel。我已将StackPanel的高度和宽度设置为弹出窗口的实际高度和实际宽度这是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。

enter image description here

现在，如果您注意到上图的底部。 “添加帐户”按钮涵盖了弹出窗口的整个宽度。

如何实现与此类似的用户界面？

Answer 1

ActualHeight不是依赖项属性，因此绑定可能无法正常工作。结合＆＃39;的方式高度是使用像这样的SizeChanged事件处理程序。

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

SettingsFlyout样式内置了填充。要使用内容的总面积，请将padding属性设置为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>

Full-size settings flyout

Answer 2

SettingsFlyout继承自ContentControl，因此您只需更改填充完整部分的下一个属性：

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

如何在Windows 8.1中使用SettingsFlyout的完整高度和宽度

2 个答案: