形狀
在wpf中形狀繼承自frameworkelement類。因此，形狀是元素，有如下好處。
- 形狀繪制自身。不需要管理無效的情況和繪圖過程。例如，移動內容，改變窗口尺寸或改變屬性時，不需要手動重新繪制圖形。
- 使用與其他元素相同的方式組織形狀。在可任何布局容器中放置圖形。（canvas明細是最有用的容器，因為他允許在特性的坐標位置放置形狀，當構建復雜的具有多個部分的圖畫時，很重要。）
- 圖形支持與其他元素相同的事件。如焦點、鍵盤、鼠標事件。
shape類子類
矩形和橢圓
需要設置height和width屬性，設置fill或stroke屬性，如未設置fill或stroke屬性，形狀不會顯示。
|
1
2
3
4
|
<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元素。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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> |
直線
|
1
|
<line stroke="blue" x1="0" y1="10" x2="10" y2="100"></line> |
折線
|
1
|
<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> |
多邊形
|
1
|
<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就填充。
點劃線（虛線）
|
1
|
<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個單位的空白。
畫刷
畫刷填充區域，不干是元素的背景色、前景色以及邊框，還是形狀內部填充和筆畫。
- 畫刷支持更改通知?；A自freezable類。因此，如果改了畫刷，任何使用畫刷的元素都會重新繪制自身。
- 畫刷支持部分透明。為此，只需修改opacity屬性。
常用畫刷
|
名稱
|
說明
|
| solidcolorbrush | 使用單一的連續顏色繪制區域。 |
| lineargradientbrush | 使用漸變填充繪制區域，漸變的陰影填充從一種顏色變化到另一種顏色（并且，也可以在變化到第3種顏色之后變化到第4種。） |
| radialgradientbrush | 使用徑向漸變填充繪制區域，除了在圓形模式中從中心點向外部輻射漸變之外，這種畫刷和漸變畫刷類似。 |
| imagebrush | 使用可被拉伸、縮放或平鋪的圖像繪制區域。 |
| drawingbrush | 使用drawing對象繪制區域，改對象可包含已經定義的形狀或位圖。 |
| visualbrush |
使用visual對象繪制區域。因為wpf的元素都繼承自visual類，所以可使用該畫刷將部分用戶界面復制到另一個局域。當創建特殊效果時，
改畫刷特別有用。
|
| bitmapcachebrush | 使用從visual對象緩存的內容繪制區域。這種畫刷和visualbrush類似，但如果需要在多個地方重用圖形內容或者頻繁地重繪圖形內容，這種畫刷更高效。 |
lineargradientbrush
|
1
2
3
4
5
6
7
8
9
10
|
<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
|
1
2
3
4
5
6
7
8
|
<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移動圖形，這樣做的結果和先移動再旋轉的結果是不同的。 |
應用場景
- 傾斜形狀。
- 重復形狀。
- 動畫。通過變換可創建大量精致的效果。例如，旋轉形狀、將圖形從一個地方移動到另一個地方。
|
1
2
3
4
5
6
7
|
<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的所有元素都可以用這兩個屬性。
|
1
2
3
4
5
6
7
8
|
<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畫刷中使用半透明顏色，并使用該畫刷繪制元素的前景內容和背景表面。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對服務器之家的支持。
原文鏈接：https://www.cnblogs.com/lovezhangyu/p/10309098.html
