首页 > 编程技术 > csharp

WPF基础教程之形状画刷与变换详解

发布时间:2020-6-25 11:15

形状

在WPF中形状继承自FrameworkElement类。因此,形状是元素,有如下好处。

Shape类子类

矩形和椭圆

需要设置Height和Width属性,设置Fill或Stroke属性,如未设置Fill或Stroke属性,形状不会显示。

<StackPanel>
 <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left"></Ellipse>
 <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Rectangle>
 </StackPanel>

设置带有带有拐角的椭圆 RadiusX RadiusY值。

放置图形的理想容器是Canvas,改容器要求使用left、top、right或bottom附加属性,为每个图形指定坐标。这样可以完全控制形状是如何相互重叠的


使用viewbox控件缩放形状

使用Canvas控件唯一的限制是不能改变自身的尺寸以适应更大或更小的窗口。如果希望联合Canvas控件的精准控制功能和方便的改变尺寸功能,可使用Viewbox元素。

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="auto"></RowDefinition>
  <RowDefinition Height="*"></RowDefinition>
 </Grid.RowDefinitions>
 <TextBlock>The first row of the Grid</TextBlock>
 <Viewbox Grid.Row="1" HorizontalAlignment="Left">
  <Canvas Width="200" Height="150">
  <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left" Canvas.Left="10" Canvas.Top="50"></Ellipse>
  <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left" Canvas.Left="30" Canvas.Top="40"></Rectangle>
  </Canvas>
 </Viewbox>
 </Grid>

直线

<Line Stroke="Blue" X1="0" Y1="10" X2="10" Y2="100"></Line>

折线

<Polyline Stroke="Blue" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 90,170 110,120 170,190,190,100 210,240"></Polyline>

多边形

<Polygon Stroke="Blue" StrokeThickness="1" Fill="Yellow" Canvas.Left="10" Canvas.Top="10" FillRule="EvenOdd" Points="15,200 68,70 110,200 0,125 135,125"></Polygon>

FillRule填充规则:如果设置为EvenOdd:WPF计算为了到达图形的外部必须穿过的直线数量。如果是奇数,就填充区域;如果是偶数就不填充改区域。

如果属性设置为Nonzero填充规则,WPF计算为了到达图形的外部经过的正反向和反方向的直线数量差。如果等于0就不填充该区域,如果等于等于0就填充。

点划线(虚线)

<Polyline Stroke="Blue" StrokeThickness="14" StrokeDashArray="1 2" Points="10,30 60,0 90,40 120,10 350,10"></Polyline>

StrokeDashArray="1 2" 是相对于直线宽度的,这里就是14 意思是14个单位的实线,28个单位的空白。

画刷

画刷填充区域,不干是元素的背景色、前景色以及边框,还是形状内部填充和笔画。

常用画刷

名称
说明
SolidColorBrush 使用单一的连续颜色绘制区域。
LinearGradientBrush 使用渐变填充绘制区域,渐变的阴影填充从一种颜色变化到另一种颜色(并且,也可以在变化到第3种颜色之后变化到第4种。)
RadialGradientBrush 使用径向渐变填充绘制区域,除了在圆形模式中从中心点向外部辐射渐变之外,这种画刷和渐变画刷类似。
ImageBrush 使用可被拉伸、缩放或平铺的图像绘制区域。
DrawingBrush 使用Drawing对象绘制区域,改对象可包含已经定义的形状或位图。
VisualBrush
使用Visual对象绘制区域。因为WPF的元素都继承自Visual类,所以可使用该画刷将部分用户界面复制到另一个局域。当创建特殊效果时,
改画刷特别有用。
BitmapCacheBrush 使用从Visual对象缓存的内容绘制区域。这种画刷和VisualBrush类似,但如果需要在多个地方重用图形内容或者频繁地重绘图形内容,这种画刷更高效。

LinearGradientBrush

<Rectangle Width="150" Height="100">
  <Rectangle.Fill>
  <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
   <GradientStop Color="Yellow" Offset="0.0"/>
   <GradientStop Color="Red" Offset="0.25"/>
   <GradientStop Color="Blue" Offset="0.75"/>
   <GradientStop Color="LimeGreen" Offset="1.0"/>
  </LinearGradientBrush>
  </Rectangle.Fill>  
 </Rectangle>


StartPoint 0,0 代表左上角,EndPonit 1,1 代表右下角 表示从左上角到右下角的方向渐变,同理如果是0,0 到0,0,1表示从上到下的垂直填充

Offset取值从0到1。表示颜色表示一种颜色渐变到另一种颜色的速度。

RadialGradientBrush

<Ellipse Margin="5" Stroke="Black" StrokeThickness="1" Width="200" Height="200">
  <Ellipse.Fill>
  <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
   <GradientStop Color="White" Offset="0"/>
   <GradientStop Color="Blue" Offset="1"/>
  </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>


GradientOrigin指定第一种颜色渐变的开始点,默然是(0.5,0.5)改点表示填充区域的中心。

RadiusX RadiusY决定了圆的尺寸,默认值为0.5.

变换

变换是通过不加通告地切换图形或元素使用的坐标系统来改变形状或元素的绘制方式的对象。变换主要类

名称
说明
重要属性
TranslateTranform 将坐标系统移动一定的距离。如果希望在不同的地方绘制相同的形状,改变换非常有用 X、Y
RotateTranform 旋转坐标系统。正常绘制的形状绕着旋转的中心点旋转。 Angle、CenterX、CenterY
ScaleTranform 放大或缩小坐标系统,从而绘制更大或更小的图形。可在X和Y方向应用不同的缩放度,从而拉伸或缩放形状
ScaleX、ScaleY
CenterX、CenterY
SkewTranform 通过倾斜一定的角度扭曲坐标系统。例如绘制正方形,通过该变换正方形变成平行四边形。 AngleX、AngelY、CenterX、CenterY
MatrixTranform 使用提供的矩阵的乘积修改坐标系统。这是最复杂的选择。 Matrix
TransformGroup 组合多个变换,从而可以一次应用所有这些变换。应用变换的顺序是很重要的,因为这会影响最终的结果。例如,首先使用RotateTranform选择图形,然后使用TranslateTranform移动图形,这样做的结果和先移动再旋转的结果是不同的。  

应用场景

<Canvas>
 <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>
  <RotateTransform Angle="25"></RotateTransform>
  </Rectangle.RenderTransform>
 </Rectangle>
 </Canvas>

通过RenderTransform制定图形的变换方式,RenderTransformOrigin="0.5,0.5",以图形的中心点旋转,以左上角为准旋转。这两个属性不限制于形状,WPF的所有元素都可以用这两个属性。

<Button Canvas.Left="100" Canvas.Top="100" Width="101" Height="30" Content="testTransform">
  <Button.RenderTransform>
  <RotateTransform Angle="25"></RotateTransform>
  </Button.RenderTransform>
  <Button.Background>
  <SolidColorBrush Color="#FF7DBFFC"></SolidColorBrush>
  </Button.Background>
 </Button>

透明

WPF实现元素透明的方式

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对猪先飞的支持。

标签:[!--infotagslink--]

您可能感兴趣的文章: