c# - 圆角 UWP Flyout

Question

我在我的 UWP 应用程序中使用 Flyout 控件，例如：

<Flyout Placement="Full"/>

这将打开一个矩形 Flyout。我想绕过这个弹出窗口的角落。有什么方法可以实现吗？

标签： c#windowsxamluwp

Answer 1

您可以修改FlyoutPresenterStyle弹出的默认值以设置CornerRadius为样式中的边框元素。

边框 .... CornerRadius="20"

 <Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Stretch"/>
           <Setter Property="IsTabStop" Value="False"/>
           <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
           <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}"/>
           <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" />
           <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
           <Setter Property="Template">
              <Setter.Value>
                 <ControlTemplate TargetType="FlyoutPresenter">
                    <Border Background="{TemplateBinding Background}" CornerRadius="20"
                     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>
      </Flyout.FlyoutPresenterStyle>
   <Grid Background="Red"></Grid>
 </Flyout>