在 UWP 的 Flyout 的边框一点都不好看，本文告诉大家如何去掉这个边框

先写一个简单的界面，这个界面里面有一个按钮

           <Button.Flyout>
                <Flyout Placement="Right">
                    <Grid Name="PopupGrid" Background="Aqua" Height="600" Width="200"/>
                </Flyout>
            </Button.Flyout>
        </Button>

运行代码，点击按钮，可以看到下面界面

通过重写 FlyoutPresenterStyle 可以修改边框的距离

            <Button.Flyout>
                <Flyout Placement="Right">
                    <Flyout.FlyoutPresenterStyle>
                        <Style TargetType="FlyoutPresenter">
                            <Setter Property="Padding" Value="0"></Setter>
                            <Setter Property="BorderThickness" Value="0"></Setter>
                        </Style>
                    </Flyout.FlyoutPresenterStyle>
                    <Grid Name="PopupGrid" Background="Aqua" >
                        <TextBlock Margin="10,10,10,10" Text="欢迎访问我博客 https://blog.lindexi.com 里面有大量 UWP 博客"></TextBlock>
                    </Grid>
                </Flyout>
            </Button.Flyout>

现在运行代码点击按钮可以看到下面界面，看不到边框

更多 Flyout 请看

win10 uwp 右击浮出窗在点击位置

本文会经常更新，请阅读原文： https://dotnet-campus.github.io//post/win10-uwp-%E5%8E%BB%E6%8E%89-Flyout-%E8%BE%B9%E6%A1%86.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

知识共享许可协议 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 lindexi （包含链接： https://dotnet-campus.github.io/ ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 。

相关文章