Xamarin.Forms 形狀
Shape
(部分機器翻譯) 是一種 View
類型 (部分機器翻譯),可讓您將圖形繪製到螢幕。 Shape
對象可以在版面配置類別和大部分控件內使用,因為 Shape
類別衍生自 View
類別。
Xamarin.Forms圖形可在 Xamarin.Forms.Shapes
iOS、Android、macOS、通用 Windows 平台 (UWP) 和 Windows Presentation Foundation (WPF) 的命名空間中使用。
Shape
會定義下列屬性:
Aspect
型Stretch
別為 的 ,描述圖形如何填滿其配置的空間。 此屬性的預設值為Stretch.None
。Fill
型Brush
別為 的筆刷,表示用來繪製圖形內部的筆刷。Stroke
型Brush
別為 的筆刷,表示用來繪製圖形外框的筆刷。StrokeDashArray
型DoubleCollection
別為 的 ,表示值集合double
,表示用來框出圖形的虛線和間距圖樣。StrokeDashOffset
型double
別為 的 ,指定虛線開始的虛線圖樣內的距離。 此屬性的預設值為 0.0。StrokeLineCap
類型PenLineCap
為 的 ,描述線條或線段開頭和結尾處的圖形。 此屬性的預設值為PenLineCap.Flat
。StrokeLineJoin
型PenLineJoin
別為 的 ,指定在圖形頂點使用的聯結類型。 此屬性的預設值為PenLineJoin.Miter
。StrokeMiterLimit
型double
別為 的 ,指定將Miter長度的比率限製為圖形的一半StrokeThickness
。 此屬性的預設值為10.0。StrokeThickness
型double
別為 的 ,表示圖形外框的寬度。 此屬性的預設值為 1.0。
這些屬性是由 BindableProperty
物件所支援,這表示這些屬性可以是數據系結的目標,並設定樣式。
Xamarin.Forms 定義衍生自 Shape
類別的一些物件。 這些是 Ellipse
、Line
、Path
、、Polyline
Polygon
、 和 Rectangle
。
繪製圖形
Brush
物件可用來繪製圖形的 Stroke
和 Fill
:
<Ellipse Fill="DarkBlue"
Stroke="Red"
StrokeThickness="4"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Start" />
在此範例中,會指定的 Ellipse
筆劃和填滿:
重要
Brush
物件會使用型別轉換子,讓 Color
值能夠指定給 Stroke
屬性。
如果您未為 指定 Brush
物件 Stroke
,或如果您設定 StrokeThickness
為0,則不會繪製圖形周圍的框線。
如需對象的詳細資訊 Brush
,請參閱 Xamarin.Forms 筆刷。 如需有效 Color
值的詳細資訊,請參閱 中的 Xamarin.Forms色彩。
伸展圖形
Shape
物件具有 Aspect
類型的 Stretch
屬性。 這個屬性會決定如何 Shape
延展對象的內容,以填滿 Shape
物件的版面配置空間。 Shape
物件的版面配置空間是配置系統所Xamarin.Forms配置的空間Shape
量,因為明確WidthRequest
和HeightRequest
設定,或是因為其 HorizontalOptions
和 VerticalOptions
設定。
Stretch
列舉會定義下列成員:
None
,表示內容會保留其原始大小。 此為Shape.Aspect
屬性的預設值。Fill
,表示內容重設大小以填滿目的地維度。 不會保留長寬比。Uniform
,表示內容會重設大小以符合目的地維度,同時保留外觀比例。UniformToFill
,表示內容會重設大小以填滿目的地維度,同時保留外觀比例。 如果目的矩形的長寬比與來源不同,則會裁剪來源內容使其符合目的尺寸。
下列 XAML 示範如何設定 Aspect
屬性:
<Path Aspect="Uniform"
Stroke="Yellow"
Fill="Red"
BackgroundColor="LightGray"
HorizontalOptions="Start"
HeightRequest="100"
WidthRequest="100">
<Path.Data>
<!-- Path data goes here -->
</Path.Data>
</Path>
在此範例中, Path
物件會繪製心臟。 物件的 Path
和 屬性會設定為100個裝置獨立單位,且其 Aspect
屬性設定為 Uniform
HeightRequest
WidthRequest
因此,對象的內容會重設大小以符合目的地維度,同時保留外觀比例:
繪製虛線圖形
Shape
物件具有 StrokeDashArray
類型的 DoubleCollection
屬性。 這個屬性代表值集合 double
,表示用來勾勒圖形的虛線和間距圖樣。 DoubleCollection
是 ObservableCollection
值的 double
。 集合 double
中的每個都會指定虛線或間距的長度。 集合中位於索引 0 的第一個專案會指定虛線的長度。 集合中位於索引 1 的第二個專案會指定間距的長度。 因此,具有偶數索引值的物件會指定虛線,而具有奇數索引值的物件則指定間距。
Shape
物件也有 StrokeDashOffset
類型的 double
屬性,指定虛線開始的破折號圖樣內的距離。 無法設定這個屬性會導致 Shape
具有穩固的外框。
您可以藉由設定 StrokeDashArray
和 StrokeDashOffset
屬性來繪製虛線圖形。 屬性 StrokeDashArray
應該設定為一或多個 double
值,每對以單一逗號和/或一或多個空格分隔。 例如,“0.5 1.0” 和 “0.5,1.0” 都是有效的。
下列 XAML 範例示範如何繪製虛線矩形:
<Rectangle Fill="DarkBlue"
Stroke="Red"
StrokeThickness="4"
StrokeDashArray="1,1"
StrokeDashOffset="6"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Start" />
在此範例中,繪製具有虛線筆劃的填滿矩形:
控制線結尾
線條有三個部分:開始上限、線條主體和結尾上限。 開始和結束端點描述線條或線段開頭和結尾處的圖形。
Shape
物件具有 StrokeLineCap
類型的 PenLineCap
屬性,描述線條或線段開頭和結尾處的圖形。 PenLineCap
列舉會定義下列成員:
Flat
,表示不會延伸超過該行最後一點的上限。 這相當於沒有行上限,而且 是 屬性的StrokeLineCap
預設值。Square
,表示高度等於線條粗細且長度等於線條粗細一半的矩形。Round
,表示直徑等於線條粗細的半圓形。
重要
StrokeLineCap
如果您在沒有起點或終點的圖形上設定屬性,則屬性不會有任何作用。 例如,如果您在 或 Rectangle
上Ellipse
設定此屬性,則此屬性沒有任何作用。
下列 XAML 示範如何設定 StrokeLineCap
屬性:
<Line X1="0"
Y1="20"
X2="300"
Y2="20"
StrokeLineCap="Round"
Stroke="Red"
StrokeThickness="12" />
在此範例中,紅色線條會在行的開頭和結尾四捨五入:
控制行聯結
Shape
物件具有 StrokeLineJoin
類型的 PenLineJoin
屬性,指定圖形頂點所使用的聯結類型。 PenLineJoin
列舉會定義下列成員:
Miter
,表示一般角頂點。 此為StrokeLineJoin
屬性的預設值。Bevel
,表示斜面頂點。Round
,表示四捨五入頂點。
注意
StrokeLineJoin
當 屬性設定為 Miter
時,StrokeMiterLimit
屬性可以設定為 double
,以限制圖形中線條聯結的錯位長度。
下列 XAML 示範如何設定 StrokeLineJoin
屬性:
<Polyline Points="20 20,250 50,20 120"
Stroke="DarkBlue"
StrokeThickness="20"
StrokeLineJoin="Round" />
在此範例中,深藍色聚合線條在其頂點上已四捨五入聯結: