C#UWP工具包DropShadowPanel内部阴影 [英] C# UWP Toolkit DropShadowPanel inner shadow

查看:206
本文介绍了C#UWP工具包DropShadowPanel内部阴影的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