WPF設計の畫刷（Brush）
阿新 • • 發佈：2018-11-11
start mar present tst and flip nfx ron pac 原文:WPF設計の畫刷（Brush）
一、什麽是畫刷
畫刷是是一種渲染方式，用於填充圖形形狀，如矩形、橢圓、扇形、多邊形和封閉路徑。在GDI+中，畫刷分為以下幾種：SolidBrush，TextureBrush，HatchBrush，LinearGradientBrush和PathGradientBrush。在層次關系上，它們都位於System.Drawing空間下，繼承自System.Drawing.Brush類。
畫刷主要分為三大類：
1、SolidBrush（實心畫刷）我們最常用
實心畫刷是我們用的最多的，也是最簡單的一個，其實也就是填充色的意思，一個很簡單的例子：
其實這裏的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 }2、GradientBrush(梯度畫刷、漸變畫刷)
a、線性漸進畫刷
<Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Canvas> <Rectangle Canvas.Left="51" Canvas.Top="187" Height="101" Name="rectangle2" Stroke="Black" Width="325"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="Yellow" Offset="0.5"/> <GradientStop Color="Green" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas> </Window>
得到的效果：
b、圓形梯度畫刷
<Ellipse x:Name="ellipseWithRadialGradientBrush" Height="113.56" Stroke="#FF000000"> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="#FFA21212" Offset="1"/> <GradientStop Color="#FFF8C906" Offset="0"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse>
效果：
中心偏移：
<Ellipse x:Name="ellipseWithRadialGradientBrushCenterOffset" Stroke="#FF000000"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.399,0.149"> <GradientStop Color="#FFA21212" Offset="1"/> <GradientStop Color="#FFF8C906" Offset="0"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse>
3、ImageBrush（圖像畫刷）
顧名思義，就是把圖像轉換為畫刷的方式渲染。
<Window x:Class="WpfApplication7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:my="clr-namespace:WpfApplication1" Title="MainWindow" Height="400" Width="600"> <Grid> <Grid.Background> <ImageBrush x:Name="landBrush" ImageSource="C:\Users\john\Desktop\test.gif"/> </Grid.Background> </Grid> </Window>
4、VisualBrush（控件畫刷）
這個我們可以用來做水印。
首先作為windows資源引入：
<Window.Resources>
<VisualBrush x:Key="test" TileMode="Tile" Opacity="0.8">
<VisualBrush.Visual>
<StackPanel>
<TextBlock Foreground="Gold">
昨夜星辰昨夜風
</TextBlock>
<TextBlock Foreground="LightBlue">
畫樓西畔桂堂東
</TextBlock>
<TextBlock Foreground="LightGray">
身無彩鳳雙飛翼
</TextBlock>
<TextBlock Foreground="Pink">
心有靈犀一點通
</TextBlock>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
5、DrawingBrush（自定義畫刷）
<Window x:Class="WpfApplication4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <DrawingBrush x:Key="test"> <DrawingBrush.Drawing> <DrawingGroup> <DrawingGroup.Children> <GeometryDrawing> <!-- 繪制矩形 --> <GeometryDrawing.Geometry> <RectangleGeometry RadiusX="0.2" RadiusY="0.5" Rect="0.02,0.02,0.96,0.96" /> </GeometryDrawing.Geometry> <!-- 矩形填充色 --> <GeometryDrawing.Brush> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Green" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </LinearGradientBrush> </GeometryDrawing.Brush> <!-- 矩形邊框 --> <GeometryDrawing.Pen> <Pen Thickness="0.02"> <Pen.Brush> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="AliceBlue" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush> </Pen.Brush> </Pen> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingGroup.Children> </DrawingGroup> </DrawingBrush.Drawing> </DrawingBrush> </Window.Resources> <Grid> <Button Background="{StaticResource ResourceKey=test}" FontSize="40" Content="Button" Height="113" HorizontalAlignment="Left" Margin="89,80,0,0" Name="button1" VerticalAlignment="Top" Width="292" /> </Grid> </Window>
6、常見效果舉例：
a、頭像：
<Grid>
<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Width="113" Height="113">
<Ellipse.Fill>
<ImageBrush ImageSource="Resources/wx_camera_1504279469046.jpg"/>
</Ellipse.Fill>
</Ellipse>
</Grid>
效果：
b、對稱：
XAML代碼： <Ellipse x:Name="ellipseWithDrawingBrush" Stroke="#FF000000" Width="113" Height="113"> <Ellipse.Fill> <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile"> <DrawingBrush.Drawing> <GeometryDrawing Brush="Red"> <GeometryDrawing.Geometry> <GeometryGroup> <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" /> <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" /> </GeometryGroup> </GeometryDrawing.Geometry> <GeometryDrawing.Pen> <Pen Thickness="10"> <Pen.Brush> <LinearGradientBrush> <GradientStop Offset="0.0" Color="Black" /> <GradientStop Offset="1.0" Color="Gray" /> </LinearGradientBrush> </Pen.Brush> </Pen> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Ellipse.Fill> </Ellipse>
註意ImageBrush中屬性的設置和不同的效果
TileMode="FlipX"
AlignmentX="Left"
AlignmentY="Top"
Viewport="0,0,0.3,0.3"
WPF設計の畫刷（Brush）