WPF中阴影效果和模糊效果的使用

已于 2023-07-21 13:35:01 修改
阅读量3.8k 收藏 8
点赞数 2
分类专栏： WPF 文章标签： wpf c# ui
于 2023-03-22 13:51:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39847278/article/details/129707074
版权

总目录

文章目录

前言

WPF中的控件效果主要通过Effect来实现，而Effect有DropShadowEffect（投影效果）和BlurEffect（模糊效果）两个派生类，本文将主要介绍Effect的运用！

一、DropShadowEffect

1、DropShadowEffect各属性效果图

在这里插入图片描述
另外还有两个常用的属性，没有在上图介绍

  • Color 属性 设置阴影的颜色
  • Opacity 属性 设置阴影的透明度

2、实现代码

    <UniformGrid Background="LightGreen" Columns="4">
        <StackPanel Margin="20">
            <TextBlock Text="Direction=0" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Black" Direction="0" ShadowDepth="10"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Direction=90" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Black" Direction="90" ShadowDepth="10"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Direction=180" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Black" Direction="180" ShadowDepth="10"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Direction=270" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Black" Direction="270" ShadowDepth="10"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Direction=360" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Black" Direction="360" ShadowDepth="10"/>
                </TextBlock.Effect>
            </TextBlock>

        </StackPanel>
        <StackPanel Margin="20" Background="White">
            <TextBlock Text="ShadowDepth=0" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Red" Direction="0" ShadowDepth="0"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="ShadowDepth=20" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Red" Direction="0" ShadowDepth="20"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="ShadowDepth=40" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Red" Direction="0" ShadowDepth="40"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="ShadowDepth=80" Margin="0,20">
                <TextBlock.Effect>
                    <DropShadowEffect Color="Red" Direction="0" ShadowDepth="80"/>
                </TextBlock.Effect>
            </TextBlock>
            
        </StackPanel>
        <StackPanel>
            <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
                <Border.Effect>
                    <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="0" BlurRadius="20"/>
                </Border.Effect>
                <TextBlock Text="Direction=0 ShadowDepth=0 BlurRadius=20" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
            </Border>

            <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
                <Border.Effect>
                    <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="0" BlurRadius="40"/>
                </Border.Effect>
                <TextBlock Text="Direction=0 ShadowDepth=0 BlurRadius=40" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
            </Border>

            <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
                <Border.Effect>
                    <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="10" BlurRadius="60"/>
                </Border.Effect>
                <TextBlock Text="Direction=0 ShadowDepth=10 BlurRadius=60" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
            </Border>

            <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
                <Border.Effect>
                    <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="100" BlurRadius="120"/>
                </Border.Effect>
                <TextBlock Text="Direction=0 ShadowDepth=100 BlurRadius=120" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
            </Border>
        </StackPanel>
    </UniformGrid>

二、BlurEffect

1、BlurEffect各属性效果图

在这里插入图片描述

2、实现代码

    <UniformGrid Background="LightGreen" Columns="3">
        <StackPanel Margin="20">
            <TextBlock Text="Radius=0   KernelType=Box" Margin="0,10">
                <TextBlock.Effect>
                    <BlurEffect Radius="0"  KernelType="Box"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Radius=1   KernelType=Box" Margin="0,10">
                <TextBlock.Effect>
                    <BlurEffect Radius="1"  KernelType="Box"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Radius=2   KernelType=Box" Margin="0,10">
                <TextBlock.Effect>
                    <BlurEffect Radius="2"  KernelType="Box"/>
                </TextBlock.Effect>
            </TextBlock>
        </StackPanel>
        <StackPanel Margin="20">
            <TextBlock Text="Radius=0   KernelType=Gaussian" Margin="0,10">
                <TextBlock.Effect>
                    <BlurEffect Radius="0"  KernelType="Gaussian"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Radius=1   KernelType=Gaussian" Margin="0,10">
                <TextBlock.Effect>
                    <BlurEffect Radius="1"  KernelType="Gaussian"/>
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Radius=2   KernelType=Gaussian" Margin="0,10">
                <TextBlock.Effect>
                    <BlurEffect Radius="2"  KernelType="Gaussian"/>
                </TextBlock.Effect>
            </TextBlock>
        </StackPanel>

    </UniformGrid>

