WPF基礎教程之形狀畫刷與變換詳解

這篇文章主要給大家介紹了關於WPF基礎教程之形狀畫刷與變換的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨着小編來一起學習學習吧

形狀

在WPF中形狀繼承自FrameworkElement類。因此,形狀是元素,有如下好處。

  • 形狀繪製自身。不需要管理無效的情況和繪圖過程。例如,移動內容,改變窗口尺寸或改變屬性時,不需要手動重新繪製圖形。
  • 使用與其他元素相同的方式組織形狀。在可任何佈局容器中放置圖形。(canvas明細是最有用的容器,因爲他允許在特性的座標位置放置形狀,當構建複雜的具有多個部分的圖畫時,很重要。)
  • 圖形支持與其他元素相同的事件。如焦點、鍵盤、鼠標事件。

Shape類子類

矩形和橢圓

需要設置Height和Width屬性,設置Fill或Stroke屬性,如未設置Fill或Stroke屬性,形狀不會顯示。

<StackPanel>
 <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left"></Ellipse>
 <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Rectangle>
 </StackPanel>

設置帶有帶有拐角的橢圓 RadiusX RadiusY值。

放置圖形的理想容器是Canvas,改容器要求使用left、top、right或bottom附加屬性,爲每個圖形指定座標。這樣可以完全控制形狀是如何相互重疊的


使用viewbox控件縮放形狀

使用Canvas控件唯一的限制是不能改變自身的尺寸以適應更大或更小的窗口。如果希望聯合Canvas控件的精準控制功能和方便的改變尺寸功能,可使用Viewbox元素。

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="auto"></RowDefinition>
  <RowDefinition Height="*"></RowDefinition>
 </Grid.RowDefinitions>
 <TextBlock>The first row of the Grid</TextBlock>
 <Viewbox Grid.Row="1" HorizontalAlignment="Left">
  <Canvas Width="200" Height="150">
  <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left" Canvas.Left="10" Canvas.Top="50"></Ellipse>
  <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left" Canvas.Left="30" Canvas.Top="40"></Rectangle>
  </Canvas>
 </Viewbox>
 </Grid>

直線

<Line Stroke="Blue" X1="0" Y1="10" X2="10" Y2="100"></Line>

折線

<Polyline Stroke="Blue" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 90,170 110,120 170,190,190,100 210,240"></Polyline>

多邊形

<Polygon Stroke="Blue" StrokeThickness="1" Fill="Yellow" Canvas.Left="10" Canvas.Top="10" FillRule="EvenOdd" Points="15,200 68,70 110,200 0,125 135,125"></Polygon>

FillRule填充規則:如果設置爲EvenOdd:WPF計算爲了到達圖形的外部必須穿過的直線數量。如果是奇數,就填充區域;如果是偶數就不填充改區域。

如果屬性設置爲Nonzero填充規則,WPF計算爲了到達圖形的外部經過的正反向和反方向的直線數量差。如果等於0就不填充該區域,如果等於等於0就填充。

點劃線(虛線)

<Polyline Stroke="Blue" StrokeThickness="14" StrokeDashArray="1 2" Points="10,30 60,0 90,40 120,10 350,10"></Polyline>

StrokeDashArray="1 2" 是相對於直線寬度的,這裏就是14 意思是14個單位的實線,28個單位的空白。

畫刷

畫刷填充區域,不幹是元素的背景色、前景色以及邊框,還是形狀內部填充和筆畫。

  • 畫刷支持更改通知。基礎自Freezable類。因此,如果改了畫刷,任何使用畫刷的元素都會重新繪製自身。
  • 畫刷支持部分透明。爲此,只需修改Opacity屬性。

常用畫刷

名稱
說明
SolidColorBrush 使用單一的連續顏色繪製區域。
LinearGradientBrush 使用漸變填充繪製區域,漸變的陰影填充從一種顏色變化到另一種顏色(並且,也可以在變化到第3種顏色之後變化到第4種。)
RadialGradientBrush 使用徑向漸變填充繪製區域,除了在圓形模式中從中心點向外部輻射漸變之外,這種畫刷和漸變畫刷類似。
ImageBrush 使用可被拉伸、縮放或平鋪的圖像繪製區域。
DrawingBrush 使用Drawing對象繪製區域,改對象可包含已經定義的形狀或位圖。
VisualBrush
使用Visual對象繪製區域。因爲WPF的元素都繼承自Visual類,所以可使用該畫刷將部分用戶界面複製到另一個局域。當創建特殊效果時,
改畫刷特別有用。
BitmapCacheBrush 使用從Visual對象緩存的內容繪製區域。這種畫刷和VisualBrush類似,但如果需要在多個地方重用圖形內容或者頻繁地重繪圖形內容,這種畫刷更高效。

