Udostępnij za pośrednictwem

Border

  • Artykuł

Wieloplatformowy interfejs użytkownika aplikacji platformy .NET (.NET MAUI) Border to kontrolka kontenera, która rysuje obramowanie, tło lub oba elementy wokół innej kontrolki. Obiekt Border może zawierać tylko jeden obiekt podrzędny. Jeśli chcesz umieścić obramowanie wokół wielu obiektów, opakuj je w obiekt kontenera, taki jak układ. Aby uzyskać więcej informacji na temat układów, zobacz Układy.

Border definiuje następujące właściwości:

  • Content, typu IView, reprezentuje zawartość do wyświetlenia na obramowanie. Ta właściwość jest ContentProperty klasą Border i dlatego nie musi być jawnie ustawiona z języka XAML.
  • Padding, typu Thickness, reprezentuje odległość między obramowaniem a jego elementem podrzędnym.
  • StrokeShape, typu IShape, opisuje kształt obramowania. Ta właściwość ma zastosowany konwerter typów, który może przekonwertować ciąg na jego odpowiednik IShape. Jego wartością domyślną jest Rectangle. W związku z Border tym prostokąt będzie domyślnie prostokątny.
  • Stroke, typu Brush, wskazuje szczotkę używaną do malowania obramowania.
  • StrokeThickness, typu double, wskazuje szerokość obramowania. Wartość domyślna tej właściwości to 1.0.
  • StrokeDashArray, typu DoubleCollection, który reprezentuje kolekcję double wartości, które wskazują wzorzec kreski i przerwy tworzące obramowanie.
  • StrokeDashOffset, typu double, określa odległość w deseniu kreski, w którym rozpoczyna się kreska. Wartość domyślna tej właściwości to 0,0.
  • StrokeLineCap, typu PenLineCap, opisuje kształt na początku i na końcu jego wiersza. Wartość domyślna tej właściwości to PenLineCap.Flat.
  • StrokeLineJoin, typu PenLineJoin, określa typ sprzężenia używanego w wierzchołkach kształtu pociągnięcia. Wartość domyślna tej właściwości to PenLineJoin.Miter.
  • StrokeMiterLimit, typu double, określa limit stosunku długości miter do połowy grubości pociągnięcia. Wartość domyślna tej właściwości to 10.0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Ważne

Podczas tworzenia obramowania przy użyciu kształtu, takiego jak Rectangle lub Polygon, należy użyć tylko zamkniętych kształtów. W związku z tym otwarte kształty, takie jak Line nieobsługiwane.

Aby uzyskać więcej informacji na temat właściwości sterujących kształtem i pociągnięciem obramowania, zobacz Kształty.

Tworzenie obramowania

Aby narysować obramowanie, utwórz Border obiekt i ustaw jego właściwości, aby zdefiniować jego wygląd. Następnie ustaw element podrzędny na kontrolkę, do której należy dodać obramowanie.

W poniższym przykładzie XAML pokazano, jak narysować obramowanie wokół elementu 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>

Alternatywnie StrokeShape można określić wartość właściwości przy użyciu składni tagu właściwości:

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

Równoważny kod języka C# to:

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

W tym przykładzie obramowanie z zaokrąglonymi lewym górnymi i prawym dolnymi rogami jest rysowane wokół Labelelementu . Kształt obramowania jest definiowany jako RoundRectangle obiekt, którego CornerRadius właściwość jest ustawiona na wartość, która umożliwia niezależną Thickness kontrolę każdego rogu prostokąta:

Obramowanie wokół zrzutu ekranu etykiety.

Stroke Ponieważ właściwość ma typ Brush, można również narysować obramowania przy użyciu gradientów:

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

Równoważny kod języka C# to:

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

W tym przykładzie obramowanie używające gradientu liniowego jest rysowane wokół elementu Label:

Liniowe obramowanie gradientu wokół zrzutu ekranu etykiety.

Definiowanie kształtu obramowania za pomocą ciągu

W języku XAML wartość StrokeShape właściwości można zdefiniować przy użyciu składni tagu właściwości lub jako string. Prawidłowe string wartości właściwości StrokeShape to:

  • Ellipse
  • Line, a następnie jedną lub dwie pary współrzędnych x i y. Na przykład Line 10 20 rysuje linię z (10 20) do (0,0) i Line 10 20, 100 120 rysuje linię z (10 20) do (100 120).
  • Path, a następnie dane składni znaczników ścieżki. Na przykład Path M 10,100 L 100,100 100,50Z narysuje trójkątne obramowanie. Aby uzyskać więcej informacji na temat składni znaczników ścieżki, zobacz Składnia znaczników ścieżki.
  • Polygon, a następnie kolekcja par współrzędnych x i y. Na przykład Polygon 40 10, 70 80, 10 50.
  • Polyline, a następnie pary współrzędnych x i y. Na przykład Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
  • Rectangle
  • RoundRectangle, opcjonalnie, po którym następuje promień rogu. Na przykład: RoundRectangle 40 lub RoundRectangle 40,0,0,40.

Ważne

Chociaż Line jest prawidłową string wartością właściwości StrokeShape , jej użycie nie jest obsługiwane.

StringPary współrzędnych x i y mogą być rozdzielane przecinkami i/lub co najmniej jedną spacją. Na przykład wartości "40 10 70 80" i "40 10, 70 80" są prawidłowe. Pary współrzędnych zostaną przekonwertowane na Point obiekty definiujące X i Y właściwości typu double.