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"