Comment créer un DropShadow pour un SplitView.Pane comme dans Edge

J'essaie actuellement de créer un SplitView.Pane qui ressemble un peu à l'historique du navigateur de bord/volet favoris. Par conséquent, j'ai besoin d'une ombre à la frontière (à gauche) de mon SplitView.Pane. Pour créer l'ombre, j'utilise DropShadowPanel de la boîte à outils UWP. L'idée est quelque chose comme ça (ne fonctionne pas, bien sûr):Comment créer un DropShadow pour un SplitView.Pane comme dans Edge

<controls:DropShadowPanel> 
    <SplitView.Pane> 
     <!--Content--> 
    </SplitView.Pane> 
</controls:DropShadowPanel>

L'ombre doit être à l'extérieur du panneau. Comment puis-je faire cela?

Voici comment l'ombre devrait ressembler à:

How it should look like

EDIT: Le DropShadow doit être en dehors du volet. La réponse du poste dupliqué crée une ombre dans le volet. À moins que je manque quelque chose là-bas.

Source

2017-09-16 Crix

On dirait que déjà posé la question ou en double de ce https: //stackoverflow.com/questions/43395093/how-to-add-a-drop-s hasow-for-splitview-pane –

Copie possible de [Comment ajouter une ombre portée pour SplitView.Pane] (https://stackoverflow.com/questions/43395093/how-to-add-a-drop-shadow-for- splitview-volet) –

Vous manquez la question la personne a demandé, je cite: _Cependant, l'ombre apparaît à l'intérieur du volet, tandis que je veux que ce soit à l'extérieur de SplitView.Pane, l'emballage. Comment puis-je l'implémenter? Merci! _ –

Vous ne pouvez pas simplement appliquer une ombre à l'enfant direct de Pane car il semblerait être coupé. Vous pouvez bien sûr essayer primordial le style de SplitView et l'application de l'ombre directement sur l'élément Pane, mais vous allez bientôt découvrir que le PaneRoot a sa propre CLIPPING logique définie en XAML, donc si vous ne faites pas attention, vous pourriez potentiellement casser sa logique d'interface utilisateur sous-jacente.

Voici une solution simple qui fonctionne sans modifier le style. L'idée est d'appliquer l'ombre sur un élément interne où il y a suffisamment d'espace entre cet élément et l'élément racine de Pane pour que l'ombre s'étale.

Supposons que le PanePlacement est réglé sur Right, votre élément racine, un Border (à savoir RootBorder), devrait avoir une gauche rembourrage (i.e.. 12,0,0,0) qui correspond à la BlurRadius (à savoir 12) du DropShadowPanel.

En outre, le PaneBackground doit être transparent sinon il couvrira l'ombre. Au lieu de cela, la couleur d'arrière-plan doit ensuite être appliquée à un élément de conteneur (c'est-à-dire PaneContentGrid) qui se trouve à l'intérieur de l'élément racine.

S'il vous plaît voir le code ci-dessous pour un exemple simple -

XAML

<SplitView PanePlacement="Right" PaneBackground="Transparent"> 
    <SplitView.Pane> 
     <Border x:Name="RootBorder" Padding="12,0,0,0"> 
      <Grid> 
       <controls:DropShadowPanel BlurRadius="12" 
              Color="Black" 
              Opacity="0.3" 
              HorizontalContentAlignment="Stretch" 
              VerticalContentAlignment="Stretch"> 
        <Rectangle Fill="White" /> 
       </controls:DropShadowPanel> 

       <!-- SystemControlPageBackgroundChromeLowBrush is the default PaneBackground brush, feel free to change it to whatever you like! --> 
       <Grid x:Name="PaneContentGrid" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"> 
        <!-- place your Panel content here. --> 
       </Grid> 
      </Grid> 
     </Border> 
    </SplitView.Pane> 
</SplitView>

Démo

Source

2017-09-17 05:05:44

Génial! Cela fait l'affaire. Merci beaucoup pour votre solution détaillée. – Crix

Comment créer un DropShadow pour un SplitView.Pane comme dans Edge

Répondre

Questions connexes