惠州市网站建设_网站建设公司_网站备案_seo优化

一、形状

1、Shape常见属性

 StrokeThickness:边框厚度
Stroke：边框颜色
Fill:内部填充
StrokeDashArray:实线与虚线的比例:
StrokeLineJoin:拐角轮廓
Stretch:确认如何填充可用区域

　　Fill:形状拉伸其宽度和高度，从而可以正好适应其容器(如果设置了明确的高度和宽度，该设置就不起作用了)

　　None:形状不被拉伸。除非使用Height和Width属性

　　Uniform:按比例改变形状的宽度和高度，直至形状到达容器边缘。如果为椭圆使用该值，最终将得到适应窗口的最大的圆。如果为矩形使用该值，将得到尽可能大的正方形

　　UniformFill:按比例改变形状的宽度和高度，直到形状填满了整个可用空间的高度和宽度。例如，如果在100X200单位大小的窗口中放置使用此尺寸设置的矩形，将得到200X200单位大小的矩形，并且矩形的一部分会被剪裁　　

2、矩形

 <Rectangle Width="300" Height="400" StrokeThickness="10" Stroke="Red" StrokeLineJoin="Round"RadiusX="40"RadiusY="20"><Rectangle.Fill><!--图片-->Blue</Rectangle.Fill></Rectangle>

 

3、椭圆

　　

 <Ellipse Stroke="Red" StrokeThickness="10"  Stretch="Uniform"></Ellipse>

 

4、线

 <Canvas><!--两点(X1,Y1),(X2,Y2) 一线,其坐标是相对于上一级的布局容器的坐标左负右正，上负下正StrokeStartLineCap:设置拐角属性，可设置圆角、三角形、正方形--><Line Canvas.Left="100"Canvas.Top="200"StrokeThickness="10" X1="0" Y1="0" X2="100" Y2="100"StrokeDashArray="3,1"StrokeStartLineCap="Round"><!--内部可以使用Stroke属性，添加画刷--><Line.Stroke><ImageBrush ImageSource="/123.png"></ImageBrush></Line.Stroke></Line></Canvas>

 

5、折线

    <Polyline Canvas.Left="200" Canvas.Top="400" Stroke="Red" StrokeThickness="20"Points="0 0,1 -100,-100 -20,-60 10"StrokeStartLineCap="Round"StrokeEndLineCap="Round"></Polyline>

 

6、多边形

        <Polygon Canvas.Left="90" Canvas.Top="150" Stroke="Red" StrokeThickness="20"Points="0 0,1 -100,-100 -20,-60 10"></Polygon>

 

二、画刷

　　画刷支持更改通知,因为它们继承自Freezable类。因此,如果改变了画刷,任何使用画刷的元素都会自动重新绘制自身。
　　画刷支持部分透明。为此,只需要修改Opacity属性,使背景能够透过前面的内容进行显示。
　　通过SystemBrushes类可以访问这样的画刷:此类画刷使用Windows系统设置为当前计算机定义的首选颜色。

SolidColorBrush：使用单一的连续颜色绘制区域

LinearGradientBrush：使用渐变填充绘制区域,渐变的阴影填充从一种颜色变化到另一颜色(并且,也可以在变化到第3种颜色之后再变化到第4种颜色,依此类推)

RadialGradientBrush：使用径向渐变填充绘制区域,除了是在圆形模式中从中心点向外部辐射渐变之外,这种画剧和线性渐变画剧类似

ImageBrush使用可被拉伸、缩放或平铺的图像绘制区域

DrawingBrush：使用Drawing对象绘制区域,该对象可以包含已经定义的形状和位图

VisualBrush：使用Visual对象绘制区域。因为所有WPF元素都继承自Visual类,所以可使用该画刷将部分用户界面(如按钮的表面)复制到另一个区域。当创建特殊效果时,比如部分反射效果,该画刷特别有用