三、进阶使用

详情可查：[WPF] 使用 Effect 玩玩阴影、内阴影、 长阴影

四、注意事项

1、 由于使用Effect 导致字体模糊

在这里插入图片描述

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">

            <Border Width="200" Height="100" Background="#5Eb978">
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
                </Border.Effect>
                <TextBlock Text="这个是错误示范" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25"></TextBlock>
            </Border>

            <Grid Width="200" Height="100" Margin="30,0,0,0">
                <Border Width="200" Height="100" Background="#5Eb978">
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
                    </Border.Effect>
                </Border>
                <TextBlock Text="正确示范" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="25"></TextBlock>
            </Grid>


        </StackPanel>

提示：当对Border 使用 Effect 的时候，最好不要在Border 内部添加TextBlock等展示元素，否则会造成 TextBlock 模糊。

结语

以上就是本文的内容，希望以上内容可以帮助到您，如文中有不对之处，还请批评指正。

参考资料：
WPF 实现阴影效果
[WPF] 使用 Effect 玩玩阴影、内阴影、 长阴影
WPF Effect 造成的字体模糊

鲤籽鲲
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
WPF 磨砂效果
03-13
1. **模糊效果**：在WPF中，可以使用`BitmapEffect`类或`Effect`类来添加模糊效果。`DropShadowEffect`可以创建一个简单的阴影，但不能直接用于实现模糊。为了实现背景模糊，我们需要使用`BlurEffect`。将`...
WPF：带阴影、带箭头的Popup提示框
03-30
**阴影效果**在UI设计中通常用于提供深度感知和视觉层次感。在WPF中，我们可以通过设置Popup的`DropShadowEffect`属性来添加阴影效果。`DropShadowEffect`提供了控制阴影颜色、模糊半径、偏移量等参数的能力，使得...
【转载】Effect 控件(发光/阴影)特效DropShadowEffect
wassup博客
09-01 645
因为BitmapEffect在.NET4.0已经被官方定义为过期，所以再想使用按钮的发光特效，只能直接使用Windows的依赖属性Effect 了 Effect :一个表示位图效果的 System.Windows.Media.Effects.Effect DropShadowEffect有六个属性 DropShadowEffect.BlurRadius DropShadowEffect.Color DropShadowEffect.Direction DropShadowEffect.Opacity Dro
WPF 阴影效果 DropShadowEffect
weixin_43152819的博客
03-08 1121
WPF中的控件阴影效果，DropShadowEffect的简单使用。
WPF对象效果，阴影的实现
最新发布
Ru_Tesla的博客
04-13 184
所有继承自UIElement 的都有这个Effect属性，看以下代码。方向的值表示角度，度数跟直角坐标系度数一样，0度表示正右侧。OpacityMask 透明渐变的效果，蒙版的效果。三种改变Background背景色的方法。Effect继承制UIElement。BlurRadius阴影的模糊程度。
WPF模糊效果(BlurEffect)
weixin_34072159的博客
09-26 2443
原文:WPF模糊效果(BlurEffect) &lt;TextBlock Padding="10" Text="设置模糊" FontSize="32" Background="#999"&gt; &lt;TextBlock.Effect&gt; &lt;BlurEffect Radius="5&quot
C# wpf 无边框窗口添加阴影效果
codeofcc的博客
07-28 4963
制作无边框窗口时，系统自带阴影会消失，这时就需要我自己给窗口添加阴影以防止窗口融入背景。添加阴影的方法很简单，直接用effect就可以了，但这里还是有个不容易注意到的细节需要处理，加阴影后窗口最大化可能会有问题。......
WPF Effect （一）
qq_37246121的博客
02-09 5009
 BitmapEffect位图效果是简单的像素处理操作。它可以呈现下面几种特殊效果。             BevelBitmapEffect        凹凸效果            BlurBitmapEffect         模糊效果            DropShadowBitmapEffect投影效果            EmbossBitmapEffect     浮雕...
WPF中阴影边框
qq_40572871的博客
12-14 1010
WPF中的一种效果（Effect），它可以为元素添加阴影效果。
WPF效果DLL，使WPF控件显示效果变得更加惊艳
10-27
例如，模糊、阴影、折射、反射等高级视觉效果都可以通过着色器实现。这不仅可以提升UI的美观度，还能让应用的界面更符合用户对现代软件的期望。 其次，TransitionEffects.dll可能是一个包含过渡动画效果的库。在WPF...
C#WinForm窗体四周阴影效果
12-31
最后，为了更好地理解和实践这个效果，你可以从提供的压缩包文件“C#WinForm窗体四周阴影效果”中获取示例代码，根据代码结构和注释进行学习和调试。这将帮助你更深入地掌握这个技术，并能将其应用到自己的项目中。
ＷＰＦ－－Ｅｆｆｅｃｔ特效
04-15
ＷＰＦ－－Ｅｆｆｅｃｔ特效 对Effect的进行使用的小例子
wpf 实时毛玻璃 live blur 效果
10-06
wpf 实现实时毛玻璃（live blur）效果
WPF阴影的简单使用（DrawShadowEffect)
weixin_53370274的博客
06-04 389
ShadowDepth：确定阴影离开内容多远，单位为像素（默认值为5）。将该属性设置为0会创建外侧辉光（outer-glow）效果，该效果会在内容的周围添加晕彩（halo of color）;将该属性设置为0会将阴影放置到右边，增加该属性的值时会逆时针移动阴影。BlurRadius：模糊阴影，该属性和BlurEffect类的Radius属性非常类似（默认值是5）；Opacity：使用从1（完全不透明，默认值）到0（完全透明）之间的小数使阴影部分透明；Color：设置阴影的颜色（默认为黑色）；
WPF文字阴影 文字描边
wnk1997的博客
03-19 789
参考：https://blog.csdn.net/jetluning/article/details/39178367 参考：https://blog.csdn.net/Vblegend_2013/article/details/83897803 参考： 第一种设置阴影效果，看上去有点像描边 <TextBlock Name="copor" Width="994" Height="37" Margin="1
阴影效果DropShadowEffect
a79468981的博客
10-02 390
<TextBlock FontSize="20" Margin="3"> <TextBlock.Effect> <DropShadowEffect></DropShadowEffect> </TextBlock.Effect> <TextBlock.Text>Basic dropshadow&lt...
WPF阴影效果(DropShadowEffect)
weixin_34352005的博客
09-26 1093
原文:WPF阴影效果(DropShadowEffect) &lt;TextBlock Text="阴影效果" FontSize="32"&gt; &lt;TextBlock.Effect&gt; &lt;DropShadowEffect Color="Black"&gt;&lt;/DropShadowEffect&a
wpf 字体模糊_WPF Effect 造成的字体模糊
weixin_34763548的博客
01-14 614
WPF 里面有个Effect ，暂且可以理解为 “特效” 分类。但是有时候使用不恰当，容易出现各种毛病。例如：代码如下：提示：Border 级使用 Effect 造成 TextBlock 模糊。所以不能直接在有DropShadowEffect的Border内部添加展示元素。WPF字体模糊解决方案原文:WPF字体模糊解决方案 WPF对字体渲染做了很大的改善,与Winform窗体字体相比较,更加平滑,...
WPF——关于图像模糊的解决办法？
Dedication_的博客
03-20 794
wpf trap
WPF按钮添加阴影效果
05-18
要在WPF按钮上添加阴影效果，可以使用以下步骤： 1. 在XAML中为按钮添加一个边框控件： ```xml <Button Content="MyButton"> <Button.Effect> <DropShadowEffect BlurRadius="5" Color="Black" Opacity="0.5" ShadowDepth="2" /> </Button.Effect> </Button> ``` 2. 在按钮的效果属性中添加DropShadowEffect类。 3. 可以通过更改BlurRadius、Color、Opacity和ShadowDepth属性的值来调整阴影效果的强度和外观。 注意：DropShadowEffect只适用于.NET Framework 3.5及更高版本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值