Rahmen

Die .NET Multiplatform App UI (.NET MAUI) Border ist ein Container-Steuerelement, das einen Rahmen, einen Hintergrund oder beides um ein anderes Steuerelement zeichnet. Ein Border kann nur ein untergeordnetes Objekt enthalten. Wenn Sie mehrere Objekte mit einem Rahmen versehen wollen, umhüllen Sie sie mit einem Containerobjekt, wie etwa einem Layout. Weitere Informationen zu Layouts finden Sie unter -Layouts.

Border definiert die folgenden Eigenschaften:

• Content, vom Typ IView, steht für den Inhalt, der im Rahmen angezeigt werden soll. Diese Eigenschaft ist die ContentProperty der Border-Klasse und muss daher nicht explizit in XAML gesetzt werden.
• Padding, vom Typ Thickness, steht für den Abstand zwischen dem Rahmen und seinem untergeordneten Element.
• StrokeShape, vom Typ IShape, beschreibt die Form des Rahmens. Auf diese Eigenschaft wird ein Typkonverter angewendet, der eine Zeichenkette in ihr Äquivalent IShape umwandeln kann. Der Standardwert lautet Rectangle. Daher wird ein Border standardmäßig rechteckig sein.
• Stroke, vom Typ Brush, gibt den Pinsel an, mit dem der Rahmen gemalt wird.
• StrokeThickness, vom Typ double, gibt die Breite des Rahmens an. Der Standardwert dieser Eigenschaft ist 1.0.
• StrokeDashArray, vom Typ DoubleCollection, der eine Sammlung von double-Werten darstellt, die das Muster der Striche und Lücken angeben, aus denen der Rand besteht.
• StrokeDashOffset, vom Typ double, gibt den Abstand innerhalb des Strichmusters an, in dem ein Strich beginnt. Der Standardwert dieser Eigenschaft ist 0.0.
• StrokeLineCap, vom Typ PenLineCap, beschreibt die Form am Anfang und am Ende seiner Zeile. Der Standardwert dieser Eigenschaft ist PenLineCap.Flat.
• StrokeLineJoin, vom Typ PenLineJoin, gibt die Art der Verbindung an, die an den Scheitelpunkten der Strichform verwendet wird. Der Standardwert dieser Eigenschaft ist PenLineJoin.Miter.
• StrokeMiterLimit, vom Typ double, gibt das Verhältnis der Gehrungslänge zur halben Strichdicke an. Der Standardwert dieser Eigenschaft ist 10.0.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Weitere Informationen zu den Eigenschaften, die die Form und den Strich des Rahmens steuern, finden Sie unter Formen.

Erstellen eines Rahmens

Um einen Rahmen zu zeichnen, erstellen Sie ein Border-Objekt und legen seine Eigenschaften fest, um sein Aussehen zu definieren. Setzen Sie dann das untergeordnete Element auf das Steuerelement, dem der Rahmen hinzugefügt werden soll.

Das folgende XAML-Beispiel zeigt, wie man einen Rahmen um ein Label zeichnet:

<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>

Alternativ kann der StrokeShape-Eigenschaftswert mithilfe der Property-Tag-Syntax angegeben werden:

<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>

Der entsprechende C#-Code lautet:

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
    }
};

In diesem Beispiel wird ein Rahmen mit abgerundeten Ecken oben links und unten rechts um ein Label gezeichnet. Die Rahmenform ist als RoundRectangle-Objekt definiert, dessen CornerRadius-Eigenschaft auf einen Thickness-Wert gesetzt ist, der eine unabhängige Kontrolle jeder Ecke des Rechtecks ermöglicht:

Da die Eigenschaft Stroke vom Typ Brush ist, können Rahmen auch mit Farbverläufen gezeichnet werden:

<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>

Der entsprechende C#-Code lautet:

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
    }
};

In diesem Beispiel wird ein Rahmen mit einem linearen Farbverlauf um ein Label gezeichnet:

Definieren Sie die Rahmenform mit einer Zeichenabfolge

In XAML kann der Wert der StrokeShape-Eigenschaft mithilfe der EigenschaftsTag-Syntax oder als string definiert werden. Gültige string-Werte für die StrokeShape-Eigenschaft sind:

• Ellipse
• Line, gefolgt von einem oder zwei x- und y-Koordinatenpaaren. Zum Beispiel zeichnet Line 10 20 eine Linie von (10,20) nach (0,0), und Line 10 20, 100 120 zeichnet eine Linie von (10,20) nach (100,120).
• Path, gefolgt von den Syntaxdaten vom Pfadmarkup. Mit Path M 10,100 L 100,100 100,50Z wird zum Beispiel ein dreieckiger Rahmen gezeichnet. Weitere Informationen über die Syntax der Pfadmarkup finden Sie unter Pfadmarkupsyntax.
• Polygon, gefolgt von einer Sammlung von x- und y-Koordinatenpaaren. Beispielsweise Polygon 40 10, 70 80, 10 50.
• Polyline, gefolgt von einer Sammlung von x- und y-Koordinatenpaaren. Beispielsweise Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
• Rectangle
• RoundRectangle, optional gefolgt von einem Eckenradius. Zum Beispiel: RoundRectangle 40 oder RoundRectangle 40,0,0,40.

String-basierte x- und y-Koordinatenpaare können durch ein einzelnes Komma und/oder ein oder mehrere Leerzeichen abgegrenzt werden. Zum Beispiel sind „40,10 70,80“ und „40 10, 70 80“ beide gültig. Koordinatenpaare werden in Point-Objekte umgewandelt, die X- und Y-Eigenschaften vom Typ double definieren.