WPF Effect Clip以及Transform
在UIElement类的成员中可以找到BitmapEffect和Effect两个属性,这两个属性都用来为UI元素添加效果,MS的官方网站和一些开源网站上已经有很多效果类库可以使用。Effect由于GPU加速,所以性能较好,可以说是Effect代替了BitmapEffect,不过在WPF4.0中BitmapEffect仍然可以使用。
<Button Width="200" Height="100" Background="Red" Content="DropShadowEffect" FontSize="20" Canvas.Left="125" Canvas.Top="0"> <Button.Effect> <DropShadowEffect BlurRadius="30" Color="Green" Direction="-45" /> </Button.Effect> </Button> <Button Background="Red" Canvas.Left="356" Canvas.Top="0" Content="BlurEffect" FontSize="20" Height="100" Width="100"> <Button.BitmapEffect> <BevelBitmapEffect BevelWidth="5" EdgeProfile="CurvedIn" LightAngle="10" Relief="10" Smoothness="10"/> </Button.BitmapEffect>
</Button>
Effect的可选值如下:
BitmapEffect的可选属性如下:
WPF中Transform一词含义很广,位置、尺寸、坐标系比例、旋转角度等的变化都算变形。
WPF中的变形与UI元素是分开的,举个例子,可以设计一个“向左选作45度”的变形,然后把这个变形赋值给不同的UI元素的变形控制属性,这些UI元素就都向左旋转45度了。
控制变形的属性有两个,分别是:
RenderTransform:呈现变形,定义在UIElement类中。
LayoutTransform:布局变形,定义在FrameworkElement类中。
这两个属性都是依赖属性,他们的数据类型都是Transform抽象类,Transform类的派生类均可用来为这两个属性赋值。
<Image Source="1.jpg" Canvas.Left="125" Canvas.Top="30" Height="380" Name="image1" Stretch="Fill" Width="229" > <Image.BitmapEffect> <BlurBitmapEffect KernelType="Gaussian" Radius="5" /> </Image.BitmapEffect> <Image.RenderTransform> <TransformGroup> <RotateTransform CenterX="40" CenterY="40" Angle="45"/> <TranslateTransform X="200" Y="200"/> </TransformGroup> </Image.RenderTransform> </Image>
Transform类的派生类有如下一些:
- MatrixTransform:矩阵变形,把容纳被变形UI元素的矩阵点看做一个矩阵进行变形。
- RouteTransform:旋转变形,以给定的点位旋转中心,以角度为单位进行旋转。
- ScaleTransform:坐标系变形,调整被变形元素的坐标系,可以产生缩放效果。
- SkewTransform:拉伸变形,可以在横向和纵向上对变形元素进行拉伸。
- TranslateTransform:偏移变形,使被变形元素在横向或纵向上偏移一个给定的值。
- TransformGroup:变形组,可以把多个独立变形合成一个变形组、产生复合变形效果。
<TextBox Text="LayoutTransform" FontSize="30" > <TextBox.LayoutTransform> <RotateTransform Angle="-90"/> </TextBox.LayoutTransform> </TextBox>
在工作中经常会遇到制作不规则窗体或控件的需求,WPF在这方面做了很好的支持,仅需使用窗体或控件的Clip属性就可以轻松做到。
Clip属性被定义在UIElement中,一次WPF窗体和所有控件、图形都具有这个属性。Clip属性的数据类型是Geometry,与Path的Data属性一致。因此,我们只要按照需求只做好特殊形状的Path并把Path的Data属性赋值给窗体或控件的Clip属性,对目标的裁剪就完成了。
在XAML中定义一个Path,如下:
<Path Visibility="Hidden" x:Name="clipPath" Data="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200, 60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z"/>
赋值:
window1.Clip = clipPath.Data;
就OK了,注意对于窗体需要设置这两个属性:
AllowsTransparency="True" WindowStyle="None"
效果如下:
下面让这个窗体支持拖动,仅需要重写OnMouseLeftButtonDown,如下:
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) { base.OnMouseLeftButtonDown(e); //Point position = e.GetPosition(window1); if (e.LeftButton == MouseButtonState.Pressed) { this.DragMove(); } }
这样窗体就可以自由拖动了。