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();
   }
}

这样窗体就可以自由拖动了。

 

posted @ 2012-12-05 20:46  DebugLZQ  阅读(5653)  评论(0编辑  收藏  举报