圖形
.NET 多平臺應用程式 UI (.NET MAUI) Shape 是 一種類型 View ,可讓您將圖形繪製到畫面。 Shape 對象可以在版面配置類別和大部分控件內使用,因為 Shape 類別衍生自 View 類別。 命名空間中 Microsoft.Maui.Controls.Shapes 提供 .NET MAUI Shapes。
Shape 會定義下列屬性:
- Aspect型 Stretch別為 的 ,描述圖形如何填滿其配置的空間。 此屬性的預設值為
Stretch.None
。 - Fill型 Brush別為 的筆刷,表示用來繪製圖形內部的筆刷。
- Stroke型 Brush別為 的筆刷,表示用來繪製圖形外框的筆刷。
- StrokeDashArray型
DoubleCollection
別為 的 ,表示值集合double
,表示用來框出圖形的虛線和間距圖樣。 - StrokeDashOffset型
double
別為 的 ,指定虛線開始的虛線圖樣內的距離。 此屬性的預設值為 0.0。 - StrokeDashPattern型
float[]
別為 的 ,表示繪製圖形筆劃時所使用的虛線和間距圖樣。 - StrokeLineCap類型 PenLineCap為 的 ,描述線條或線段開頭和結尾處的圖形。 此屬性的預設值為
PenLineCap.Flat
。 - StrokeLineJoin型 PenLineJoin別為 的 ,指定在圖形頂點使用的聯結類型。 此屬性的預設值為
PenLineJoin.Miter
。 - StrokeMiterLimit型
double
別為 的 ,指定將Miter長度的比率限製為圖形的一半 StrokeThickness 。 此屬性的預設值為10.0。 - StrokeThickness型
double
別為 的 ,表示圖形外框的寬度。 此屬性的預設值為 1.0。
這些屬性是由 BindableProperty 物件所支援,這表示這些屬性可以是數據系結的目標,並設定樣式。
.NET MAUI 會定義衍生自 Shape 類別的一些物件。 這些是 Ellipse、Line、Path、、Polygon、RectanglePolyline、 和 RoundRectangle。
小畫家 圖形
Brush 物件可用來繪製圖形的 Stroke 和 Fill:
<Ellipse Fill="DarkBlue"
Stroke="Red"
StrokeThickness="4"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Start" />
在此範例中,會指定的 Ellipse 筆劃和填滿:
如果您未為 指定 Brush 物件 Stroke,或如果您設定 StrokeThickness 為0,則不會繪製圖形周圍的框線。
如需對象的詳細資訊 Brush ,請參閱 筆刷。 如需有效 Color
值的詳細資訊,請參閱 色彩。
伸展圖形
Shape 物件具有 Aspect 類型的 Stretch屬性。 這個屬性會決定如何 Shape 延展對象的內容,以填滿 Shape 物件的版面配置空間。 Shape物件的版面配置空間是 .NET MAUI 配置系統所配置的空間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
HeightRequestWidthRequest 因此,對象的內容會重設大小以符合目的地維度,同時保留外觀比例:
繪製虛線圖形
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" />
在此範例中,深藍色聚合線條在其頂點上已四捨五入聯結: