WPF技术学习（一）
Windows Presentation Foundation(WPF)是为智能客户端应用程序创建UI的一个库。WPF的一个主要特性是设计人员和开发人员的工作很容易分开。Windows窗体类和WPF类很容易混淆。Windows窗体类位于System.Windows.Forms名称空间，而WPF类位于System.Windows名称空间及其子名称空间中，但不位于System.Windows.Forms名称空间。Windows窗体的Buttonl类的全称是System.Windows.Forms.Button,而用于WPF的Button类的全称是System.Windows.Controls.Button。
一、形状
形状是WPF的核心元素。下面示例演示形状的相关特性。
<Window x:Class="ShapeApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ShapeApp" mc:Ignorable="d" Title="MainWindow" Height="550" Width="600"> <!-- 在Path元素的代码隐藏属性Data中,把mouth设置为一个新的图形。为了设置路径,Path类 支持PathGeometry和路径标记语法。字母M定义了路径的起点,字母Q指定了二次贝塞尔曲线的 一个控制点和一个终点。 --> <Canvas> <Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Stroke="Blue" StrokeThickness="4" Fill="Yellow"/> <Ellipse Canvas.Left="30" Canvas.Top="12" Width="60" Height="30"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0.1" Color="DarkGreen"/> <GradientStop Offset="0.7" Color="Transparent"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Canvas.Left="30" Canvas.Top="35" Width="25" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White"/> <Ellipse Canvas.Left="40" Canvas.Top="43" Width="6" Height="5" Fill="Black"/> <Ellipse Canvas.Left="65" Canvas.Top="35" Width="25" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White"/> <Ellipse Canvas.Left="75" Canvas.Top="43" Width="6" Height="5" Fill="Black"/> <Path Name="mouth0" Stroke="Blue" StrokeThickness="4" Data="M 40,74 Q 57,95 80,74"/> <Ellipse Canvas.Left="210" Canvas.Top="10" Width="100" Height="100" Stroke="Blue" StrokeThickness="4" Fill="Yellow"/> <Ellipse Canvas.Left="230" Canvas.Top="12" Width="60" Height="30"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0.1" Color="DarkGreen"/> <GradientStop Offset="0.7" Color="Transparent"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Canvas.Left="230" Canvas.Top="35" Width="25" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White"/> <Ellipse Canvas.Left="240" Canvas.Top="43" Width="6" Height="5" Fill="Black"/> <Ellipse Canvas.Left="265" Canvas.Top="35" Width="25" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White"/> <Ellipse Canvas.Left="275" Canvas.Top="43" Width="6" Height="5" Fill="Black"/> <Path Name="mouth" Stroke="Blue" StrokeThickness="4" Data="M 40,92 Q 57,75 80,92" Canvas.Left="200"/> <!-- 其中一种形状Padl使用GeomeW来绘图。GeomeW元素也可用于其他地方,如用于DrawingBrush。 Geomeo元素非常类似于形状。与Line、Ellipse和Rectangle形状一样,也有绘制这些形状的 Geometry元素:LineGeometry、EllipseGeometry和RectagleGeometry 。形状与几何图形有显著的区 别。shape是一个FrameworkElement,可以用于把UIElement用作其子元素的任意类。 FrameworkElement派生自UIElement。形状会参与系统的布局,并呈现自身。而Geometry类不呈现 自身,特性和系统开销也比shpae类少。Geometry类派生自Freezable基类,可以在多个线程中共享。 Path类使用Geometry来绘图。几何图形可以用Path的Data属性设置。可以设置的简单的几何图 形元素有绘制椭圆的EllipseGeometry、绘制线条的LineGeometry和绘制矩形的RectangleGeometry。 如下面的示例所示,使用CombineGeometry 可以合并多个几何图形。 CombineGeometry有Geometry1和Geometry2属性,使用GeometryCombineMode可以合并它们, 构成Union、Intersect、Xor和Exclude。Union会合并两个几何图形,Intersect只取两个几何图形都 覆盖的区域,Xor与htersed相反,显示一个几何图形覆盖的区域,但不显示两个几何图形都覆盖 的区域。Exclude显示第一个几何图形减去第二个几何图形的区域。 下面的示例合并了一个EllipseGeometry和一个RectangleGeometry,生成并集。 --> <Path Canvas.Top="0" Canvas.Left="350" Fill="Blue" Stroke="Black"> <Path.Data> <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <EllipseGeometry Center="80,60" RadiusX="80" RadiusY="40"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <RectangleGeometry Rect="30,60 105 50"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> <!-- 也可以使用段来创建几何图形。几何图形类PathGeometry使用段来绘 图。下面的代码段使用BezierSegment和LineSegment元素来绘制一个红色 的图形和一个绿色的图形。第一个BezierSegment在图形的起点(70,40)、终点(150,63)、终点(90,37)和(130,46)之间绘制了一条贝 塞尔曲线。下面的LineSegment使用贝塞尔曲线的终点和(120,110)绘制了一条线段: --> <Path Canvas.Left="0" Canvas.Top="50" Fill="Red" Stroke="Blue" StrokeThickness="2.5"> <Path.Data> <GeometryGroup> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="120,90" IsClosed="True"> <PathFigure.Segments> <BezierSegment Point1="140,87" Point2="180,96" Point3="200,113"/> <LineSegment Point="170,160"/> <BezierSegment Point1="150,145" Point2="120,140" Point3="95,141"/> <LineSegment Point="120,90"/> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </GeometryGroup> </Path.Data> </Path> <Path Canvas.Left="0" Canvas.Top="50" Fill="Green" Stroke="Blue" StrokeThickness="2.5"> <Path.Data> <GeometryGroup> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="210,120"> <PathFigure.Segments> <BezierSegment Point1="225,135" Point2="250,149" Point3="265,150"/> <LineSegment Point="245,198"/> <BezierSegment Point1="224,200" Point2="192,190" Point3="179,165"/> <LineSegment Point="210,120"/> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </GeometryGroup> </Path.Data> </Path> <!-- 除了BezierSegment和LineSegment元素之外,还可以使用ArcSegment元素在两点之间绘制椭圆弧。 使用PolyLineSegment可以绘制一组线段,PolyBezierSegment由多条贝塞尔曲线组成,QuadraticBezierSegment创建一条 二次贝塞尔曲线,PolyQuadraticBezierSegment由多条二次贝塞尔曲线组成。 使用StreamGeometry可以进行高效的绘图。通过编程,可以利用StreamGeometryContext类的成员创建线段、贝塞尔曲线 和圆弧,以定义图形。通过XAML可以使用路径标记语法。路径标记语法可以与Path类的Data属性一起使用,来定义StreamGeometry。 特殊字符定义点的连接方式。在下面的示例中,M标记起点,L是到指定点的线条命令,Z是闭合图形的闭合命令。 路径标记语法允许使用更多的命令,如水平线(H) 、垂直线(V) 、三次贝塞尔曲线(C)、二次贝塞尔曲线(Q)、光滑的三次贝塞尔曲线(S)、 光滑的二次贝塞尔曲线(T) ,以及椭圆弧(A) : --> <Path Canvas.Left="100" Canvas.Top="250" Fill="Yellow" Stroke="Blue" StrokeThickness="2.5" Data="M 120,5 L 128,80 L 220,50 L 160,130 L 190,220 L 100,150 L 80,230 L 60,140 L 0,110 L 70,80 Z" StrokeLineJoin="Round"> </Path> </Canvas> </Window>
执行示例代码显示如下形状和几何图形：
如果要把上面整个画布放大两倍，可以给Canvas元素的LayoutTransform属性添加ScaleTransform元素，示例代码如下：
<Canvas> ... <Canvas.LayoutTransform> <ScaleTransform ScaleX="1.5" ScaleY="1.5"/> </Canvas.LayoutTransform> </Canvas>
旋转与缩放的执行方式相同。使用RotateTransform元素，可以定义旋转的角度，比如旋转30度，示例代码如下：
<Canvas> ... <Canvas.LayoutTransform> <RotateTransform Angle="30"/> </Canvas.LayoutTransform> </Canvas>
对于倾斜，可以使用SkeTransform元素。只要制定X和Y方向的倾斜角度即可，示例代码如下：
<Canvas> ... <Canvas.LayoutTransform> <SkewTransform AngleX="10" AngleY="20"/> </Canvas.LayoutTransform> </Canvas>
为了同时执行旋转和倾斜操作，可以定义一个TransformGroup,它同时包含RotateTransform和SkewTransform。也可以定义一个MatrixTransform，其中Matrix元素指定了拉伸的M11和M22属性，以及倾斜的M12和M21属性。
<Canvas> ... <Canvas.LayoutTransform> <MatrixTransform> <MatrixTransform.Matrix> <Matrix M11="0.8" M22="1.6" M12="1.2" M21="0.4"/> </MatrixTransform.Matrix> </MatrixTransform> </Canvas.LayoutTransform> </Canvas>
二、画笔
1、 设置背景色
<Window x:Class="BrushDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:BrushDemo" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Button x:Name="button" Content="Solid Color" Background="PapayaWhip" <!--全部区域用同一种颜色绘制--> HorizontalAlignment="Left" Margin="189,109,0,0" VerticalAlignment="Top" Width="192" Height="48"/> </Window>
2、LinearGradientBrush：对于平滑的颜色变化
<Window x:Class="BrushDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:BrushDemo" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Button x:Name="button" Content="Button" Background="PapayaWhip" HorizontalAlignment="Left" Height="48" Margin="170,15,0,0" VerticalAlignment="Top" Width="202"/> <Button x:Name="button1" Content="Linear Gradient Brush" Margin="170,75,145,188"> <Button.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="LightBlue"/> <GradientStop Offset="0.4" Color="Blue"/> <GradientStop Offset="1" Color="DarkBlue"/> </LinearGradientBrush> </Button.Background> </Button> </Grid> </Window>
3、RadialGradientBrush可以以放射方式产生平滑的颜色渐变。
4、DrawingBrush可以定义用画笔绘制的图形在GeometryDrawing元素中定义。
<Window x:Class="BrushDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:BrushDemo" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Button Content="Drawing Brush" Margin="10" Padding="10"> <Button.Background> <DrawingBrush> <DrawingBrush.Drawing> <GeometryDrawing Brush="Red"> <GeometryDrawing.Pen> <Pen> <Pen.Brush> <SolidColorBrush>Blue</SolidColorBrush> </Pen.Brush> </Pen> </GeometryDrawing.Pen> <GeometryDrawing.Geometry> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="70,40"> <PathFigure.Segments> <BezierSegment Point1="90,37" Point2="130,46" Point3="150,63"/> <LineSegment Point="120,110"/> <BezierSegment Point1="100,95" Point2="70,90" Point3="45,91"/> <LineSegment Point="70,40"/> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Button.Background> </Button> </Window>
5、ImageBrush元素可以把图像加载到画笔中。通过这个元素，显示ImageSource属性定义的图像。图像可以从文件系统中访问，或者在程序集的资源中访问。
<Button Content="Image Brush" Width="100" Height="80" Margin="5" Foreground="White"> <Button.Background> <ImageBrush ImageSource="/BrushesDemo;component/Budapest.jpg"/> </Button.Background> </Button>