LinearGradientBrush

<Rectangle Width="150" Height="100">
  <Rectangle.Fill>
  <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
   <GradientStop Color="Yellow" Offset="0.0"/>
   <GradientStop Color="Red" Offset="0.25"/>
   <GradientStop Color="Blue" Offset="0.75"/>
   <GradientStop Color="LimeGreen" Offset="1.0"/>
  </LinearGradientBrush>
  </Rectangle.Fill>  
 </Rectangle>


StartPoint 0,0 代表左上角,EndPonit 1,1 代表右下角 表示從左上角到右下角的方向漸變,同理如果是0,0 到0,0,1表示從上到下的垂直填充

Offset取值從0到1。表示顏色表示一種顏色漸變到另一種顏色的速度。

RadialGradientBrush

<Ellipse Margin="5" Stroke="Black" StrokeThickness="1" Width="200" Height="200">
  <Ellipse.Fill>
  <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
   <GradientStop Color="White" Offset="0"/>
   <GradientStop Color="Blue" Offset="1"/>
  </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>


GradientOrigin指定第一種顏色漸變的開始點,默然是(0.5,0.5)改點表示填充區域的中心。

RadiusX RadiusY決定了圓的尺寸,默認值爲0.5.

變換

變換是通過不加通告地切換圖形或元素使用的座標系統來改變形狀或元素的繪製方式的對象。變換主要類

名稱
說明
重要屬性
TranslateTranform 將座標系統移動一定的距離。如果希望在不同的地方繪製相同的形狀,改變換非常有用 X、Y
RotateTranform 旋轉座標系統。正常繪製的形狀繞着旋轉的中心點旋轉。 Angle、CenterX、CenterY
ScaleTranform 放大或縮小座標系統,從而繪製更大或更小的圖形。可在X和Y方向應用不同的縮放度,從而拉伸或縮放形狀
ScaleX、ScaleY
CenterX、CenterY
SkewTranform 通過傾斜一定的角度扭曲座標系統。例如繪製正方形,通過該變換正方形變成平行四邊形。 AngleX、AngelY、CenterX、CenterY
MatrixTranform 使用提供的矩陣的乘積修改座標系統。這是最複雜的選擇。 Matrix
TransformGroup 組合多個變換,從而可以一次應用所有這些變換。應用變換的順序是很重要的,因爲這會影響最終的結果。例如,首先使用RotateTranform選擇圖形,然後使用TranslateTranform移動圖形,這樣做的結果和先移動再旋轉的結果是不同的。  

應用場景

  • 傾斜形狀。
  • 重複形狀。
  • 動畫。通過變換可創建大量精緻的效果。例如,旋轉形狀、將圖形從一個地方移動到另一個地方。
<Canvas>
 <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>
  <RotateTransform Angle="25"></RotateTransform>
  </Rectangle.RenderTransform>
 </Rectangle>
 </Canvas>

通過RenderTransform制定圖形的變換方式,RenderTransformOrigin="0.5,0.5",以圖形的中心點旋轉,以左上角爲準旋轉。這兩個屬性不限制於形狀,WPF的所有元素都可以用這兩個屬性。

<Button Canvas.Left="100" Canvas.Top="100" Width="101" Height="30" Content="testTransform">
  <Button.RenderTransform>
  <RotateTransform Angle="25"></RotateTransform>
  </Button.RenderTransform>
  <Button.Background>
  <SolidColorBrush Color="#FF7DBFFC"></SolidColorBrush>
  </Button.Background>
 </Button>

透明

WPF實現元素透明的方式

  • 設置元素的Opacity屬性。每個元素(包括形狀)都從UIElement基類繼承了Opacity屬性。不透明度是0到1之間的小數,1表示完全不透明(默認值),0表示完全透明。當使用這種方式設置不透明度時,設置會被整應用於整個元素的可見內容。
  • 設置畫刷的Opacity屬性。每個畫刷也從Brush基類繼承了Opacity屬性。可使用0到1之間的值設置該屬性,以控制使用畫刷繪製的內容的透明度,不管是固定顏色畫刷、漸變畫刷,還是某種類型的紋理或圖像畫刷。因爲可爲形狀的Stroke和Fill屬性使用不同的畫刷,所以可爲邊框和表面的不同區域設置不同的透明度。
  • 使用具有透明Alpha值的顏色。所有alpha值小於255的顏色都是半透明的。例如可在SolidColorBrush畫刷中使用半透明顏色,並使用該畫刷繪製元素的前景內容和背景表面。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對神馬文庫的支持。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章