继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

8天入门wpf—— 第七天 画刷

慕勒551688
关注TA
已关注
手记 250
粉丝 39
获赞 133

     

         这一篇我们聊聊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 : Window2     {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:\Users\Administrator\Desktop\weibo\64512.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                        波音74720                     </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>

复制代码

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP