WPF - 阴影效果

这篇具有很好参考价值的文章主要介绍了WPF - 阴影效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基本属性:

属性
说明
描述
Color
设置阴影效果背景色
Color="Red"
ShadowDepth
设置阴影的偏移度
ShadowDepth="5"
Direction
设置阴影的角度
Direction="-45"
BlurRadius
设置阴影模糊程度
BlurRadius="20"
Opacity
设置阴影透明度
Opacity="1"
阴影效果介绍:
在WPF中,你可以使用DropShadowEffect属性为控件添加阴影效果。DropShadowEffect是System.Windows.Media.Effects命名空间下的一个类,它提供了一种简单的方法来为控件添加阴影效果。
下面是一个简单的示例,演示如何在WPF中为按钮添加阴影效果:
<Button Width="100" Height="50">
    <Button.Effect>
        <DropShadowEffect ShadowDepth="10" BlurRadius="20" Color="Gray"/>
    </Button.Effect>
    Click Me
</Button>
在上面的示例中,我们为按钮的Effect属性设置了一个DropShadowEffect对象。ShadowDepth属性控制阴影的深度,BlurRadius属性控制阴影的模糊程度,Color属性控制阴影的颜色。
你可以根据需要调整这些属性的值来获得不同的阴影效果。
阴影效果应用范围:
DropShadowEffect控件适用于需要添加阴影效果的各种场合,例如在按钮、标签、文本框等控件上添加阴影,以增强控件的立体感和视觉效果。
此外,DropShadowEffect控件还可以用于实现阴影的动态效果,例如在鼠标悬停时改变阴影的颜色、大小等属性,以提供更丰富的交互体验。
总之,DropShadowEffect控件是一种非常实用的工具,可以在WPF应用程序中增强视觉效果和交互体验
阴影效果是UIElement类提供,所有继承自UIElement类的控件都可以实现阴影效果。

WPF - 阴影效果

代码实例:  由于时间关系,代码实例都写在一起了。

<Grid>
    
    <StackPanel>
        <!--设置阴影效果-->
        <Border Width="100" Height="50" Background="Orange">
            <!--Effect设置影响效果标签-->
            <Border.Effect>
                <!--在目标周围绘画阴影效果-->
                <DropShadowEffect Color="Red" ShadowDepth="0"/>
            </Border.Effect>
        </Border>
        
        <!--设置阴影效果的基本属性-->
        <Border Margin="0 10" Width="100" Height="50" Background="Orange">
            <!--Effect设置影响效果标签-->
            <Border.Effect>
                <!--默认显示黑色阴影效果-->
                <!--<DropShadowEffect/>-->
                <!--Color设置阴影颜色  ShadowDepth设置阴影偏移度 Direction设置阴影的角度 BlurRadius="20"设置模糊的程度 Opacity="1"设置透明度-->
                <!--大多数时候使用不设置阴影的偏移方向-->
                <DropShadowEffect Color="Red" ShadowDepth="5" Direction="-45" BlurRadius="20" Opacity="1"/>
            </Border.Effect>
        </Border>
        
        
        <!--设置阴影效果偏移度-->
        <Border Margin="0 10" Width="100" Height="50" Background="Orange">
            <!--Effect设置影响效果标签-->
            <Border.Effect>
                <!--ShadowDepth设置阴影偏移度 -->
                <DropShadowEffect Color="Red" ShadowDepth="5"/>
            </Border.Effect>
        </Border>

        <!--实现旋转阴影效果-->
        <Border Width="100" Height="50" Background="Orange">
            <!--设置旋转效果-->
            <Border.RenderTransform>
                <!--Angle设置旋转角度-->
                <RotateTransform Angle="45"/>
            </Border.RenderTransform>
            <!--Effect设置影响效果标签-->
            <Border.Effect>
                <!--Color设置阴影颜色  ShadowDepth设置阴影偏移度 Direction设置阴影的角度-->
                <DropShadowEffect Color="Red" ShadowDepth="5" Direction="-45"/>
            </Border.Effect>
        </Border>

        <!--给文本设置阴影效果-->
        <TextBlock Text="Hello">
            <TextBlock.Effect>
                <!--Color设置阴影颜色  ShadowDepth设置阴影偏移度 Direction设置阴影的角度 BlurRadius="20"设置模糊的程度 Opacity="1"设置透明度-->
                <DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="3"/>
            </TextBlock.Effect>
        </TextBlock>

        <!--实现阴影效果-->
        <Border Margin="0 60 0 0" Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10">
            <!--这里设置隐形效果是对整个border内所有的控件生效,只要是非透明不部分都给它做阴影效果-->
            <Border.Effect>
                <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/>
            </Border.Effect>
            <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

        <!--实现只有外部显示阴影效果,不影响内部控件-->
        <!--Background="White" 设置内容区域为白色背景 - 样式组合可以千变万化-发挥想象力-->
        <Border Margin="0 10 0 0" Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10"
                Background="White">
            <!--这里设置隐形效果是对整个border内所有的控件生效,只要是非透明不部分都给它做阴影效果-->
            <Border.Effect>
                <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/>
            </Border.Effect>
            <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

        <!--实现在内部显示阴影效果的情况下不影响内部的其它控件。-->
        <Grid Margin="0 10 0 0">
            <!--ClipToBounds="True" 超出区域部分的阴影效果进行裁切-->
            <Border  Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="0"
    ClipToBounds="True">
                <!--这里设置隐形效果是对整个border内所有的控件生效,只要是非透明不部分都给它做阴影效果-->
                <Border.Effect>
                    <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/>
                </Border.Effect>
            </Border>
            <!--这里文字放在boder外面,这样文字部分可以不显示阴影效果。-->
            <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>

        <!--实现在设置圆角的情况下在内部显示阴影效果-->
        <Grid Margin="0 10 0 0">
            <!--ClipToBounds="True" 超出区域部分的阴影效果进行裁切-->
            <Border  Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10">
                <!--这里设置告诉boder按照指定尺寸进行裁切-->
                <Border.Clip>
                    <!--Rect="0 0 100 30" 图形坐标(x,y,w,h)(x轴坐标,y轴坐标,宽度,高度) RadiusX="10" X轴圆角度-->
                    <RectangleGeometry Rect="0 0 100 30" RadiusX="10" RadiusY="10"/>
                </Border.Clip>
                <!--这里设置隐形效果是对整个border内所有的控件生效,只要是非透明不部分都给它做阴影效果-->
                <Border.Effect>
                    <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/>
                </Border.Effect>
            </Border>
            <!--这里文字放在boder外面,这样文字部分可以不显示阴影效果。-->
            <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </StackPanel>
