C# UWP Toolkit Ombre interne DropShadowPanel

Question

En C# UWP comment créer un effet d'ombre interne?

Comme ceci:

J'ai créé une grille avec juste une frontière, mais l'ombre est peuplait l'ensemble du réseau.

<controls:DropShadowPanel  BlurRadius="5" 
           ShadowOpacity="0.5" 
           OffsetX="0" 
           OffsetY="0" 
           Color="Black"> 
    <Grid BorderBrush="White" BorderThickness="5"/> 
</controls:DropShadowPanel> 

Comment créer un effet d'ombre interne avec ce contrôle?

Answer 1

Notez que DropShadowPanel peut masquer une Rectangle, de sorte que vous pouvez créer un remplissage moinsRectangle et le placer dans un DropShadowPanel pour créer une ombre pour répandre frontière que l » Rectangle. Ensuite, il vous suffit de le placer à l'intérieur d'un Grid et de couper le Grid pour couper l'ombre extérieure. Si vous voulez une couleur d'arrière-plan, ajoutez simplement un autre Rectangle au Grid et placez-le derrière le DropShadowPanel.

Exemple de code

<Grid Width="400" 
     Height="200" 
     Margin="24"> 
    <Grid.Clip> 
     <RectangleGeometry Rect="0,0,400,200" /> 
    </Grid.Clip> 
    <Rectangle x:Name="BackgroundColor" 
       Fill="LightSteelBlue" /> 
    <controls:DropShadowPanel x:Name="InnerShadow" 
           HorizontalContentAlignment="Stretch" 
           BlurRadius="15" 
           ShadowOpacity="0.5" 
           Color="Black"> 
     <Rectangle x:Name="BorderColor" 
        Stroke="LightGray" 
        StrokeThickness="10" /> 
    </controls:DropShadowPanel> 
</Grid> 

Résultat

---

A propos Clipping

Une chose à noter est que vous devrez manuall y mettre à jour la taille du Rect chaque fois que la taille de votre Grid change. Alternativement, vous pouvez utiliser la nouvelle API de composition pour faire le découpage -

var visual = ElementCompositionPreview.GetElementVisual(RootGrid); 
var compositor = visual.Compositor; 
visual.Clip = compositor.CreateInsetClip();