BitmapCacheBrush：使用从Visual对象缓存的内容绘制区域。这种画剧和VisualBrush类似,但如果需要在多个地方重用图形内容或者频繁地重绘图形内容,这种画剧更高效

1.SolidColorBrush

 最简单的画刷类型是SolidColorBrush,这种画刷填充一种固定、连续的颜色。

        <Border><Border.Background><SolidColorBrush Color="Red" Opacity="0.3"></SolidColorBrush></Border.Background></Border>

 

画刷可以用于Foreground、Fill、Stroke等

<StackPanel>  <!--<Border><Border.Background><SolidColorBrush Color="Red" Opacity="0.3"></SolidColorBrush></Border.Background></Border>--><TextBlock Margin="20" Text="文章"><TextBlock.Foreground><SolidColorBrush Color="BlanchedAlmond" Opacity="0.3"></SolidColorBrush></TextBlock.Foreground></TextBlock><Rectangle Height="150" Width="300" StrokeThickness="10"><Rectangle.Fill><SolidColorBrush Color="Cornsilk" Opacity="0.4"></SolidColorBrush></Rectangle.Fill><Rectangle.Stroke><SolidColorBrush Color="PaleGreen" Opacity="0.9"></SolidColorBrush></Rectangle.Stroke></Rectangle>
</StackPanel>

 

2、LinearGradientBrush

当EndPoint不为1时，可使用SpreadMethod属性进行设置:

默认为Pad填充，Reflect为镜像翻转,Repeat为复制填充

  <Rectangle Width="600" Height="300"><Rectangle.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="0,0.5"SpreadMethod="Reflect"><!--SpreadMethod="Reflect":翻转--><GradientStop Color="Red" Offset="0"></GradientStop><GradientStop Color="Blue" Offset="0.5"></GradientStop><GradientStop Color="Green" Offset="1"></GradientStop></LinearGradientBrush></Rectangle.Fill></Rectangle>

 

3、RadialGradientBrush

  <Ellipse Height="400" Width="400"><Ellipse.Fill><RadialGradientBrushRadiusX="0.6"RadiusY="0.6"GradientOrigin="0.7 0.3"><!--默认0.5--><GradientStop Color="Red" Offset="0"></GradientStop><GradientStop Color="Blue" Offset="1"></GradientStop></RadialGradientBrush></Ellipse.Fill></Ellipse>

 

4、ImageBrush

　　使用位图填充区域，可通过ImageSource指定使用的图像

　　Viewbox描述希望从源图像上剪裁并使用的矩形部分。前两个数值指定矩形开始的左上角,而后两个数值指定矩形的宽度和高度。Viewbox属性使用的是相对坐标系统,这一坐标系统将图像的左上角指定为(0,0),将右下角指定为(1,1)。　

        <Rectangle Height="300" Width="400"><Rectangle.Fill><!--(0.3,0.2)从图像的0.3宽度，0.2高度进行裁剪，然后填充50宽度于60%高度--><ImageBrush ImageSource="/Image/mygo.jpg"Viewbox="0.3 0.2 0.5 0.6"></ImageBrush></Rectangle.Fill></Rectangle>

 

　　ViewporeUnits可以设置平铺图像是根据绝对尺寸还是相对尺寸进行设置

　　Viewport设置平铺起始坐标与图像大小，前两个值为坐标  后面则为大小

                <ImageBrush ImageSource="/Image/mygo.jpg"TileMode="Tile"ViewportUnits="RelativeToBoundingBox"Viewport="0 0 0.2 0.2"   ></ImageBrush></Rectangle.Fill>

其中titleMode可用于设置平铺图像的翻转方式:

Title:在可用区域复制图像

FlipX:复制图像，但是垂直翻转每个的第二列

FlipY:复制图像，但是水平翻转每个的第二行

FlipXY:复制图像，但是水平翻转每个的第二行,垂直翻转每个的第二列

 

5、VisualBrush

