2. 畫刷
2.1有哪些畫刷
|
名稱 |
說明 |
|
SolidColorBrush |
單色畫刷 |
|
LinearGradientBrush |
漸變畫刷 |
|
RadialGradientBrush |
散射漸變畫刷 |
|
ImageBrush |
圖片畫刷 |
|
DrawingBrush |
繪圖畫刷 |
|
VisualBrush |
虛擬畫刷 |
|
BitmapCacheBrush |
緩衝畫刷 |
2.2 SolidColorBrush
下面三種方法都可以創建畫刷：
SolidColorBrush brush1 = newSolidColorBrush(Colors.Blue);
SolidColorBrush brush2 =SystemColors.ControlLightBrush;
SolidColorBrush brush3 = newSolidColorBrush(Color.FromRgb(255,0,0));
2.3 LinearGradientBrush
2.3.1 常用屬性說明
GradientStop：設置漸變顏色Color和拐點Offset
StartPoint 和EndPoint：設置相對起始點和結束點（值範圍是0-1）
SpreadMethod：設置平鋪模式
2.3.2 GradientStop
1.默認漸變是從左上角到右下角，定義兩個GradientStop，一個Offset=0，另一個Offset=1則表示從左上角(0,0)到右下角。
<Rectangle Canvas.Top="30"Canvas.Left="30" Width="200" Height="150"Stroke="Black">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStopColor="Red" Offset="0"></GradientStop>
<GradientStopColor="White" Offset="1"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
2.如果設置第二個Offset爲0.5則漸變範圍是左上角到中間，後面則保持第二種顏色。
<LinearGradientBrush>
<GradientStopColor="Red" Offset="0"></GradientStop>
<GradientStop Color="White" Offset="0.5"></GradientStop>
</LinearGradientBrush>
2.可以添加多個GradientStop實現多個顏色的漸變。
<LinearGradientBrush>
<GradientStopColor="Red" Offset="0"></GradientStop>
<GradientStopColor="Yellow" Offset="0.3"></GradientStop>
<GradientStopColor="Blue" Offset="0.6"></GradientStop>
<GradientStopColor="White" Offset="1"></GradientStop>
</LinearGradientBrush>
2.3.3 StartPoint 和EndPoint
1.縱向漸變和橫向漸變
<LinearGradientBrushStartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Red"Offset="0"></GradientStop>
<GradientStop Color="White"Offset="1"></GradientStop>
</LinearGradientBrush>
<LinearGradientBrushStartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red"Offset="0"></GradientStop>
<GradientStop Color="White"Offset="1"></GradientStop>
</LinearGradientBrush>
2.EndPoint和Offset的值都會影響最終的顯示
<LinearGradientBrushStartPoint="0,0" EndPoint="0.5,0">
<GradientStop Color="Red"Offset="0"></GradientStop>
<GradientStop Color="White" Offset="0.5"></GradientStop>
</LinearGradientBrush>
2.3.4 SpreadMethod
1. 反轉
<LinearGradientBrushStartPoint="0,0" EndPoint="0.5,0"SpreadMethod="Reflect">
<GradientStop Color="Red"Offset="0"></GradientStop>
<GradientStopColor="White" Offset="1"></GradientStop>
</LinearGradientBrush>
2. 重複
<LinearGradientBrushStartPoint="0,0" EndPoint="0.5,0"SpreadMethod="Repeat">
<GradientStop Color="Red"Offset="0"></GradientStop>
<GradientStopColor="White" Offset="1"></GradientStop>
</LinearGradientBrush>
2.3.5 可以填充任何需要畫刷的地方
2.4 RadialGradientBrush
2.4.1 常用屬性說明
GradientStop：設置漸變顏色Color和拐點Offset
Center、RadiusX和RadiusY：定義橢圓漸變區域
GradientOrigin：在橢圓漸變區域裏的漸變座標原點
SpreadMethod：設置平鋪模式，橢圓漸變區域外的平鋪模式。
2.4.2 GradientStop
<Rectangle Canvas.Top="25"Canvas.Left="25" Width="200" Height="150"Stroke="Black" >
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStopColor="Red" Offset="0"></GradientStop>
<GradientStopColor="Yellow" Offset="1"></GradientStop>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
2.4.3 Center、RadiusX、 RadiusY和 GradientOrigin
左上：Center=0.5,0.5 RadiusX=0.4 RadiusY=0.4 GradientOrigin=0.5,0.5
右上：Center=0.7,0.5 RadiusX=0.4 RadiusY=0.4 GradientOrigin=0.7,0.5
左下：Center=0.5,0.5 RadiusX=0.7 RadiusY=0.7 GradientOrigin=0.5,0.5
右下：Center=0.5,0.5 RadiusX=0.7 RadiusY=0.7 GradientOrigin=0.2,0.2
2.5 ImageBrush
2.5.1 使用圖片畫刷
<Rectangle Canvas.Top="55"Canvas.Left="25" Width="200" Height="82.553"Stroke="Black" >
<Rectangle.Fill>
<ImageBrushImageSource="Koala.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
2.5.2 使用Stretch改變填充方式
2.5.3 使用Viewbox剪取顯示圖片的一部分
2.5.4 使用TileMode平鋪圖片
2.6 VisualBrush
相當於一面複製圖片的鏡子。
<StackPanelName="stackpanel1">
<Button Name="button1" Canvas.Top="10"Canvas.Left="50">Button1</Button>
<TextBox>TextBox1</TextBox>
</StackPanel>
<Rectangle Canvas.Top="55" Canvas.Left="25"Width="200" Height="82.553" Stroke="Black" >
<Rectangle.Fill>
<VisualBrushVisual="{Binding ElementName=stackpanel1}"></VisualBrush>
</Rectangle.Fill>
</Rectangle>