WPF - 使用DrawingBrush繪製色彩相間的地板/棋盤格－夢多了，就會是現實

這邊要來講解如何使用DrawingBrush來畫出棋盤格/地板

今天預計的成果要達到這樣↓↓↓

學會了之後就可以做點小小修改，再搭配3D的渲染，就可以畫出地板的模樣，看起來是不是還不錯呢?

如果你也想要做出上面那張圖的效果，可能就讓您小失望啦~!這篇並不會說到如何使用3D來作畫...

接下來開始進入正文囉~!!

Drawing Brush

在WPF裡面我們可以使用Drawing 物件來畫出2-D的圖片、圖示、文字、甚至是影像，這裡的Drawing可以把他想成 [畫圖] 的動作；在此之前，我們需要使用畫筆(Drawing Brush)，也就是DrawingBrush物件來畫出我們想要的東西，如平面、棋盤格、貼圖等等...，還有更多更多...例如 : DrawingGroup、GeometryDrawing、GlyPhRunDrawing、ImageDrawing和VideoDrawing等等都繼承Drawing的類別，也就代表說我們可以使用DrawingBrush來建立出各種不同的效果!!

建立畫筆

在XAML裡面我們使用DrawingBrush來建立畫筆，下面簡單描述出建立畫筆的方法，畫筆屬性必須要有一個Drawing屬性，也可以是任何繼承於Drawing的屬性

<DrawingBrush >
    <DrawingBrush.Drawing />
</DrawingBrush>

接著我們就來實際弄弄看!!

使用畫刷來替任意的圖形做上色，只要將這個圖形的Fill Property設定相對應的畫刷就可以了

以下示範如何將一個矩形透過畫筆來上色

    <Grid>
        <Rectangle Width="200" Height="200" Stroke="Black" StrokeThickness="3" >
            <Rectangle.Fill>
                <DrawingBrush >
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="Yellow">
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <RectangleGeometry Rect="50,25,25,25"/>
                                    <RectangleGeometry Rect="25,50,25,25"/>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Thickness="5">
                                    <Pen.Brush>
                                        <LinearGradientBrush>
                                            <GradientStop Offset="0.0" Color="Blue"/>
                                            <GradientStop Offset="2.0" Color="Black"/>
                                        </LinearGradientBrush>
                                    </Pen.Brush>
                                </Pen>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

畫出來的結果會像下面這樣

上面用RectangleGeometry畫出矩形；那我們要怎麼讓他重複呢?只要在第4行加入ViewPort、並且設定TitleMode就可以啦，把第4行它改成這樣

<DrawingBrush Viewport="0,0,0.5,0.5" TileMode ="Tile">

這裡使用視角屬性決定磚塊的大小跟位置，前提是需要將DrawingBrush內的屬性TileMode設定為非'None'，並且透過ViewportUnits屬性來決定ViewPort是絕對或相對座標，相對座標指的是跟輸出的面積成比例，(0,0)代表輸出面積的左上角，而(1,1)代表右下角。要將ViewPoart設為absolute的話，則將ViewPortUnits設為Absolute，修改後的效果如下

最後來示範如何同時間畫出兩種不同的顏色吧!!，原理跟上面的程式碼很像，只是有一個trickly的地方在於我們同時畫出兩種不同大小的矩形，其中一個比較大，包覆著兩個比較小的矩形，就可以達成棋盤格、地板的效果囉!!!!

   
 <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="34*"/>
            <ColumnDefinition Width="225*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.ColumnSpan="2" Margin="0,0,0.4,-0.2">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Brush="#FFA6A3D1">
                                <GeometryDrawing.Geometry> <!--畫出一個大矩形  (淺藍色)-->
                                    <RectangleGeometry Rect="0,0,1,1"></RectangleGeometry>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="#FF5761B2">
                                <GeometryDrawing.Geometry>
                                    <GeometryGroup> <!--畫出兩個小矩形 (深藍色)--> 
                                        <RectangleGeometry Rect="0,0,0.50,0.50" />
                                        <RectangleGeometry Rect="0.50,0.50,0.50,0.50" />
                                    </GeometryGroup>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

於是就完成今天的任務啦~!