Comment faire pour ajouter une ombre portée autour de flyout

Question

Comment ajouter une ombre portée autour d'un flyout dans UWP?

J'ai essayé DropShadowPanel dans UWP Community Toolkit pour envelopper le flyout, mais il ne s'affiche pas avec le flyout. Comment puis-je y arriver afin qu'une ombre portée apparaisse et disparaisse avec le flyout? Merci!

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

Answer 1

Vous devez ajouter le DropShadowPanel au FlyoutPresenter, pas le Flyout lui-même.

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