《15天玩轉WPF》—— 直線、矩形、橢圓的各種畫法

時間：2020.4.2，《深入淺出WPF》也學到了最後一章，三百頁用了將近一個月 (3.14開始） 屬實有點慢，因爲有個人的一些事情. .
. 前面的一些文章都是舉出書中核心的知識，有點枯燥 這一章學習圖形相關的知識，有點小激動 . . .
這一章學習過後，就差不多開學了，已經開始進行項目的學習與製作 . . .

---

文章講解直線、矩形、橢圓的用法，讓我們樸實無華的形狀變的好看一點 . . .

直線

直線是非常簡單的圖形，它有 X1、Y1、X2、Y2這四個屬性，用來確定線的起始與終點位置，它的 Stroke用來設置 畫刷顏色（Brush），下面我幾種不同的畫線的風格 :

<Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"/>

<Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"/>

<Line X1="10" Y1="60" X2="260" Y2="60" Stroke="Green" StrokeThickness="3"/>

<Line X1="10" Y1="80" X2="260" Y2="80" Stroke="Purple" StrokeThickness="2"/>

<Line X1="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeThickness="1"/>

<Line X1="10" Y1="120" X2="260" Y2="120" Stroke="Black" StrokeThickness="1"
 	StrokeDashArray="10,20,30"/>

<Line X1="10" Y1="140" X2="260" Y2="140" Stroke="Black" StrokeThickness="1"
 	StrokeDashArray="10"/>
 	
<Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeThickness="6"
 	StrokeEndLineCap="Round"/>

<Line X1="10" Y1="180" X2="260" Y2="180" StrokeThickness="6" StrokeEndLineCap="Round">
	<Line.Stroke>
                <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                    <GradientStop Color="Blue"/>
                    <GradientStop Offset="1"/>
                </LinearGradientBrush>
	</Line.Stroke>
</Line>

StrokeDashArray 屬性是用來設置虛線的，數據是一個集合類型 . . .
StrokeEndLineCap 屬性是用來設置線終點的形狀風格 . . .

最後一個線，我們設置它的畫刷爲漸變的效果，別有一番滋味 . . .

效果如下圖所示：

---

矩形

矩形也有筆觸（Stroke，連線），矩形的填充效果是 Fill屬性，它的類型是 Brush，

常用的 Brush類型有：

• SolidColorBrush：實心畫刷，直接用顏色字符串賦值
• LinearGradientBrush：線性漸變畫刷
• RadialGradientBrush：徑向漸變畫刷
• ImageBrush：圖片填充
• DrawingBrush：矢量圖 和 位圖作爲填充內容
• VisualBrush：獲取控件的外表作爲填充內容

下面我將每一種類型的填充方法進行演示 . . .
（最後再加上一種矩形的使用方法：漸變填充邊框）

VisualBrush的類型我將單獨演示 . . .

首先我們將界面進行佈局，然後將每一種類型的方式，分別放在不同的行列之中：

<Grid.RowDefinitions>
	 <RowDefinition Height="160"/>
	<RowDefinition Height="10"/>
	<RowDefinition Height="160"/>
</Grid.RowDefinitions>
        
<Grid.ColumnDefinitions>
	<ColumnDefinition Width="180"/>
	<ColumnDefinition Width="10"/>
	<ColumnDefinition Width="180"/>
	<ColumnDefinition Width="10"/>
	<ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>

佈局如圖所示：

我們把下面演示的六種方法的 矩形分別放在這六個單元格中，（不包含 VisualBrush 方法，下面單獨演示） . . .

SolidColorBrush

直接用顏色字符串填充

<Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>

效果如下圖所示：

LinearGradientBrush

使用漸變顏色填充

<Rectangle Grid.Column="2" Grid.Row="0">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="LightBlue"  Offset="0"/>
                    <GradientStop Color="Green" Offset="0.25"/>
                    <GradientStop Color="White" Offset="0.6"/>
                    <GradientStop Color="Beige" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
</Rectangle>

效果如下圖所示：

RadialGradientBrush

使用徑向漸變填充

<Rectangle Grid.Column="4" Grid.Row="0">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="LightBlue"  Offset="0"/>
                    <GradientStop Color="Pink" Offset="0.25"/>
                    <GradientStop Color="White" Offset="0.6"/>
                    <GradientStop Color="Beige" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
</Rectangle>

效果如下圖所示：

ImageBrush

使用圖片填充

<Rectangle Grid.Column="0" Grid.Row="2">
            <Rectangle.Fill>
                <!--可見區與填充模式-->
                <ImageBrush ImageSource=".\bj.jpeg" Viewport="0,0,0.3,0.35"
                 	 TileMode="Tile"/>
            </Rectangle.Fill>
</Rectangle>

Viewport 屬性是截取圖片的大小， TileMode是填充的模式

效果如下圖所示：

DrawingBrush

矢量圖填充

<Rectangle Grid.Column="2" Grid.Row="2">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="LightBlue">
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="0.2" RadiusY="0.2"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
</Rectangle>

中間畫出一個幾何圖形圓，來作爲矢量圖，截取大小，填充模式等等 . . .

效果如下圖所示：

漸變框填充，Fill爲null

<Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0"/>
                    <GradientStop Color="LightGreen" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>
</Rectangle>

效果如下圖所示：

.
.
.

除了 VisualBrush我們沒有演示，其它的六種填充方式都已經寫好了，如下圖：

.
.
.

下面我們來看一個VisualBrush的例子。爲了簡單起見，我們的目標是將 Button “複製”一下他的外觀，每複製一次，它的外觀就透明 20% . . .

代碼如下：

<Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="160"/>
        </Grid.ColumnDefinitions>

	<StackPanel x:Name="stackPanelLeft" Background="White">
            <Button x:Name="realButton" Content="OK" Height="40"/>
        </StackPanel>

	<Button Content=">>>" Grid.Column="1" Margin="5,0" Click="CloneVisual"/>
        <StackPanel x:Name="stackPanelRight" Background="White" Grid.Column="2"/>
</Grid>

當點擊中間的按鈕時，開始填充 stackPanelRight 中的內容，（複製透明 Button的模樣）：

double o = 1.0;  // 用於表示不透明的計數器

private void CloneVisual(object sender, RoutedEventArgs e)
{
	VisualBrush vBrush = new VisualBrush(this.realButton);	// 獲取 Button的樣子

	// 準備一個 Rect，用於填充 stackPanelRight中的內容
	Rectangle rect = new Rectangle();	
	
	// 獲取左邊 Button的顯示大小
	rect.Width = realButton.ActualWidth;
	rect.Height= realButton.ActualHeight;
	
	rect.Fill = vBrush;	// 將獲取的 Button模樣填充給 rect
	rect.Opacity = o;	// 設置 Rect的不透明度
	o -= 0.2;		// 每點擊按鈕一次，不透明度就變化一次
	this.stackPanelRight.Children.Add(rect);	// 將 rect放入準備好的佈局之中
}

效果動態圖如下所示：

---

橢圓

我們來用橢圓來畫一個徑向漸變的正圓，適當的爲它設置一些屬性，變的好看一點，

代碼如下：

<Ellipse Stroke="Gray" Width="140" Height="140" Cursor="Hand" ToolTip="A Boll">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75"
                 	RadiusY="0.75">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF444444" Offset="0.65"/>
                    <GradientStop Color="#FF999999" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
</Ellipse>

其中我們設置了一些屬性：

GradientOrigin：開始漸變的點在哪
RotateTransform：翻轉
Radius：半徑

等等 . . .

效果如下圖所示：

這個蛋是不是比較性感呢 ？

---

作者：浪子花夢