How to add a drop shadow around flyout

Question

How to add a drop shadow around a flyout in UWP?

I tried DropShadowPanel in UWP Community Toolkit to wrap the flyout, but it didn't show along with the flyout. How can I achieve it so that a drop shadow shows and disappears along with the flyout? Thanks!

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

score 5 · Accepted Answer · answered Apr 09 '17 at 15:09

You have to add the DropShadowPanel to the FlyoutPresenter, not the Flyout itself.

<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>

How to add a drop shadow around flyout

1 Answers1