探討 Silverlight XAML 橢圓形圖案物件(2/4)

摘要:探討 Silverlight XAML 橢圓形圖案物件(2/4)

本文將討論在 Microsoft Expression Blend 2 中,能夠於「Properties」索引標籤之「Appearance」面板中所能設定的屬性(如圖表 1 所示)。


圖表 1


屬性 Opacity 用於設定橢圓形的透明度(Opacity 或稱為Transparency),可設定值介於 0.0(完全透明)到 1.0(完全不透明,此為預設值)。

 附註:
 當我們使用 16 進位的 8 位數表示法(#aarrggbb)或 4 位數表示法(#argb)來設定屬性 Fill 的色彩時,最前面的數值 aa 與 a 是用來描述 Alpha 值,也就是所謂的色彩透明度。當 Alpha 值為 000 時,表示顏色是完全透明的;當 Alpha 值為 FFF 時,則表示顏色是完全不透明的。

屬性 Visibility 用來決定要顯示或隱藏橢圓形,可設定值說明如下:

qCollapsed
 


此表示不顯示橢圓形,而且不保留橢圓形圖案所需的空間,也就是說,在畫布上將看不到橢圓形圖案,而且它也不會佔用畫布的任何空間,此意味者,將物件的 Visibility 屬性設定成 Collapsed 時,將不會耗費資源來呈現這個物件。

 

qVisible
 
此表示橢圓形圖案會顯示出來,此為預設值。

屬性 StrokeThickness 用於取得或決定外框的粗細(也就是寬度),其設定值是一個 Double 值。預設值為 0.0,表示不指定外框的寬度。一般來說,將外框的粗細設定為圖形寬度或高度的一半時,外框就會填滿整個圖案的內部,這表示該物件所指定的 Fill 屬性將不會發生效用。

 請注意:
 如果沒有設定 StrokeThickness 屬性,但是卻使用 Stroke 屬性來採用特定的 Brush(筆刷)來繪製圖案外框時,屬性 StrokeThickness 將會自動被隱含設定成 1.0。如圖表 2 所示,我們可以讓該隱含的設定值轉換成本機值(Convert to Local Value),以便明確地描述 StrokeThickness 屬性值。


圖表 2

屬性 Stretch 取得或決定橢圓形圖案要如何縮放以便填滿它所持有的空間,預設值為 Fill 。有下列 4 種 Stretch 屬性列舉值可供選擇(請參考圖表 3 來比較其差異性):

qFill
 


圖案要填滿整個空間,但不會保持其長寬比(Aspect Ratio)。這是預設值。

 

qNone
 


維持圖案原本的大小,以便呈現原始面貌。

 

qUniform
 


以維持圖案原本的長寬比為前提,進行等比例的縮放。

 

qUniformToFill
 
既要維持圖案原本的長寬比又要填滿目的空間,因此在某些情況下,會裁切原始圖案,以便填滿整個目的空間。
 

    請注意:
 不同物件的 Stretch 屬性,其預設的屬性值不盡相同。比方說,圖案中的 EllipseRectangle 物件的 Stretch 屬性預設值都是 Fill,而其餘圖案物件之 Stretch 屬性預設值都是 None,至於 Image 物件的 Stretch 屬性預設值則是 Uniform



圖表 3

屬性 StrokeDashArray -+用來取得或設定繪製外框時,所要使用的虛線(亦稱為破折號)與間隔的長度。屬性值 DoubleCollection 是由 Double 值所組成的集合。簡單地說,每個 Double 值是用來設定破折號或是間隔的長度,這個長度是以相對於畫筆的寬度來計算。比方說,數字 1 所產生的破折號或間隔的長度會與筆刷的寬度一樣長。集合中索引位置為 0 的位置,也就是第 1 個項目的 Double 值,決定破折號的長度;索引位置為 1 的位置,亦即第 2 個項目的 Double 值,是用來決定間隔的長度。

這意味者,我們可以在屬性值 DoubleCollection 中,指定多個 Double 值,位於奇數索引位置的值,是決用來定破折號的長度;而偶數的索引位置,則是用來決定間隔的長度。當我們只有指定奇數個 Double 值時,Silverlight 會自動重複這些值,以便產生偶數個 Double 值,並依照所指定的破折號長度與間隔長度,繪製特定長度的外框虛線並保持所指定的間隔長度,依循這樣的順序繪製外框。例如,將屬性 StrokeDashArray 指定成 1,6,8,就等同於指定 1,6,8,1,6,8。

    請注意:
 在由屬性值 DoubleCollection 所組成的集合中,我們會使用一個空白字元或逗號(,)來加以區隔各個 Double 值,以便閱讀。當然,如果您要使用多個空白字元來區隔各個參數,也是可以的。

當兩個數字所代表的數值意義很明確時,可以不需要使用逗號或空白字元來加以分隔。比方說,5..8 分別表示數字 5.0 與 0.8。

屬性 StrokeDashCap 用於取得或決定要如何描繪破折號的端點(就是起點與終點)。有下列 4 種類型的 PenLineCap 屬性列舉值可供設定(如圖表 4 所示者,紅色部分即是這 4 種屬性列舉值所產生的額外區域):

 

qFlat
 


沒有在線段的端點延伸出任何區域,這是預設值。

 

qRound
 


在線段的端點產生一個以外框之寬度為直徑的半圓形。

 

qSquare
 


在線段的端點產生一個高度為外框之寬度、長度為外框寬度之一半的矩形。

 

qTriangle
 在線段的端點產生一個等腰直角三角,其底邊的長度恰為外框之寬度。



圖表 4



屬性 StrokeDashOffset 用於取得或決定破折號的起點位置,要偏移多少距離,這是一個 Double 值。提醒大家,偏移的距離可以是負的 Double 值,表示起點位置要往反方向移動。當然要設定屬性 StrokeDashArray 之後,再設定屬性 StrokeDashOffset 才有意義。

屬性 StrokeEndLineCap 用於取得或決定繪製外框時,終點的樣式。PenLineCap 屬性列舉值與屬性 StrokeDashCap 一樣,有 4 種類型可供選擇。預設值是 Flat

    請注意:
 如果您在未指定屬性 Stroke 的圖案、或是沒有起點與終點的圖案上(例如橢圓形),即使指定了屬性 StrokeEndLineCap,也不會產生任何效果。

屬性 StrokeLineJoin 用於取得或設定在頂點處(由相交的兩條線段所形成的點,亦稱為接角聯結處),要如何繪製外框,以便連接頂點兩邊的線段。有下列 3 種類型的 PenLineJoin 屬性列舉值可供設定(如圖表 5 所示):

qBevel
 


斜切聯結,就是在頂點處,形成一個斜面。這是預設值。

 

qMiter
 


斜接角聯結,就是在頂點處,形成一個尖角。於使用這個屬性值之後,還可以指定屬性 StrokeMiterLimit

 

qRound
 


圓角聯結,就是在頂點處,形成一個圓弧。

 

 請注意:
 如果您在一個不具備頂點的圖案(例如直線或橢圓形),且沒有指定屬性 Stroke 或是所指定的 StrokeThickness 屬性值過小(也就是外框過細),指定屬性 StrokeLineJoin 將不會發生任何效果。



圖表 5


屬性 StrokeMiterLimit 用來取得或決定頂點處的斜面長度與外框粗細的比率,簡單地說,這個斜接角突出限度的屬性可以控制斜接角聯結點的長度上限,當超過某一上限時,就會自動變成 斜切聯結。說的更白話一點,就是決定要如何繪製頂點處的尖角。例如要削剪矩形圖案的轉角處,讓轉角處的斜面接頭更為圓潤,或是讓轉角處形成銳角。提醒大 家,這個屬性值是一個永遠大於等於 1Double 值。

 附註:
 兩條相連接的線段端點,會形成一個有斜度的角。當這兩條線段所夾的角是銳角時,該斜面就有可能超過線段的寬度,以便描繪外框。

 請注意:
 只有指定屬性 StrokeLineJoin 的值為 Miter 時,設定屬性 StrokeMiterLimit 才有意義。

屬性 StrokeStartLineCap 用於取得或決定繪製外框時,起點的樣式。PenLineCap 屬性列舉值與屬性 StrokeDashCap 一樣,有 4 種類型可供選擇。預設值是 Flat

 請注意:
 如果您在未指定屬性 Stroke、沒有起點與終點的圖案上(例如橢圓形),即使指定了屬性 StrokeStartLineCap,也不會產生任何效果。

章立民研究室