WPF 10天修煉 第八天 - 形狀、畫刷和變換
圖形express
在WPF中使用繪圖最簡單的就是使用Shape類。Shape類繼承自FrameworkElement，是一個專門用來繪圖的類。Shape類中年派生的類有直線、矩形、多邊形和圓形等。canvas
System.Windows.Shapes.Shape類是一個抽象類，從該類又派生出多個不一樣的子類，以下圖：app
Shape類的通用屬性工具
| 屬性名稱性能 |
描述動畫 |
| Fillspa |
繪製填充的畫刷orm |
| Strokexml |
繪製邊框的畫刷對象 |
| StrokeThickness |
與設備無關的邊框寬度 |
| StrokeStartLineCap和StrokeEndLineCap |
PenLineCap枚舉值，用於描述Stroke起始和結束位置的形狀 |
| StrokeDashArray StrokeDashOffset StrokeDashCap |
繪製虛線邊框，控制虛線的尺寸頻率，以及虛線的兩端。 |
| StrokeLineJoin和StrokeMiterLimit |
設置邊框的形狀和線段的鏈接處形狀 |
| Stretch |
肯定如何填充形狀 |
| DefiningGeometry |
爲形狀定義一個幾何圖形，幾何對象描述形狀的座標和尺寸，但不具備UIElement的特性，不支持鼠標鍵盤事件。 |
| GeometryTransform |
形狀的變換，改變繪圖的座標。能夠拉伸 旋轉 或者位移。 |
| RenderedGeometry |
提供一個幾何對象來描述最終的輸出形狀 |
若是圖形不爲Fill和Stroke提供一個Brush對象，圖形將不顯示。
Ellipse和Rectangle都具備尺寸自適應的能力，若是不爲對象設置高度和寬度，圖形的尺寸將被自動進行縮放。若是將這兩個控件的高度和寬度設置同樣則能夠繪製出正方形和圓形。
Rectangle
使用RadiusX和RadiusY屬性能夠設置矩形的圓角。
<Window x:Class="WPFDemo.RectangleDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="RectangleDemo" Height="400" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Margin="10" Stroke="Black" StrokeThickness="2" Canvas.Left="10" Canvas.Top="10" />
<Canvas Grid.Row="1" Background="Red">
<!--繪製一個長100 高40的矩形 填充顏色爲#FF169AE6-->
<Rectangle Width="100" Height="40" Fill="#FF169AE6" Canvas.Left="10" Canvas.Top="10">
</Rectangle>
<!--繪製一個長100 高40的矩形 填充顏色#FF169AE6 邊框Black-->
<Rectangle Width="100" Height="40" Fill="#FF169AE6" Stroke="Black" StrokeThickness="2" Canvas.Left="10" Canvas.Top="60"/>
<!--繪製一個長100 高40的矩形 無填充顏色 邊框Black-->
<Rectangle Width="100" Height="40" Stroke="Black" StrokeThickness="2" Canvas.Left="10" Canvas.Top="110"/>
<!--繪製一個長100 高40的圓角矩形 填充顏色爲#FF169AE6-->
<Rectangle Width="100" Height="40" Fill="#FF169AE6" RadiusX="5" RadiusY="5" Canvas.Left="120" Canvas.Top="10">
</Rectangle>
<!--繪製一個長100 高40的圓角矩形 填充顏色#FF169AE6 邊框Black-->
<Rectangle Width="100" Height="40" Fill="#FF169AE6" Stroke="Black" StrokeThickness="2" RadiusX="5" RadiusY="5" Canvas.Left="120" Canvas.Top="60"/>
<!--繪製一個長100 高40的圓角矩形 無填充顏色 邊框Black-->
<Rectangle Width="100" Height="40" Stroke="Black" StrokeThickness="2" RadiusX="5" RadiusY="5" Canvas.Left="120" Canvas.Top="110"/>
<!--繪製一個長100 高40的圓 填充顏色爲#FF169AE6-->
<Rectangle Width="40" Height="40" Fill="#FF169AE6" RadiusX="20" RadiusY="20" Canvas.Left="230" Canvas.Top="10">
</Rectangle>
<!--繪製一個長100 高40的圓 填充顏色#FF169AE6 邊框Black-->
<Rectangle Width="40" Height="40" Fill="#FF169AE6" Stroke="Black" StrokeThickness="2" RadiusX="20" RadiusY="20" Canvas.Left="230" Canvas.Top="60"/>
<!--繪製一個長100 高40的圓 無填充顏色 邊框Black-->
<Rectangle Width="40" Height="40" Stroke="Black" StrokeThickness="2" RadiusX="20" RadiusY="20" Canvas.Left="230" Canvas.Top="110"/>
<!--繪製一個長100 高40的橢圓 填充顏色爲#FF169AE6-->
<Rectangle Width="100" Height="40" Fill="#FF169AE6" RadiusX="20" RadiusY="20" Canvas.Left="280" Canvas.Top="10">
</Rectangle>
<!--繪製一個長100 高40的橢圓 填充顏色#FF169AE6 邊框Black-->
<Rectangle Width="100" Height="40" Fill="#FF169AE6" Stroke="Black" StrokeThickness="2" RadiusX="20" RadiusY="20" Canvas.Left="280" Canvas.Top="60"/>
<!--繪製一個長100 高40的橢圓 無填充顏色 邊框Black-->
<Rectangle Width="100" Height="40" Stroke="Black" StrokeThickness="2" RadiusX="20" RadiusY="20" Canvas.Left="280" Canvas.Top="110"/>
<!--繪製一個長100 高40的橢圓 填充顏色爲#FF169AE6-->
<Rectangle Width="40" Height="40" Fill="#FF169AE6" Canvas.Left="390" Canvas.Top="10">
</Rectangle>
<!--繪製一個長100 高40的橢圓 填充顏色#FF169AE6 邊框Black-->
<Rectangle Width="40" Height="40" Fill="#FF169AE6" Stroke="Black" StrokeThickness="2" Canvas.Left="390" Canvas.Top="60"/>
<!--繪製一個長100 高40的橢圓 無填充顏色 邊框Black-->
<Rectangle Width="40" Height="40" Stroke="Black" StrokeThickness="2" Canvas.Left="390" Canvas.Top="110"/>
</Canvas>
</Grid>
</Window>
Ellipse
<Window x:Class="WPFDemo.EllipseDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="EllipseDemo" Height="600" Width="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Ellipse Grid.Row="0" Stroke="Black" StrokeThickness="2" ></Ellipse>
<Canvas Grid.Row="1" Background="Red">
<!--繪製圓形 填充LightBlue-->
<Ellipse Width="100" Height="100" Fill="LightBlue" Canvas.Left="10" Canvas.Top="10"></Ellipse>
<!--繪製圓形 填充Yellow 邊框Black-->
<Ellipse Width="100" Height="100" Fill="Yellow" Stroke="Black" StrokeThickness="2" Canvas.Top="120" Canvas.Left="10"></Ellipse>
<!--繪製圓形 無填充 邊框black-->
<Ellipse Width="100" Height="100" Stroke="Black" StrokeThickness="2" Canvas.Top="240" Canvas.Left="10"></Ellipse>
<!--繪製圓形 填充LightBlue-->
<Ellipse Width="100" Height="50" Fill="LightBlue" Canvas.Left="130" Canvas.Top="10"></Ellipse>
<!--繪製圓形 填充Yellow 邊框Black-->
<Ellipse Width="100" Height="50" Fill="Yellow" Stroke="Black" StrokeThickness="2" Canvas.Top="120" Canvas.Left="130"></Ellipse>
<!--繪製圓形 無填充 邊框black-->
<Ellipse Width="100" Height="50" Stroke="Black" StrokeThickness="2" Canvas.Top="240" Canvas.Left="130"></Ellipse>
</Canvas>
</Grid>
</Window>
Stretch屬性
Ellipse和Rectangle尺寸能夠自適應與可用的空間。這種行爲依賴於Stretch屬性值。Stretch枚舉類型的值：
一、 None：保持器原始尺寸。
二、 Fill：調整內容的大小以填充目標尺寸。不保留橫縱比。
三、 Uniform：在保留內容原有縱橫比的同時調整內容的大小，以適合目標尺寸。
四、 UniformToFill：在保留內容原有縱橫比的同時調整內容的大小，以填充目標尺寸。若是目標矩形的縱橫比不一樣於源矩形的縱橫比，則對源內容進行剪裁以適合目標尺寸。
<Window x:Class="WPFDemo.StretchDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="StretchDemo" Height="300" Width="300">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Stretch-None" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Stretch-Fill" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Stretch-Uniform" Grid.Row="2" Grid.Column="0"></TextBlock>
<TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Stretch-UniformToFill" Grid.Row="3" Grid.Column="0"></TextBlock>
<!--爲Ellipse設置Stretch屬性-->
<Ellipse Grid.Row="0" Grid.Column="1" Fill="Yellow" Stroke="Blue" Stretch="None" />
<Ellipse Grid.Row="1" Grid.Column="1" Fill="Yellow" Stroke="Blue" Stretch="fill"/>
<Ellipse Grid.Row="2" Grid.Column="1" Fill="Yellow" Stroke="Blue" Stretch="Uniform"/>
<Ellipse Grid.Row="3" Grid.Column="1" Fill="Yellow" Stroke="Blue" Stretch="UniformToFill"/>
</Grid>
</Window>
Line
<Window x:Class="WPFDemo.LineDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="LineDemo" Height="300" Width="300">
<Canvas>
<!--使用Line繪圖工具寫一個「田」-->
<Line Stroke="Black" StrokeThickness="2" X1="10" Y1="10" X2="10" Y2="100"></Line>
<Line Stroke="Black" StrokeThickness="2" X1="10" Y1="10" X2="100" Y2="10"></Line>
<Line Stroke="Black" StrokeThickness="2" X1="100" Y1="10" X2="100" Y2="100"></Line>
<Line Stroke="Black" StrokeThickness="2" X1="10" Y1="55" X2="100" Y2="55"></Line>
<Line Stroke="Black" StrokeThickness="2" X1="55" Y1="10" X2="55" Y2="100"></Line>
<Line Stroke="Black" StrokeThickness="2" X1="10" Y1="100" X2="100" Y2="100"></Line>
<TextBlock FontSize="18" Text="使用Line繪圖工具寫一個"田"" Canvas.Left="10" Canvas.Top="120"></TextBlock>
</Canvas>
</Window>
Polyline
<Window x:Class="WPFDemo.PolyLineDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="PolyLineDemo" Height="300" Width="300">
<Canvas Name="canvas1">
<!--使用Polyline寫「田」-->
<Polyline Stroke="Black" StrokeThickness="2" Points="10 10,100 10,100 100,10 100,10,10,55 10,55 100,10 100,10 55,10 55,100 55">
</Polyline>
<!--使用Polyline繪製折線-->
<Polyline Stroke="Black" StrokeThickness="2"
Points="10 200,30 150,50 180,80 120,100 170,120 150,130 200"></Polyline>
</Canvas>
</Window>
使用後臺代碼建立「田」字形
public void CreateTian()
{
Polyline myPolyline = new Polyline();
myPolyline.Stroke = Brushes.Black;
myPolyline.StrokeThickness = 2;
//指定座標
PointCollection ps = new PointCollection();
ps.Add(new Point(120, 10));
ps.Add(new Point(220, 10));
ps.Add(new Point(220, 110));
ps.Add(new Point(120, 110));
ps.Add(new Point(120, 10));
ps.Add(new Point(170, 10));
ps.Add(new Point(170, 110));
ps.Add(new Point(120, 110));
ps.Add(new Point(120, 60));
ps.Add(new Point(220, 60));
myPolyline.Points = ps;
canvas1.Children.Add(myPolyline);
}
Polygon
<Window x:Class="WPFDemo.polygonDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="polygonDemo" Height="500" Width="600">
<Canvas>
<!--使用Polyline繪製折線-->
<Polyline Stroke="Black" StrokeThickness="2"
Points="10 200,30 150,50 180,80 120,100 170,120 150,130 200" ></Polyline>
<!--使用Polygon繪製折線 會自動封閉-->
<Polygon Stroke="Black" StrokeThickness="2"
Points="10 200,30 150,50 180,80 120,100 170,120 150,130 200" Canvas.Left="200"></Polygon>
<!--polygon 填充方式EvenOdd -->
<Polygon Stroke="Black" StrokeThickness="1" Fill="Red" FillRule="EvenOdd" Points="15,200 68,70 110,200 0,125 135,125" Canvas.Left="50" Canvas.Top="200"/>
<!--polygon 填充方式Nonzero -->
<Polygon Stroke="Black" StrokeThickness="1" Fill="Red" FillRule="Nonzero" Points="15,200 68,70 110,200 0,125 135,125" Canvas.Left="200" Canvas.Top="200" />
</Canvas>
</Window>
線帽和鏈接點
<Window x:Class="WPFDemo.CapDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="CapDemo" Height="300" Width="300">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Center" VerticalAlignment="Center" Text="線帽和鏈接方式" FontSize="20" />
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="鏈接方式" FontSize="16" />
<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="線帽" FontSize="16" />
<!--鏈接方式-->
<TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Miter" FontSize="16" />
<Polyline Grid.Row="2" Grid.Column="1" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeLineJoin="Miter" />
<TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Bevel" FontSize="16" />
<Polyline Grid.Row="3" Grid.Column="1" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeLineJoin="Bevel" />
<TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Round" FontSize="16" />
<Polyline Grid.Row="4" Grid.Column="1" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeLineJoin="Round" />
<!--線帽-->
<TextBlock Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Flat" FontSize="16" />
<Polyline Grid.Row="2" Grid.Column="3" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat"/>
<TextBlock Grid.Row="3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Square" FontSize="16" />
<Polyline Grid.Row="3" Grid.Column="3" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeStartLineCap="Square" StrokeEndLineCap="Square"/>
<TextBlock Grid.Row="4" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Round" FontSize="16" />
<Polyline Grid.Row="4" Grid.Column="3" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<TextBlock Grid.Row="5" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Triangle" FontSize="16" />
<Polyline Grid.Row="5" Grid.Column="3" Points="30 80,100 30,120 80,200 50" Stroke="Red" StrokeThickness="20" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle" />
</Grid>
</Window>
繪製虛線
<Window x:Class="WPFDemo.DashDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="DashDemo" Height="300" Width="300">
<Canvas>
<Line X1="10" Y1="10" X2="200" Y2="10" Stroke="Black" StrokeThickness="5" StrokeDashArray="5 1" Canvas.Top="30" />
<Polyline Points="10 10,50 50,100 20,300 20" StrokeDashArray="6 3" StrokeDashCap="Round" Stroke="Black" StrokeThickness="5" Canvas.Top="70"></Polyline>
</Canvas>
</Window>
畫刷
在上面使用的SolidColorBrush填充圖形內部區域，畫刷主要的做用是填充區域，好比填充圖形或控件的前景色、背景色、邊框等。在WPF中，派生System.Windows.Media.Brush的類類除了SolidColorBrush畫刷以外，還提供了下面這些畫刷：
LinearCradientBrush：線性漸變畫刷。
RadialGradientBrush：徑向漸變畫刷。
ImageBrush：圖像畫刷。
DrawingBrush：圖形畫刷。
VisualBrush：可視化對象畫刷。
LinearGradientBrush線性漸變畫刷
線性漸變使用直線方向從一種顏色向另外一種顏色進行漸變填充，直線的起始點和終點由StartPoint和EndPoint屬性指定。StartPoint默認爲(0,0)，EndPoint(1,1) 表示相對於圖形的左上角和右下角。在直線之間，可使用GradientStops漸變中止點集合定義多個漸變中止點GradientStop。
<Window x:Class="WPFDemo.LinearGradientBrushDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="LinearGradientBrushDemo" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="對角線線性漸變"></TextBlock>
<!--使用對角線線性漸變填充-->
<Rectangle Grid.Row="0" Grid.Column="1" Margin="10">
<Rectangle.Fill>
<!--指定漸變起始和終止座標-->
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<!--漸變中止位增長漸變顏色-->
<GradientStop Color="Yellow" Offset="0.0"/>
<GradientStop Color="Red" Offset="0.3"/>
<GradientStop Color="Blue" Offset="0.8"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="1" Grid.Column="0" Text="水平線性漸變"></TextBlock>
<!--使用水平線線性漸變填充-->
<Rectangle Grid.Row="1" Grid.Column="1" Margin="10">
<Rectangle.Fill>
<!--指定漸變起始和終止座標-->
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
<!--漸變中止位增長漸變顏色-->
<GradientStop Color="Yellow" Offset="0.0"/>
<GradientStop Color="Red" Offset="0.3"/>
<GradientStop Color="Blue" Offset="0.8"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="2" Grid.Column="0" Text="垂直線性漸變"></TextBlock>
<!--使用垂直線性漸變填充-->
<Rectangle Grid.Row="2" Grid.Column="1" Margin="10">
<Rectangle.Fill>
<!--指定漸變起始和終止座標-->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<!--漸變中止位增長漸變顏色-->
<GradientStop Color="Yellow" Offset="0.0"/>
<GradientStop Color="Red" Offset="0.3"/>
<GradientStop Color="Blue" Offset="0.8"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
RadialGradientBrush：徑向漸變畫刷
徑向漸變和線性漸變相似，徑向漸變有一個圓及一個焦點用於定義漸變行爲。該圓定義漸變的終點。焦點定義漸變的中心。
Gradientorigin用於指定漸變焦點位置；第一個顏色的起始點，默認爲圓形位置。
Center用於指定圓形漸變的中心位置。
RadiusX和RadiusY分別用於指定漸變填充的半徑。
<Window x:Class="WPFDemo.RadialGradientBrushDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="RadialGradientBrushDemo" Height="300" Width="300">
<Canvas>
<!--設置焦點爲中心點-->
<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.8" RadiusY="0.8">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--設置焦點爲左上角-->
<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2" Canvas.Left="220">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.5" Center="0.5,0.5" RadiusX="0.8" RadiusY="0.8">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--水平橢圓 設置焦點爲中心點-->
<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2" Canvas.Top="150">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.2" RadiusY="0.8">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--垂直橢圓 設置焦點爲左上角-->
<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2" Canvas.Left="220" Canvas.Top="150">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.5" Center="0.5,0.5" RadiusX="0.8" RadiusY="0.2">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Window>
ImageBrush圖像畫刷
ImageBrush容許開發人員使用圖像來填充區域，支持大多數經常使用的圖像文件，包括：BMP、PNG、GIF、JPEG文件。ImmageBrush具備一個ImageSource的屬性，在XAML中，能夠直接爲該屬性直接賦值一個圖片文件路徑。
<Window x:Class="WPFDemo.ImageBrushDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="ImageBrushDemo" Height="500" Width="720">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="16" />
<Setter Property="Margin" Value="10" />
<Setter Property="Padding" Value="10" />
</Style>
</Window.Resources>
<Grid>
<!--使用ImageBrush設置圖片的背景圖-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--Viewport屬性和TileMode屬性-->
<Button Grid.Row="0" Content="TileMode-None" >
<Button.Background>
<!--使用Viewport和TileMode控制重複背景圖片-->
<ImageBrush ImageSource="Images/0.jpg" Viewport="0,0,0.2,0.5" TileMode="None"/>
</Button.Background>
</Button>
<Button Grid.Row="1" Content="TileMode-Tile" >
<Button.Background>
<!--使用Viewport和TileMode控制重複背景圖片-->
<ImageBrush ImageSource="Images/0.jpg" Viewport="0,0,0.2,0.5" TileMode="Tile"/>
</Button.Background>
</Button>
<Button Grid.Row="2" Content="TileMode-FlipX" >
<Button.Background>
<!--使用Viewport和TileMode控制重複背景圖片-->
<ImageBrush ImageSource="Images/0.jpg" Viewport="0,0,0.2,0.5" TileMode="FlipX"/>
</Button.Background>
</Button>
<Button Grid.Row="3" Content="TileMode-FlipY" >
<Button.Background>
<!--使用Viewport和TileMode控制重複背景圖片-->
<ImageBrush ImageSource="Images/0.jpg" Viewport="0,0,0.2,0.5" TileMode="FlipY"/>
</Button.Background>
</Button>
<Button Grid.Row="4" Content="TileMode-FlipXY" >
<Button.Background>
<!--使用Viewport和TileMode控制重複背景圖片-->
<ImageBrush ImageSource="Images/0.jpg" Viewport="0,0,0.2,0.5" TileMode="FlipXY"/>
</Button.Background>
</Button>
<!--Stretch屬性-->
<Button Grid.Row="0" Grid.Column="1" Content="Stretch-Fill" >
<Button.Background>
<!--使用Stretch屬性Fill-->
<ImageBrush ImageSource="Images/0.jpg" Stretch="Fill"/>
</Button.Background>
</Button>
<Button Grid.Row="1" Grid.Column="1" Content="Stretch-None" >
<Button.Background>
<!--使用Stretch屬性None-->
<ImageBrush ImageSource="Images/0.jpg" Stretch="None"/>
</Button.Background>
</Button>
<Button Grid.Row="2" Grid.Column="1" Content="Stretch-Uniform" >
<Button.Background>
<!--使用Stretch屬性Uniform-->
<ImageBrush ImageSource="Images/0.jpg" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button Grid.Row="3" Grid.Column="1" Content="Stretch-UniformToFill" >
<Button.Background>
<!--使用Stretch屬性UniformToFill-->
<ImageBrush ImageSource="Images/0.jpg" Stretch="UniformToFill"/>
</Button.Background>
</Button>
</Grid>
</Grid>
</Window>
VisualBrush可視化畫刷
<Window x:Class="WPFDemo.VisualBrushDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="VisualBrushDemo" Height="500" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--使用VisualBrush填充矩形-->
<Rectangle Grid.Row="0" Stroke="Black" Height="150" Width="180">
<Rectangle.Fill>
<VisualBrush>
<VisualBrush.Visual>
<StackPanel Background="White">
<Rectangle Width="25" Height="25" Fill="Red" Margin="2" />
<TextBlock FontSize="10pt" Margin="2">你好
</TextBlock>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
<!--使用VisualBrush複製按鈕外觀-->
<Button Padding="5" Margin="10" Name="btn1" FontSize="20" Content="複製個人外觀" Grid.Row="1" Background="Yellow"/>
<Rectangle Grid.Row="2" Margin="10" Height="100">
<Rectangle.Fill>
<!--使用VisualBrush複製btn1的外觀-->
<VisualBrush Visual="{Binding ElementName=btn1}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
OpacityMask不透明蒙版
<Window x:Class="WPFDemo.OpacityMaskDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="OpacityMaskDemo"
WindowState="Maximized"
Height="300" Width="300">
<Window.Background>
<ImageBrush ImageSource="Images/back.png"></ImageBrush>
</Window.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--按鈕蒙版-->
<Button FontSize="14" FontWeight="Bold" Content="局部透明效果的按鈕">
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Red"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
<!--圖像蒙版效果-->
<Image Source="Images/0.jpg" Grid.Row="1" Stretch="None">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Transparent"></GradientStop>
<GradientStop Offset="0.5" Color="#95EEEEFF"></GradientStop>
<GradientStop Offset="1" Color="#10EFEFEF"></GradientStop>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<StackPanel Grid.Row="2">
<Border Name="ReflectedVisual" Width="400" CornerRadius="20,20,20,20" >
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0.0" Color="#CCCCFF" />
<GradientStop Offset="1.0" Color="White" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Margin="10">
<TextBlock TextWrapping="Wrap" Width="300" Margin="10">
OpacityMask屬性接收一個畫刷，
畫刷的Alpha通道決定哪部分進行透明，
好比當爲OpacityMask使用一個透明度的SolidColorBrush時，
整個元素將會消失，若是使用不透明的SolidColorBrush時，元素將徹底可見。
</TextBlock>
<!--在文本下面放置3個橢圓形-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Ellipse Margin="10" Height="50" Width="50" Fill="Red" />
<Ellipse Margin="10" Height="50" Width="50" Fill="Blue" />
<Ellipse Margin="10" Height="50" Width="50" Fill="Gray" />
</StackPanel>
</StackPanel>
</Border>
<Rectangle Height="1" Fill="Gray" HorizontalAlignment="Stretch" />
<!--反射效果的矩形-->
<Rectangle Height="{Binding Path=ActualHeight,ElementName=ReflectedVisual}"
Width="{Binding Path=ActualWidht,ElementName=ReflectedVisual}">
<Rectangle.Fill>
<!---建立反射-->
<VisualBrush Opacity="0.75" Stretch="None" Visual="{Binding ElementName=ReflectedVisual}">
<VisualBrush.RelativeTransform>
<!--調整反射圖形的位置和大小-->
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1"/>
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF000000" Offset="0.0"/>
<GradientStop Color="#FF000000" Offset="0.5"/>
<GradientStop Color="#FF000000" Offset="0.75"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<!--對反射圖形應用位置效果-->
<Rectangle.BitmapEffect>
<BlurBitmapEffect Radius="0.8" />
</Rectangle.BitmapEffect>
</Rectangle>
</StackPanel>
</Grid>
</Window>
變換
在WPF應用程序中，變換能夠爲圖形添加豐富的變換效果，使用變換能夠平移、縮放、旋轉和扭曲對象。WPF內置了以下所示的幾種預約義的變換特效：
TranslateTransform移動變換：移動圖形到特定的偏移位置，在不一樣的位置繪製相同的圖形，或者動畫使用圖形移動位置時很是有用。
RotateTrransform旋轉變換：按照指定的角度和中心點旋轉圖形。
ScaleTransfrom縮放變換：按指定的縮放比例和中心點縮放圖形。
SkewTransform扭曲變換：按指定的角度扭曲圖形。
另外可使用MatrixTan建立自定義變換，TransformGroup使開發人員能夠組合多個變換，此外還可使用Transform3D進行三維座標的變換。
TranslateTransform移動變換
移動變換將一個圖形對象從一個位置移動到另外一個位置，具備以下兩個屬性：
X:水平移動的距離，默認爲0
Y:垂直移動的距離，默認爲0
<Window x:Class="WPFDemo.TranslateTransformDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="TranslateTransformDemo" Height="300" Width="300">
<Canvas>
<!--將矩形水平移動50單位，垂直移動50單位-->
<Rectangle Height="50" Width="50" Fill="Red" Stroke="Blue" StrokeThickness="2" Canvas.Left="50" Canvas.Top="50">
</Rectangle>
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="50" Canvas.Top="50">
<Rectangle.RenderTransform>
<TranslateTransform X="50" Y="50" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Window>
RotateTransform旋轉變換
旋轉變換能夠將圖形對象按指定的中心點旋轉一個指定的角度，具體有三個屬性：
Angle：旋轉指定角度值，默認值0；
CenterX：旋轉的水平中心點，默認值0；
CenterY：旋轉的垂直中心點，默認值0；
默認的
<Window x:Class="WPFDemo.RotateTransformDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="RotateTransformDemo" Height="300" Width="300">
<Canvas Height="400" Width="400">
<!--旋轉前的矩形-->
<Rectangle Name="Rec3" Width="200" Height="10" Stroke="Blue" Fill="Red" Canvas.Left="50" Canvas.Top="50">
</Rectangle>
<!--不指定旋轉基點（centerX,centerY）-->
<Rectangle Name="Rec1" Width="200" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="50" Canvas.Top="50">
<Rectangle.RenderTransform>
<RotateTransform Angle="50" />
</Rectangle.RenderTransform>
</Rectangle>
<!--指定旋轉基點-->
<Rectangle Name="Rect2" Width="200" Height="10" Stroke="Blue" Fill="Orange" Canvas.Left="50" Canvas.Top="50">
<Rectangle.RenderTransform>
<RotateTransform Angle="50" CenterX="20" CenterY="5" />
</Rectangle.RenderTransform>
</Rectangle>
<!--旋轉前的文本對象-->
<TextBlock Name="txt2" FontSize="15" Foreground="Blue" FontWeight="Bold" Canvas.Left="50" Canvas.Top="300" Text="文本旋轉效果示例旋轉前"/>
<!--旋轉文本對象-->
<TextBlock Name="txt1" Canvas.Left="50" Canvas.Top="300" Text="文本旋轉效果示例不指定中心點">
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<!--旋轉文本對象，指定中心點-->
<TextBlock Name="txt3" Canvas.Left="50" Canvas.Top="300" Text="文本旋轉效果示例指定中心點">
<TextBlock.RenderTransform>
<RotateTransform Angle="-50" CenterX="0" CenterY="0" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Window>
ScaleTransform縮放變換
縮放變換用於放大或縮小一個圖形對象，能夠水平或者垂直縮放。在這個對象有以下4個屬性：
ScaleX：增長圖形對象的寬度，默認1.
ScaleY：增長圖形對象的高度，默認1.
CenterX：水平縮放的方向，默認0.
CenterY：垂直縮放的方向，默認0.
<Window x:Class="WPFDemo.ScaleTransformDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="ScaleTransformDemo" Height="450" Width="500">
<Canvas>
<!--原始矩形-->
<TextBlock Canvas.Top="30" Text="原始矩形"></TextBlock>
<Rectangle x:Name="Rec1" Canvas.Left="0" Canvas.Top="50" Width="100" Height="100" Fill="Red"></Rectangle>
<!--垂直放大2倍-->
<TextBlock Canvas.Top="180" Canvas.Left="10" Text="Y軸放大兩倍"></TextBlock>
<Rectangle x:Name="Rec2" Canvas.Left="0" Canvas.Top="200" Width="100" Height="100" Fill="Red">
<Rectangle.RenderTransform>
<ScaleTransform ScaleY="2"></ScaleTransform>
</Rectangle.RenderTransform>
</Rectangle>
<!--水平放大2倍-->
<TextBlock Canvas.Top="180" Canvas.Left="150" Text="X軸放大兩倍"></TextBlock>
<Rectangle x:Name="Rec3" Canvas.Left="150" Canvas.Top="200" Width="100" Height="100" Fill="Red">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="2"></ScaleTransform>
</Rectangle.RenderTransform>
</Rectangle>
<!--水平和垂直縮小，並指定中心點-->
<TextBlock Canvas.Top="30" Canvas.Left="150" Text="X Y軸各自縮小2倍" />
<Rectangle x:Name="Rec4" Canvas.Left="150" Canvas.Top="50" Width="100" Height="100" Fill="Red">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" CenterX="50" CenterY="50" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Window>
SkewTransform扭曲變換
扭曲變換用於將一個圖形對象按指定的中心點扭曲指定的角度，具備4個屬性：
AngleX：水平扭曲值，默認0；
AngleY：垂直扭曲值，默認0；
CenterX：扭曲水平基點，默認0；
CenterY：扭曲垂直基點，默認0；
<Window x:Class="WPFDemo.SkewTransformDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="SkewTransformDemo" Height="300" Width="600">
<Canvas>
<!--原始矩形-->
<Rectangle x:Name="Rec1" Canvas.Left="0" Canvas.Top="0" Width="200" Height="100" Fill="Blue"></Rectangle>
<!--水平扭曲50度-->
<Rectangle x:Name="Rec2" Canvas.Left="210" Canvas.Top="0" Width="200" Height="100" Fill="Orange">
<Rectangle.RenderTransform>
<SkewTransform AngleX="50"/>
</Rectangle.RenderTransform>
</Rectangle>
<!--垂直扭曲10度-->
<Rectangle x:Name="Rec3" Canvas.Left="0" Canvas.Top="120" Width="200" Height="100" Fill="Yellow">
<Rectangle.RenderTransform>
<SkewTransform AngleY="10"/>
</Rectangle.RenderTransform>
</Rectangle>
<!--基於指定的中心點水平和垂直扭曲-->
<Rectangle x:Name="Rec4" Canvas.Left="220" Canvas.Top="120" Width="200" Height="100" Fill="Green">
<Rectangle.RenderTransform>
<SkewTransform AngleY="10" AngleX="10" CenterX="100" CenterY="50"></SkewTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Window>
TransformGroup組合變換
使用TransformGroup組合變換，能夠爲一個圖形元素與應用多個變換特性能，在組合的多個變換時，定義的順序十分重要。
<Window x:Class="WPFDemo.TransformGroupDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="TransformGroupDemo" Height="300" Width="500">
<Canvas>
<!---先旋轉，在扭曲一個文本塊-->
<TextBlock FontSize="28" Canvas.Left="10" Canvas.Top="10" Text="文本塊中組合多個變換">
<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45" />
<SkewTransform CenterX="0" CenterY="0" AngleX="40" />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Window>
模糊效果
在BitmapEffect屬性中賦一個BlurBitmapEffect對象能夠應用模糊效果，模糊（KernelType屬性）效果有兩種：
Gaussian 高斯模糊：爲模糊建立平滑分佈的分佈曲線
Box盒裝模糊：用平直分佈曲線建立模糊
<Window x:Class="WPFDemo.BlurDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDemo"
mc:Ignorable="d"
Title="BlurDemo" Height="300" Width="300">
<Window.Resources>
<Style TargetType="Button" >
<Setter Property="Width" Value="200" />
<Setter Property="Height" Value="40" />
<Setter Property="Margin" Value="0,10,0,10" />
</Style>
<!---按下按鈕，顯示按鈕模糊效果-->
<Style x:Key="PressDim" TargetType="Button" >
<Setter Property="Width" Value="200" />
<Setter Property="Height" Value="40" />
<Setter Property="Margin" Value="0,10,0,10" />
<Style.Triggers>
<!--按鈕按下顯示模糊效果-->
<Trigger Property="Button.IsPressed" Value="true">
<Setter Property="Button.BitmapEffect">
<Setter.Value>
<BlurBitmapEffect Radius="10" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<!--模糊效果-->
<StackPanel >
<TextBlock Text="模糊效果" HorizontalAlignment="Center" Margin="0,10,0,10" FontSize="20"></TextBlock>
<Button Content="模糊前的按鈕"/>
<Button Content="盒裝模糊">
<Button.BitmapEffect>
<!--使用屬性元素語法爲按鈕應用BlurBitmaoEffect模糊效果-->
<BlurBitmapEffect Radius="1" KernelType="Box" />
<!--Radius屬性設置模糊的半徑，半徑越到效果越模糊.
KernelType屬性用於獲取或設置BlurBitmapEffect的模糊內核類型。
枚舉類型：Gaussian 高斯模糊：爲模糊建立平滑分佈的分佈曲線
Box盒狀模糊：用平直分佈曲線建立的簡單模糊
-->
</Button.BitmapEffect>
</Button>
<Button Content="高斯模糊">
<Button.BitmapEffect>
<BlurBitmapEffect Radius="1" KernelType="Gaussian" />
</Button.BitmapEffect>
</Button>
<Button Content="鼠標按下後顯示模糊效果"
Style="{StaticResource PressDim}"></Button>
</StackPanel>
</Grid>
</Window>
相關文章
- 1. WPF 10天修煉 第九天 - 幾何圖形
- 2. WPF 10天修煉 第四天- WPF佈局容器
- 3. WPF 10天修煉 第十天- WPF數據綁定
- 4. WPF 10天修煉 第三天- Application全局應用程序類
- 5. WPF 10天修煉 第五天- 內容控件
- 6. WPF 10天修煉 次日- XAML語言
- 7. WPF 10天修煉 第七天- WPF資源、樣式、控件模板
- 8. WPF 10天修煉 第六天- 系統屬性和經常使用控件
- 9. 狀態機(下)（第八天）
- 10. PS-第八天-修圖及濾鏡
- 更多相關文章...
- • 持久化對象的狀態及狀態轉換 - Hibernate教程
- • HTTP狀態碼 - HTTP 教程
- • RxJava操作符（八）Aggregate
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
