首页 > 代码库 > Wpf效果

Wpf效果

wpf 提供了可以应用于任何元素的可视化效果,效果的目标是为润色文本、图像、按钮以及其他控件的外观,提供一种简单的声明方法。

wpf常用的效果类如下所示:

BlurEffect 模糊元素中的内容 属性包括:Radius、KernelType、RenderingBias。

DropShadowEffect  在元素背后添加矩形阴影。属性包括:BlurRadius、Color、Direction、Opactity、ShadowDepth、RenderingBias。

ShaderEffect 应用像素着色器,像素着色器是使用高级着色语言事先只做好的并且已经编译过的效果。 属性:Pixelshader。

一、BlurEffect类

  在WPF里面最简单的效果是BlurEffect类。该类是使控件达到内容元素模糊的效果,就好像是通过失焦透镜观察到的效果。通过增加Radius属性的值(默认值为5)可以增加模糊程度。

  话不多说,直接上代码:

<Button Content="Blurred(Radius=2)" Width="150" Height="30">            <Button.Effect>                <BlurEffect Radius="2"/>            </Button.Effect>        </Button>        <Button Content="Blurred(Radius=3)" Width="150" Height="30">            <Button.Effect>                <BlurEffect Radius="3"/>            </Button.Effect>        </Button>        <Button Content="Blurred(Radius=10)" Width="150" Height="30">            <Button.Effect>                <BlurEffect Radius="10"/>            </Button.Effect>        </Button>

以上代码所实现的效果图如下图所示:

二、DropShadowEffect类

  DropShadwoEffect类在元素之后添加轻微的便宜阴影。

  该类的常用属性如下所示:

  Clolor :设置阴影的颜色(默认是黑色)

  ShadowDepth:确定阴影离开内容多远。默认值为5像素。

  BlurRadius: 模糊阴影,也就是BlurEffect类中的Radius属性相似,模糊程度。

  Opacity:使用从1到0之间的小数使阴影部分透明。

  Direction:使用从0到360之间的角度值指定阴影相对于内容的位置。

  具体属性的效果代码如下:

  

  <TextBlock Text=" 默认阴影" Width="250" Height="30">            <TextBlock.Effect>                <DropShadowEffect/>            </TextBlock.Effect>        </TextBlock>        <TextBlock Text=" 带颜色的阴影" Width="250" Height="30">            <TextBlock.Effect>                <DropShadowEffect Color="LightBlue"></DropShadowEffect>            </TextBlock.Effect>        </TextBlock>        <TextBlock Text=" BlurRadius=15的模糊阴影" Width="250" Height="30">            <TextBlock.Effect>                <DropShadowEffect BlurRadius="15"></DropShadowEffect>            </TextBlock.Effect>        </TextBlock>        <TextBlock Text=" ShadowDepth=0的模糊阴影" Width="250" Height="30">            <TextBlock.Effect>                <DropShadowEffect ShadowDepth="0"></DropShadowEffect>            </TextBlock.Effect>        </TextBlock>        <TextBlock Text=" ShadowDepth=20的模糊阴影" Width="250" Height="30">            <TextBlock.Effect>                <DropShadowEffect ShadowDepth="20" BlurRadius="2" Color="LightBlue" Direction="315"></DropShadowEffect>            </TextBlock.Effect>        </TextBlock>

效果图如下图所示:

    

三、ShaderEffect类

  由于本人没有接触过高级着色语言,只为大家介绍一下ShaderEffect类的使用方法。

  ShaderEffect是一个抽象类,可继承该类创建自己的自定义像素着色器。可以实现更多的效果。

  直接上代码了:

  C#代码如下:

 public class CustomerEffect : ShaderEffect    {        public CustomerEffect()        {            Uri pixelShaderUri = new Uri("Effect.ps", UriKind.Relative);            PixelShader = new PixelShader();            PixelShader.UriSource = pixelShaderUri;        }    }

   现在可以在任意窗口中使用这个自定义的像素着色器了。  

Xaml页面的应用如下图所示:

引用名称空间:

<Window xmlns:local ="clr-namespace:CustomEffectText"....>

  创建自定义效果类的一个实例,并设置它原色的Effect属性。

<Image>    <Image.Effect>        <local:CustomEffect></local:CusetomEffect>    </Image.Effect></Image>    

  由于本人第一次写博客,有写的不好的地方还请大家留下宝贵意见。

  

Wpf效果