如何为UWP Flyout控件设置圆角？

嘿，这个需求我之前做项目的时候刚好碰到过！UWP默认的Flyout确实没有直接的CornerRadius属性可以设置，但有两种简单又靠谱的实现方式，我给你一步步讲清楚：

方法一：自定义Flyout的ControlTemplate #

直接修改Flyout的模板，找到内部的容器控件给它加上圆角属性就行。你可以通过Visual Studio的「提取控件模板」功能拿到默认模板，然后修改关键部分：

<Flyout Placement="Full">
    <Flyout.Template>
        <ControlTemplate TargetType="Flyout">
            <Popup x:Name="Popup">
                <!-- 给这个Border添加CornerRadius实现圆角 -->
                <Border x:Name="FlyoutPresenterBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="12"> <!-- 这里设置你想要的圆角大小 -->
                    <ContentPresenter x:Name="ContentPresenter"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </Popup>
        </ControlTemplate>
    </Flyout.Template>
    <!-- 这里放你的Flyout内容 -->
    <StackPanel Padding="24">
        <TextBlock Text="这是带圆角的全屏弹窗" FontSize="18"/>
        <Button Content="关闭" Margin="0,16,0,0" HorizontalAlignment="Right"/>
    </StackPanel>
</Flyout>

方法二：复用FlyoutPresenterStyle #

如果你的项目里多个Flyout都需要圆角，推荐用样式来统一设置，这样更高效：

首先在页面资源或者App.xaml里定义一个样式：

<Page.Resources>
    <Style x:Key="RoundedFlyoutStyle" TargetType="FlyoutPresenter">
        <Setter Property="CornerRadius" Value="12"/> <!-- 圆角大小 -->
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}"/>
        <Setter Property="Padding" Value="16"/>
    </Style>
</Page.Resources>

然后在Flyout里直接引用这个样式：

<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource RoundedFlyoutStyle}">
    <TextBlock Text="复用样式实现的圆角弹窗" Padding="20"/>
</Flyout>

小提示 #

• 因为你用了Placement="Full"，记得给Flyout的内容设置合适的Padding，避免内容贴到弹窗边缘挡住圆角；
• 如果需要阴影效果，默认的Flyout阴影可能会和圆角不匹配，这时候可以在模板里的Border外层加一个DropShadowPanel（需要引用Windows Community Toolkit），或者自定义阴影的Clip属性来适配圆角。

内容的提问来源于stack exchange，提问作者Pulkit Mehta