xaml - 为弹出窗口设置整页高度

Question

我想在我的页面右侧显示弹出式面板，并且此面板必须具有页面的完整高度。

这是一个 XAML:

<Button Content="One" Grid.Column="0" Click="Button_Click_1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"  /> 

<Button x:Name="TestButton" Content="TestButton" Grid.Column="1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Button.Flyout>
       <Flyout>
          <StackPanel x:Name="FlyoutPanel" Margin="0 0 0 0">
             <TextBlock>Some text</TextBlock>
             <Button Click="Button_Click">Press me</Button>
          </StackPanel>
       </Flyout>
    </Button.Flyout>
</Button>

<StackPanel x:Name="FlyoutPlacement" Grid.Column="2" Margin="0 0 0 0"/>

这是在我的页面右侧显示弹出面板的代码:

 private void Button_Click_1(object sender, RoutedEventArgs e)
 {
   FlyoutPanel.Height = Window.Current.Bounds.Height;
   FlyoutPlacement.Height = Window.Current.Bounds.Height;
   TestButton.Flyout.ShowAt(FlyoutPlacement);
 }

现在我的弹出面板有一个垂直滚动条，其尺寸小于页面尺寸。如何删除滚动条并将弹出面板设置为整页大小？

Answer 1

您需要编辑默认的 FlyoutPresenterStyle:

    <SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="#FF000000"/>
    <SolidColorBrush x:Key="FlyoutBorderThemeBrush" Color="#FFFFFFFF"/>

    <x:Double x:Key="FlyoutThemeMaxHeight">718</x:Double> <!-- Change to NaN -->
    <x:Double x:Key="FlyoutThemeMaxWidth">450</x:Double> <!-- Change to NaN -->
    <x:Double x:Key="FlyoutThemeMinHeight">54</x:Double>
    <x:Double x:Key="FlyoutThemeMinWidth">70</x:Double>
    <Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
    <Thickness x:Key="FlyoutContentThemePadding">20,17,20,20</Thickness> <!-- Change to 0 -->

    <Style x:Key="FlyoutStyle" TargetType="FlyoutPresenter">
        <Setter Property="RequestedTheme" Value="Light" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
        <Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
        <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
        <Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <!-- Change to Hidden -->
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="FlyoutPresenter">
                    <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer x:Name="ScrollViewer"
                    ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                    HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                    VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                    AutomationProperties.AccessibilityView="Raw">
                            <ContentPresenter Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

您的问题的主要资源是 FlyoutThemeMaxHeight、FlyoutThemeMaxWidth 和 FlyoutContentThemePadding。您需要将最大值设置为一个非常大的数字，例如 NaN。

然后将其设置为 FlyoutPresenterStyle:

<Flyout FlyoutPresenterStyle="{StaticResource FlyoutStyle}">

还要隐藏垂直滚动条，将 ScrollViewer.VerticalScrollBarVisibility 设置为 Hidden。