</Grid>
 
效果展示:

WPF - 阴影效果

 文章来源地址https://www.toymoban.com/news/detail-693229.html

 

到了这里,关于WPF - 阴影效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css3阴影效果

    首先效果如下: 阴影效果完整代码如下 上面的动态图是没有加transition的,为了美观加上了一个

    2024年02月12日
    浏览(45)
  • CSS四周阴影效果

     

    2024年02月12日
    浏览(47)
  • css特效:流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果

    目录 总览 类选择器 自定义变量 效果 三种基本样式 确定 取消  删除 流光效果 背景流光 边框流光 ​编辑动态边框 双元素旋转  单元素旋转 单元素移动 边框线  顶部边框线 底部边框线 双边框线  滑动 反光滑动  箭头滑动  中央扩展  文字覆盖 横向文字覆盖  纵向文字覆

    2024年02月03日
    浏览(50)
  • WEB 3D技术 three.js 阴影属性

    上文 WEB 3D技术 three.js 光照与阴影 我们说了阴影 那么 我们继续将阴影的属性 目前 我们的代码 目前阴影效果是这样的 我们可以设置它的一个模糊度 我们官网搜索 LightShadow 下面找到 radius 模糊度的一个属性 这里 我们可以 设置 20 的一个模糊度 运行代码 然后看我们的模糊度

    2024年01月22日
    浏览(61)
  • Dalsa线阵相机说明(Linea Color GigESeries 2k and 4K)

    相机接口 相机DB15引脚定义 相机外型尺寸图 相机整体参数 传感器参数 最高采样帧率情况下每帧时间:1/45000 1000 1000=22us 传感器中感光单元的排列方式 双线性彩色相机基于Teledyne DALSA的双线性CMOS传感器,并设计为使得该双线传感器的第一行具有红色(R)和蓝色(B)交替像素

    2024年02月11日
    浏览(42)
  • CSS中如何实现文字渐变色效果(Text Gradient Color)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(75)
  • css——box-shadow阴影效果

    引用来源:box-shadow详解_box-shadow属性详解-CSDN博客

    2024年02月01日
    浏览(55)
  • 【Unity ShaderGraph】| 快速制作一个 卡通阴影色块效果

    前言 本文将使用ShaderGraph制作一个卡通阴影色块的效果,可以直接拿到项目中使用。 对ShaderGraph还不了解的小伙伴可以参考这篇文章:【Unity ShaderGraph】| Shader Graph入门介绍 | 简介 | 配置环境 | 窗口介绍 | 简单案例 下面就开始看一下具体的制作流程,然后自己动手制作一个吧

    2024年02月06日
    浏览(49)
  • 基于C#的窗体阴影效果方案 - 开源研究系列文章

             最近在研究C#的Winform窗体的效果,上次介绍了窗体动画效果的博文( 基于C#的无边框窗体动画效果的完美解决方案 - 开源研究系列文章 ),这次将窗体阴影效果的方案进行一个介绍。          找了一下度娘,具体窗体阴影效果就两种方法:直接绘制和使用双窗

    2024年02月14日
    浏览(38)
  • 31.带有文本和渐变阴影的CSS图标悬停效果

    index.html

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包