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 オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

重要

Rectangle や Polygon などの図形を使用して境界線を作成する場合は、閉じた図形のみを使用する必要があります。 そのため、Line などの開いた図形はサポートされていません。

境界線の図形とストロークを制御するプロパティの詳細については、「図形」をご覧ください。

境界線を作成する

境界線を描画するには、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 値に設定され、四角形の各コーナーを独立して制御できるようになります。

Border around a Label screenshot.

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 の周囲に描画されます。

Linear gradient border around a Label screenshot.

文字列を使用して罫線の図形を定義する

XAML では、StrokeShape プロパティの値は、プロパティ タグ構文を使用して、または string として定義できます。 StrokeShape プロパティの有効な string 値は次のとおりです。

  • Ellipse
  • Line の後に 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 のようにします。
  • Rectangle
  • RoundRectangle の後に、必要に応じて角の半径が続きます。 たとえば、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 オブジェクトに変換されます。