　　VisualBrush画刷不常用,使用这种画刷获取元素的可视化内容,并使用该内容填充任意表面。例如,可使用VisualBrush画刷将窗口中某个按钮的外观复制到同一窗口中的其他位置。然而,复制的按钮不能被单击,也不能通过任何方式与其进行交互。在此只是复制了元素的外观。

 <!--仅复制外观，行为动作不被复制--><Rectangle Height="250" Width="400"><Rectangle.Fill><VisualBrush Visual="{Binding ElementName=img}"></VisualBrush></Rectangle.Fill></Rectangle>

 

6、BitmapCacheBrush

 VisualBrush与BitmapCacheBrush区别:

　　1、VisualBrush可以平铺，但是BitmapCacheBrush不行

　　2、若图像透明度修改，VisualBrush跟随变化，而BitmapCacheBrush不必

　　3、BitmapCacheBrush可调节放大倍数　

  <Rectangle Height="100" Width="100"><Rectangle.Fill><VisualBrush TileMode="Tile" Viewport="0,0,0.5,0.5" Visual="{Binding ElementName=img}"></VisualBrush></Rectangle.Fill></Rectangle><!--VisualBrush类似，但是不能被平铺--><Rectangle Height="100" Width="100"><Rectangle.Fill><BitmapCacheBrush Target="{Binding ElementName=img}"></BitmapCacheBrush></Rectangle.Fill></Rectangle>

   <Rectangle Height="100" Width="100"><Rectangle.Fill><BitmapCacheBrush Target="{Binding ElementName=img}"><BitmapCacheBrush.BitmapCache><!--RenderAtScale该值指示应用于位图的缩放比例。--><BitmapCache RenderAtScale="10"></BitmapCache></BitmapCacheBrush.BitmapCache></BitmapCacheBrush></Rectangle.Fill></Rectangle>

 

7、RotateTransform旋转

 <Canvas><!--RenderTransform:渲染变换--><Rectangle Height="10" Width="80" Fill="Yellow" Stroke="Blue"Canvas.Left="100" Canvas.Top="100"/><Rectangle Height="10" Width="80" Fill="Yellow" Stroke="Blue"Canvas.Left="100" Canvas.Top="100"><Rectangle.RenderTransform><!--Angle：旋转角度CemterX/Y:中心点坐标，多使用相对坐标--><RotateTransform Angle="25" CenterX ="45" CenterY="5"/></Rectangle.RenderTransform></Rectangle><Rectangle Height="10" Width="80" Fill="Yellow" Stroke="Blue"Canvas.Left="100" Canvas.Top="100"><Rectangle.RenderTransform><RotateTransform Angle="50"/></Rectangle.RenderTransform></Rectangle><Rectangle Height="10" Width="80" Fill="Yellow" Stroke="Blue"
Canvas.Left="100" Canvas.Top="100"><Rectangle.RenderTransform><RotateTransform Angle="80"/></Rectangle.RenderTransform></Rectangle></Canvas>

 

8、ScaleTransform缩放

  <Rectangle Margin="50" Height="10" Width="80" Fill="Yellow" Stroke="Blue"Canvas.Left="100" Canvas.Top="100"><Rectangle.RenderTransform><!--ScaleX：水平方向放大，为负数时方向反向ScaleX：垂直方向放大，为负数时方向反向--><ScaleTransform  ScaleX="2" ScaleY="2" CenterX="0.3" CenterY="0.8"/></Rectangle.RenderTransform></Rectangle>

 

9、Opecity

　　Opacity属性使元素的所有内容都是部分透明的。OpacityMask属性执是供了更大的灵活性。可使元素的特定区域透明或部分透明,从而实现各种常见的的以及新颖的效果。例如,可使用　　　　　　　　OpacityMask属性将形状逐渐褪色到完全透明。

 <Button Canvas.Left="50" Canvas.Top="50" Height="30" Width="100" Content="AAAA"><Button.OpacityMask><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Offset="0" Color="Black"></GradientStop><GradientStop Offset="1" Color="Transparent"></GradientStop></LinearGradientBrush></Button.OpacityMask></Button>