WPF学习笔记一 熟悉XAML

    <Canvas Width="325" Height="311">
       
        <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Stroke="Blue" StrokeThickness="4" Fill="Yellow"></Ellipse>
        <Ellipse Canvas.Left="60" Canvas.Top="65" Width="25" Height="25" Stroke="Black" StrokeThickness="3" Fill="White"></Ellipse>
        <Ellipse Canvas.Left="65" Canvas.Top="75" Width="5" Height="5" Stroke="Black" StrokeThickness="5" Fill="Black"></Ellipse>
        <Path Name="mouth" Stroke="Black" StrokeThickness="4" Data="M 62,125 Q 95,122 102,108" ></Path>
        <Line X1="124" X2="132" Y1="144" Y2="166" Stroke="Black" StrokeThickness="4"></Line>
        <Line X1="132" X2="115" Y1="166" Y2="166" Stroke="Black" StrokeThickness="4"></Line>
        <Line X1="80" Y1="144" X2="70" Y2="163" Stroke="Black" StrokeThickness="4"></Line>
        <Line X1="70" Y1="163" X2="55" Y2="146" Stroke="Black" StrokeThickness="4"></Line>
        <Rectangle Canvas.Left="200" Canvas.Top="50" Fill="Yellow"  Width="100" Height="120" Stroke="Black" StrokeThickness="3"></Rectangle>
        <Rectangle Canvas.Left="228" Canvas.Top="100" Fill="White"  Width="40" Height="40" Stroke="Black" StrokeThickness="3"></Rectangle>
        <Line X1="240" Y1="51" X2="202" Y2="100" StrokeThickness="4" Stroke="Black"></Line>
        <Line X1="261" Y1="51" X2="299" Y2="100" StrokeThickness="4" Stroke="Black"></Line>

    </Canvas>

Shape类
说明
Line
可以再坐标X1，Y1到X2，Y2之间绘制一条线
Rectangle
使用Rectangle类，可以指定With和Height，绘制一个矩形
Ellipse
使用Ellipse类 可以绘制一个椭圆
Path
可以绘制一系列的直线和曲线 Data属性是GeoMetry类型，还可使使用派生自基类Geomerty的类绘制图形，或使用路径标记语法来定义图片
Polygon
使用Polygon类可以绘制由线段连接而成的封闭图形，多边形一系列赋予Points属性的Point对象定义
PolyLine
类似Polygon类，使用PolyLine也可以绘制连接起来的线段，与多边形的区别是多义线不一定是封闭图形s

Stroke="Black" StrokeThickness="4"  为常用属性
Canvas  变换：

1. 整体放大2倍

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

2.旋转

<Canvas.LayoutTransform> 

<RotateTransform AngleY='25'></RotateTransform>

</Canvas.LayoutTransform>

3.X和Y方向的倾斜

<Canvas.LayoutTransform>

<SkewTransform AngleX="25" AngleY="10"></SkewTransform>

</Canvas.LayoutTransform>

笔刷

LinearGradientBrush   做一个颜色渐变的按钮

<Button Width="63" Height="34">
            <Button.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1.2">
                    <GradientStop Color="Red" Offset="0"></GradientStop>
                    <GradientStop Color="Blue" Offset="0.2"></GradientStop>
                    <GradientStop Color="BlanchedAlmond" Offset="0.7"></GradientStop>
                    <GradientStop Color="DarkBlue" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Button.Background>
</Button>

RadialGradientBrush  做一个颜色放射的按钮

<Button Width="58" Height="34" Canvas.Left="5" Canvas.Top="101">
           <Button.Background>
                <RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0"></GradientStop>
                    <GradientStop Color="LightBlue" Offset="0.4"></GradientStop>
                    <GradientStop Color="DarkBlue" Offset="1"></GradientStop>
                </RadialGradientBrush>
            </Button.Background>
 </Button>

DrawingBrush    定义用笔刷绘制的图形

        </Button>
        <Button Width="58" Height="34" Canvas.Left="5" Canvas.Top="179">
            <Button.Background>
                <DrawingBrush>
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="LightBlue">
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <EllipseGeometry RadiusX="30" RadiusY="30" Center="20,20"></EllipseGeometry>
                                    <EllipseGeometry RadiusX="30" RadiusY="30" Center="20,20"></EllipseGeometry>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen>
                                    <Pen.Brush>Red</Pen.Brush>
                                </Pen>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Button.Background>
        </Button>

ImageBrush   将图像加载到笔刷中

  <Button Width="60" Height="50" Canvas.Left="5" Canvas.Top="232">
            <Button.Background>
                <ImageBrush ImageSource="C:\Users\董斌\Desktop\123.jpg">
                    
                </ImageBrush>
            </Button.Background>
        </Button>

VisualBrush  在笔刷中放入其他的WPF元素

 <Button Width="60" Height="50" Canvas.Left="149" Canvas.Top="207">
            <Button.Background>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <StackPanel Background="White">
                            <Rectangle Width="25" Height="25" Fill="LightCoral" Margin="2"></Rectangle>
                            <Ellipse Width="65" Height="20" Fill="Aqua"></Ellipse>
                            <Button Margin="2">Click Me </Button>
                        </StackPanel>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Button.Background>
        </Button>