WPF的基础知识

一个WPF应用程序从两个线程开始，分别负责用户界面（UI）的管理和渲染。托管代码为用户提供构建WPF所需要的各种功能，如布局和绑定等，通常用户界面管理线程使用该部分代码；非托管代码主要负责图形的叠加显示和渲染，那么使用该部分代码的是不能被用户接触的渲染线程，两个线程之间通过消息来传递数据。。

WPF的全称是Windows Presentation Foundation，意思是Windows描述语言。它的一个主要特性是设计人员和开发人员的工作很容易分开，设计人员的工作成果可以直接供开发人员使用。为此，必须理解XAML。WPF在建立应用程序时使用XAML。XAML表示可扩展的应用程序标记语言，Extensible Application Markup Lanuage。XAML是用于创建窗体的XML声明，它代表WPF应用程序的所有可视化部分和操作。虽然只可以编程利用WPF应用程序，但WPF是面向声明性编程的第一步，而声明性编程是编程业的趋势。声明性编程是指，不是利用编程语言，如C#、VB或Java，通过编程来创建对象，而是通过XML类型的编程来声明所有元素。

形状是WPF的核心元素。利用形状，可以绘制矩形、线条、椭圆、路径、多边形和折线等二维图形，这些图形用派生自抽象类Shape的类表示。下图描述了System.Windows.Shapes 名称空间中可用的图形：

Shape类	说明
Line	可以在坐标(X1,Y1)到(X2,Y2)之间绘制一条线
Rectangle	使用Rectangle类，通过指定Width和Hieght可以绘制一个矩形
Ellipse	使用Ellipse类，可以绘制一个椭圆
Path	使用Path类可以绘制一系列直线和曲线。Data属性是Geometry类型。还可以使用派生自基类Geometry的类绘制图形，或使用路径标记语法来定义图形。
Polygon	使用Polygon类可以绘制由线段连接而成的封闭图形。多边形由一系列赋予Points属性的Point对象定义
Polyline	类似于Polygon类，使用Polyline也可以绘制连接起来的线段。与多边形的区别是折线不一定是封闭图形。

下面的XAML代码示例绘制了一个黄色笑脸，它用一个椭圆表示笑脸，两个椭圆表示眼睛，两个椭圆表示眼睛中的瞳孔，一条路径表示嘴型：

<Window x:Class="ShapesDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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="mouth" Stroke="Blue" StrokeThickness="4" Data="M 40,74 Q 57,95 80,74"/>
                   
        </Canvas>
        
    </Grid>
</Window>

上述代码描述出的图形如下：

因为WPF基于矢量，所以可以重置每个元素的大小。基于矢量的图形现在可以缩放、旋转和倾斜。我们可以给Canvas元素的LayoutTransform属性添加ScaleTransform元素来让整个画布的内容在X和Y上放大2倍。

            <Canvas.LayoutTransform>
                <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
            </Canvas.LayoutTransform>

旋转与绽放的执行方式相同，使用RotateTransform元素，可以定义旋转的角度（Angel属性是角度）：

            <Canvas.LayoutTransform>
                <RotateTransform Angle="40"/>
            </Canvas.LayoutTransform>

对于倾斜，我们可以使用SkewTransform元素，此时可以指定X和Y方向的倾斜角度：

            <Canvas.LayoutTransform>
                <SkewTransform AngleX="20" AngleY="25"/>
            </Canvas.LayoutTransform>

为了同时执行旋转和倾斜操作，可以定义一个TransformGroup，它同时包含RotateTransform和SkewTransform，如下：

            <Canvas.LayoutTransform>
                <TransformGroup>
                    <RotateTransform Angle="40"/>
                    <SkewTransform AngleX="20" AngleY="25"/>
                </TransformGroup>               
            </Canvas.LayoutTransform>

我们也可以定义一个MatrixTransform，其中Matrix元素指定了用于拉伸的M11和M22属性，以及用于倾斜的M12和M21属性，如下：

            <Canvas.LayoutTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix M11="0.8" M22="1.6" M12="1.3" M21="0.4"/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>         
            </Canvas.LayoutTransform>

下面为上述几种变换的结果图：

