再复杂的图形都是各种简单图形的组合,尤其是通过路径Path强大的功能,可组成相当复杂的图形;
一般都是在Blend里完成再拷贝到vs里
Line:直线段
Rectangle:矩形
Ellipse:椭圆
Polygon:多边形,由多段直线段围成的闭全区域
Polyline:折线(不闭合),由多条首尾相接的直线段组成
Path:路径(闭合区域),最强大的一个,可由若干直线,圆弧,贝赛尔曲线组成
常见属性:
Stroke 边线 Fill填充
Fill属性是Brush(刷),
常有:SolidColorBrush实心画刷
LinearGradientBrush线性向渐变画刷
RadialGradientBrush 径向渐变画刷
ImageBrush 使用图片作为填充
DrawingBrush使用矢量图和位图填充内容
VisualBrush 形象填充,如拖动控件时的框框
控件的变形是与UI元素分离的,方便附加
RenderTransform是呈现变形:只是展现时才变形,真实不会影响到布局,常用到动画
LayoutTransform是布局变形:用于静态的变形,耗性能
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="234,107,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="39.506"/>
<TranslateTransform/>
</TransformGroup>
</Button.RenderTransform>
</Button>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="234,107,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
<Button.LayoutTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="39.506"/>
<TranslateTransform/>
</TransformGroup>
</Button.LayoutTransform>
</Button>
这一篇我们聊聊wpf中的画刷,在wpf中如果想玩各种花哨,那么如何使用画刷则是我们的基本功,首先看一下类图
从图中可以看出,wpf有5种画刷和1种自定义画刷,都是继承自基类Brush,我们看看基类中有哪些好玩的东西。
这里有3个比较感兴趣的属性,分别属于”透明度“和”图像转换“,好,下面我们一一解说。
一:SolidColorBrush(实心画刷)
实心画刷是我们用的最多的,也是最简单的一个,其实也就是填充色的意思,一个很简单的例子:
其实这里的Background=Red使用的就是SolidColorBrush,xaml进行解析时,发现Background是Brush类型,刚才我也说了
Brush具有图形转换的能力,最后xaml就会通过Transform把”Red"字符串解析成SolidColorBrush,更直观一点的话,我们可以
用C#代码来描述。
1 public partial class MainWindow : Window 2 { 3 public MainWindow() 4 { 5 InitializeComponent(); 6 7 button1.Background = new SolidColorBrush(Colors.Red); 8 } 9 }
二:GradientBrush(梯度画刷)
如果我们使用过ps或者freehand,我们肯定知道在填充色方面有一个叫做“渐变色”的概念,我们使用的最多的渐变色要么是“线性”的,
要么是“圆形”的,刚好这里对应wpf中的“LinearGradientBrush”和“RadialGradientBrush”。
1: LinearGradientBrush(线性梯度画刷)
线性画刷也是比较简单的,一般情况下我们只要设定一个“StartPoint”和“EndPoint”即可。
1 <Window x:Class="WpfApplication2.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350" Width="525"> 5 <Canvas> 6 <Rectangle Canvas.Left="51" Canvas.Top="187" Height="101" Name="rectangle2" Stroke="Black" Width="325"> 7 <Rectangle.Fill> 8 <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 9 <GradientStop Color="Yellow" Offset="0.5"/> 10 <GradientStop Color="Green" Offset="1"/> 11 </LinearGradientBrush> 12 </Rectangle.Fill> 13 </Rectangle> 14 </Canvas> 15 </Window>
这里要注意的就是,我设定的坐标是(0,0),(0,1),我们知道两点一条直线,这条直线与X轴平行,我们可以看到颜色的分布是垂直于Y轴的,
如果说我们把坐标改为(0,0)(1,1),那么颜色分割线还是与(0,0),(1,1)这条斜线垂直吗?最后发现,严格垂直。
2:RadialgradientBrush(圆形梯度画刷)
在ps中我们玩”圆形渐变“的时候,只需要设定圆心坐标和X坐标和Y坐标的值就可以画一个圆形渐变,在wpf中同样需要这三个元素,
分别对应设Center,RadiusX,RadiusY,当然在wpf中还存在一个“梯度原点“:GradientOrigin。
1 <Window x:Class="WpfApplication3.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350" Width="525"> 5 <Grid> 6 <Rectangle Height="200" HorizontalAlignment="Left" Margin="128,45,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="200"> 7 <Rectangle.Fill> 8 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 9 <RadialGradientBrush.GradientStops> 10 <GradientStop Color="Yellow" Offset="0"/> 11 <GradientStop Color="Red" Offset="0.25"/> 12 <GradientStop Color="Blue" Offset="0.75"/> 13 <GradientStop Color="LimeGreen" Offset="1"/> 14 </RadialGradientBrush.GradientStops> 15 </RadialGradientBrush> 16 </Rectangle.Fill> 17 </Rectangle> 18 </Grid> 19 </Window>
三:ImageBrush(图像画刷)
这种画刷也是很有意思的,有时我们在炫时需要用图片做装饰,那么此时ImageBrush就可以祝你一臂之力。
1 <Window x:Class="WpfApplication7.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:my="clr-namespace:WpfApplication7" 5 Title="MainWindow" Height="350" Width="525"> 6 <Grid> 7 <Grid.Background> 8 <ImageBrush x:Name="landBrush" ImageSource="C:UsersAdministratorDesktopweibo64512.gif"/> 9 </Grid.Background> 10 </Grid> 11 </Window>
四:VisualBrush(控件画刷)
这种画刷是作用在控件级别上的,也就是说任何控件都可以作为画刷,很神奇的说。
1 <Window x:Class="WpfApplication1.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350" Width="525"> 5 <Window.Resources> 6 <VisualBrush x:Key="test" TileMode="Tile" Opacity="0.8"> 7 <VisualBrush.Visual> 8 <StackPanel> 9 <TextBlock Foreground="Gold"> 10 唧唧复唧唧 11 </TextBlock> 12 <TextBlock Foreground="LightBlue"> 13 木兰开飞机 14 </TextBlock> 15 <TextBlock Foreground="LightGray"> 16 开的什么机 17 </TextBlock> 18 <TextBlock Foreground="Pink"> 19 波音747 20 </TextBlock> 21 </StackPanel> 22 </VisualBrush.Visual> 23 </VisualBrush> 24 </Window.Resources> 25 <Grid> 26 <Button Content="我是超大按钮" Height="213" HorizontalAlignment="Left" Margin="32,34,0,0" Name="button1" 27 VerticalAlignment="Top" Width="414" Background="{StaticResource ResourceKey=test}"/> 28 </Grid> 29 </Window>
五:DrawingBrush(自定义画刷)
最灵活,最复杂的也就是这种自定义画刷,毕竟wpf不能给我们满足所有的要求,就必须留一道口子给我们程序员自定义实现。
1 <Window x:Class="WpfApplication4.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350" Width="525"> 5 <Window.Resources> 6 <DrawingBrush x:Key="test"> 7 <DrawingBrush.Drawing> 8 <DrawingGroup> 9 <DrawingGroup.Children> 10 <GeometryDrawing> 11 <!-- 绘制矩形 --> 12 <GeometryDrawing.Geometry> 13 <RectangleGeometry RadiusX="0.2" RadiusY="0.5" 14 Rect="0.02,0.02,0.96,0.96" /> 15 </GeometryDrawing.Geometry> 16 <!-- 矩形填充色 --> 17 <GeometryDrawing.Brush> 18 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 19 <GradientStop Color="Green" Offset="0" /> 20 <GradientStop Color="Red" Offset="1" /> 21 </LinearGradientBrush> 22 </GeometryDrawing.Brush> 23 <!-- 矩形边框 --> 24 <GeometryDrawing.Pen> 25 <Pen Thickness="0.02"> 26 <Pen.Brush> 27 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 28 <GradientStop Color="AliceBlue" Offset="0" /> 29 <GradientStop Color="Black" Offset="1" /> 30 </LinearGradientBrush> 31 </Pen.Brush> 32 </Pen> 33 </GeometryDrawing.Pen> 34 </GeometryDrawing> 35 </DrawingGroup.Children> 36 </DrawingGroup> 37 </DrawingBrush.Drawing> 38 </DrawingBrush> 39 </Window.Resources> 40 <Grid> 41 <Button Background="{StaticResource ResourceKey=test}" FontSize="40" Content="Button" Height="113" HorizontalAlignment="Left" Margin="89,80,0,0" Name="button1" VerticalAlignment="Top" Width="292" /> 42 </Grid> 43 </Window>