C# UWP Bộ công cụ DropShadowPanel bóng bên trong

Question

Trong C# UWP cách tạo hiệu ứng đổ bóng bên trong?

Như thế này:

Tôi đã tạo ra một mạng lưới với chỉ một biên giới, nhưng bóng được Populating toàn bộ lưới điện.

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

Làm cách nào để tạo hiệu ứng đổ bóng bên trong bằng điều khiển này?

Answer 1

Lưu ý rằng DropShadowPanel có thể che khuất một Rectangle, vì vậy bạn có thể tạo một fill-ítRectangle và đặt nó bên trong một DropShadowPanel để tạo ra một cái bóng lây lan cho biên giới chỉ 's Rectangle. Sau đó, bạn chỉ cần đặt nó bên trong một Grid và cắt Grid để cắt bỏ bóng bên ngoài. Nếu bạn muốn có màu nền, chỉ cần thêm một số khác là Rectangle vào Grid và đặt nó phía sau DropShadowPanel.

Mẫu Mã

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

quả

---

Về Clipping

Một điều cần lưu ý là bạn sẽ cần phải manuall y cập nhật kích thước của Rect bất cứ khi nào kích thước của các thay đổi Grid của bạn. Ngoài ra, bạn có thể sử dụng API thành phần mới để thực hiện việc cắt -

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