对于平滑的颜色变化，可以使用LinearGradientBrush。这个画笔定义了StartPoint和EndPoint属性。使用这些属性可以为线性渐变指定二维坐标。默认的渐变方向是从(0,0)到(1,1)的对角线。定义其他值可以给渐变指定不同的方向。例如，StartPoint指定为(0,0)，EndPoint指定为(0,1)，就得到了一个垂直渐变；StartPoint不变，EndPoint值指定为(1,0)，就得到了一个水平渐变。通过该画笔的内容，可以用GradientStop元素定义指定偏移位置的颜色值。在各个偏移位置之间，颜色是平滑过渡的。

<Button Content="Solid Color" Margin="12,12,411,269" Width="80" Height="30">
            <Button.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="LightGreen"/>
                    <GradientStop Offset="0.9" Color="Green"/>
                    <GradientStop Offset="1" Color="DarkGreen"/>
                </LinearGradientBrush>
            </Button.Background>
        </Button>

使用RadialGradientBrush可以以放射方式产生平滑的颜色渐变，示例代码：

<Canvas Width="200" Margin="-1,135,304,21">
            <Path Canvas.Left="20" Canvas.Top="30" Stroke="Black">
                <Path.Fill>
                    <RadialGradientBrush GradientOrigin="0.2,0.2">
                        <GradientStop Offset="0" Color="LightBlue"/>
                        <GradientStop Offset="0.6" Color="Blue"/>
                        <GradientStop Offset="1.0" Color="DarkBlue"/>
                    </RadialGradientBrush>
                </Path.Fill>
                <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>
        </Canvas>

DrawingBrush可以定义用画笔绘制的图形，用画笔绘制的图形在GeometryDrawing元素中定义：

<Button Content="Drawing Brush" Margin="-1,56,374,195" Padding="10" Width="130" Height="60">
            <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>

要把图像加载到画笔中，可以使用ImageBrush元素。通过这个元素，显示ImageSource属性定义的图像。图像可以从文件系统中访问，或者在程序集的资源中访问。下面的示例是从文件系统中访问：

<Button Content="Image Brush" Width="100" Height="80" Margin="241,12,162,219" Foreground="White">
            <Button.Background>
                <ImageBrush ImageSource="D:\vs.2010\WindowsPresentationFoundation\Brush\Image\1.png" />
            </Button.Background>
        </Button>

从文件系统中访问图像有危险，假如这条路径不存在该图像文件，那么就会造成程序报错。

VisualBrush可以在画笔中使用其他WPF元素。如下代码为一个Button元素中包含一个矩形和另一个按钮：

<Button Content="Visual Brush" Width="100" Height="80" Margin="135,12,268,219">
            <Button.Background>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <StackPanel Background="White">
                            <Rectangle Width="25" Height="25" Fill="Blue"/>
                            <Button Content="Drawing Button" Background="Red" />
                        </StackPanel>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Button.Background>
        </Button>

我们可以给VisualBrush添加任意UIElement，还可以创建反射等有趣的结果。如下示例，在Button按钮里面利用VisualBrush添加一个MediaElement播放视频。并得到它的反射效果。

<Button Foreground="White" Margin="12,12,22,12">
            <StackPanel>
                <MediaElement x:Name="reflected" Source="D:\vs.2010\WindowsPresentationFoundation\Brush\Image\爱情惹的祸.mp4" Width="324" Height="122" />
                <Border Height="100" >
                    <Rectangle Height="125" Width="332">
                        <Rectangle.Fill>
                            <VisualBrush Opacity="0.35" Stretch="None" Visual="{Binding ElementName=reflected}">
                                <VisualBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                        <TranslateTransform Y="1"/>
                                    </TransformGroup>
                                </VisualBrush.RelativeTransform>
                            </VisualBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Border>
            </StackPanel>
        </Button>

这里面显示的按钮包含一个StackPanel，它包含一个播放视频的MediaElement和一个Border。Border边框包含一个VisualBrush填充的矩形。这支画笔定义了一个不透明值和一个变换。把Visual属性绑定到Border元素上。变换通过设置VisualBrush的RelativeTransform属性来完成。这个变换使用了相对坐标。把ScaleY设置为-1，完成Y方向上的反射。TranslateTransform在Y方向上移动变换。从而使反射效果位于原始对象的下面。

下图为显示结果：