Border
.NET マルチプラットフォーム アプリ UI (.NET MAUI) Border は、別のコントロールの周囲に境界線、背景、またはその両方を描画するコンテナー コントロールです。 Border に含めることができる子オブジェクトは 1 つだけです。 複数のオブジェクトの周囲に境界線を置きたい場合は、それらをレイアウトなどのコンテナー オブジェクトで囲みます。 レイアウトの詳細については、「 のレイアウト」を参照してください。
Border には、次のプロパティが定義されています。
IView型のContentは、境界線に表示するコンテンツを表します。 このプロパティは、Border クラスのContentPropertyであるため、XAML から明示的に設定する必要はありません。Thickness型のPaddingは、境界線とその子要素の間の距離を表します。IShape型のStrokeShapeは、境界線の図形を表します。 このプロパティには、文字列を同等のIShapeに変換できる型コンバーターが適用されています。 既定値は Rectangle です。 したがって、Border は既定で四角形になります。- Brush 型の
Strokeは、境界線の描画に使用されるブラシを示します。 double型のStrokeThicknessは、境界線の幅を示します。 このプロパティの既定値は 1.0 です。DoubleCollection型のStrokeDashArrayは、境界線を構成するダッシュとギャップのパターンを示すdouble値のコレクションを表します。double型のStrokeDashOffsetは、ダッシュ パターン内のダッシュが始まる距離を指定します。 このプロパティの既定値は 0.0 です。PenLineCap型のStrokeLineCapは、その行の始点と終点の図形を表します。 このプロパティの既定値はPenLineCap.Flatです。PenLineJoin型のStrokeLineJoinは、ストローク図形の頂点で使用される結合の型を指定します。 このプロパティの既定値はPenLineJoin.Miterです。double型のStrokeMiterLimitは、ストロークの太さの半分に対するマイターの長さの比率の制限を指定します。 このプロパティの既定値は 10.0 です。
これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。
境界線の図形とストロークを制御するプロパティの詳細については、「図形」をご覧ください。
境界線を作成する
境界線を描画するには、Border オブジェクトを作成し、そのプロパティを設定して外観を定義します。 次に、その子を、罫線を追加するコントロールに設定します。
次の XAML の例は、Label の周囲に境界線を描画する方法を示しています。
<Border Stroke="#C49B33"
StrokeThickness="4"
StrokeShape="RoundRectangle 40,0,0,40"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
あるいは、StrokeShape プロパティ値は、プロパティ タグ構文を使用して指定できます。
<Border Stroke="#C49B33"
StrokeThickness="4"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Border.StrokeShape>
<RoundRectangle CornerRadius="40,0,0,40" />
</Border.StrokeShape>
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
同等の C# コードを次に示します。
using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...
Border border = new Border
{
Stroke = Color.FromArgb("#C49B33"),
Background = Color.FromArgb("#2B0B98"),
StrokeThickness = 4,
Padding = new Thickness(16, 8),
HorizontalOptions = LayoutOptions.Center,
StrokeShape = new RoundRectangle
{
CornerRadius = new CornerRadius(40, 0, 0, 40)
},
Content = new Label
{
Text = ".NET MAUI",
TextColor = Colors.White,
FontSize = 18,
FontAttributes = FontAttributes.Bold
}
};
この例では、左上隅と右下隅が丸い境界線を Label の周囲に描画します。 境界線の図形は RoundRectangle オブジェクトとして定義され、その CornerRadius プロパティは Thickness 値に設定され、四角形の各コーナーを独立して制御できるようになります。
Stroke プロパティは、Brush 型であるため、グラデーションを使用して境界線を描画することもできます。
<Border StrokeThickness="4"
StrokeShape="RoundRectangle 40,0,0,40"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Border.Stroke>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Orange"
Offset="0.1" />
<GradientStop Color="Brown"
Offset="1.0" />
</LinearGradientBrush>
</Border.Stroke>
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
同等の C# コードを次に示します。
using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...
Border gradientBorder = new Border
{
StrokeThickness = 4,
Background = Color.FromArgb("#2B0B98"),
Padding = new Thickness(16, 8),
HorizontalOptions = LayoutOptions.Center,
StrokeShape = new RoundRectangle
{
CornerRadius = new CornerRadius(40, 0, 0, 40)
},
Stroke = new LinearGradientBrush
{
EndPoint = new Point(0, 1),
GradientStops = new GradientStopCollection
{
new GradientStop { Color = Colors.Orange, Offset = 0.1f },
new GradientStop { Color = Colors.Brown, Offset = 1.0f }
},
},
Content = new Label
{
Text = ".NET MAUI",
TextColor = Colors.White,
FontSize = 18,
FontAttributes = FontAttributes.Bold
}
};
この例では、線形グラデーションを使用する境界線が Label の周囲に描画されます。
文字列を使用して罫線の図形を定義する
XAML では、StrokeShape プロパティの値は、プロパティ タグ構文を使用して、または string として定義できます。 StrokeShape プロパティの有効な string 値は次のとおりです。
EllipseLineの後に 1 つまたは 2 つの x 座標と y 座標のペアが続きます。 たとえば、Line 10 20は (10,20) から (0,0) までの線を描画し、Line 10 20, 100 120は (10,20) から (100,120) までの線を描画します。Pathの後にパス マークアップ構文データが続きます。 たとえば、Path M 10,100 L 100,100 100,50Zは三角形の境界線を描画します。 パス マークアップ構文の詳細については、「パス マークアップ構文」をご覧ください。Polygonの後に、x 座標と y 座標のペアのコレクションが続きます。 たとえば、Polygon 40 10, 70 80, 10 50のようにします。Polylineの後に、コレクションの x 座標と y 座標のペアが続きます。 たとえば、Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30のようにします。RectangleRoundRectangleの後に、必要に応じて角の半径が続きます。 たとえば、RoundRectangle 40またはRoundRectangle 40,0,0,40です。
重要
Line は StrokeShape プロパティの有効な string 値ですが、その使用はサポートされていません。
String ベースの x 座標と y 座標のペアは、1 つのコンマまたは 1 つ以上のスペースで区切ることができます。 たとえば、”40,10 70,80” と ”40 10, 70 80” はどちらも有効です。 座標ペアは、double 型の X および Y プロパティを定義する Point オブジェクトに変換されます。
.NET MAUI