如何在弹出窗口周围添加阴影

【问题标题】：How to add a drop shadow around flyout如何在弹出窗口周围添加阴影
【发布时间】：2017-04-09 14:44:18
【问题描述】：

如何在 UWP 中的浮出控件周围添加阴影？

我尝试在 UWP 社区工具包中使用 DropShadowPanel 来包装浮出控件，但它没有与浮出控件一起显示。我怎样才能实现它，以便阴影随着弹出窗口显示和消失？谢谢！

<Flyout x:Name="Flyout" Placement="Bottom">
    <TextBlock Text="Error message" />
</Flyout>

【问题讨论】：

标签： c# xaml uwp dropshadow windows-community-toolkit

【解决方案1】：

您必须将DropShadowPanel 添加到FlyoutPresenter，而不是Flyout 本身。

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>

                        <!-- This is the root visual of the flyout -->

                        <toolkit:DropShadowPanel>
                            <Border Background="LightGray" Padding="12">
                                <ContentPresenter />
                            </Border>
                        </toolkit:DropShadowPanel>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Flyout.FlyoutPresenterStyle>

    <TextBlock Text="Error message" />
</Flyout>

【讨论】：