C#UWP工具包DropShadowPanel内部阴影 [英] C# UWP Toolkit DropShadowPanel inner shadow
问题描述
在C#UWP中如何制作内部阴影效果?
In C# UWP how to make inner shadow effect?
赞:
我创建了一个仅带有边框的网格,但是阴影正在填充整个网格.
I have created one grid with just a border, but shadow is populating the whole grid.
<controls:DropShadowPanel BlurRadius="5"
ShadowOpacity="0.5"
OffsetX="0"
OffsetY="0"
Color="Black">
<Grid BorderBrush="White" BorderThickness="5"/>
</controls:DropShadowPanel>
如何使用此控件制作内部阴影效果?
How to make inner shadow effect with this control?
推荐答案
请注意,DropShadowPanel
可以掩盖Rectangle
,因此您可以创建 less-fill Rectangle
并将其放置在DropShadowPanel
中仅为Rectangle
的 border 创建扩展阴影.然后,将其放置在Grid
内,并修剪Grid
以切掉外部阴影.如果要使用背景色,只需将另一个Rectangle
添加到Grid
并将其放置在DropShadowPanel
后面.
Note that DropShadowPanel
can mask a Rectangle
, so you can create a fill-less Rectangle
and place it inside a DropShadowPanel
to create a spreading shadow for the Rectangle
's border only. Then, you just place it inside a Grid
and clip the Grid
to cut off the outer shadow. If you want a background color, simply add another Rectangle
to the Grid
and place it behind the DropShadowPanel
.
示例代码
<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>
结果
关于剪辑
要注意的一件事是,每当Grid
的大小更改时,您将需要手动更新Rect
的大小.另外,您可以使用新的Composition API进行裁剪-
One thing to note is that you will need to manually update the size of the Rect
whenever the size of your Grid
changes. Alternatively, you can use the new Composition API to do the clipping -
var visual = ElementCompositionPreview.GetElementVisual(RootGrid);
var compositor = visual.Compositor;
visual.Clip = compositor.CreateInsetClip();
这篇关于C#UWP工具包DropShadowPanel内部阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!