如何在flyout周圍添加陰影效果

Question

如何在UWP的陰影周圍添加陰影效果？

我在UWP社區工具包中嘗試使用DropShadowPanel來包裝彈出窗口，但它沒有與彈出窗口一起顯示。我該如何實現這一功能，以便陰影顯示並隨同彈出窗口一起消失？謝謝！

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

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