Sdílet prostřednictvím

Border

  • Článek

Rozhraní .NET Multi-Platform App UI (.NET MAUI) Border je ovládací prvek kontejneru, který kolem jiného ovládacího prvku nakreslí ohraničení, pozadí nebo obojí. A Border může obsahovat pouze jeden podřízený objekt. Pokud chcete umístit ohraničení kolem více objektů, zabalte je do objektu kontejneru, jako je například rozložení. Další informace o rozloženích najdete v tématu Rozložení.

Border definuje následující vlastnosti:

  • Content, typu IView, představuje obsah, který se má zobrazit v ohraničení. Tato vlastnost je ContentProperty třída Border , a proto není nutné explicitně nastavit z XAML.
  • Padding, typu Thicknesspředstavuje vzdálenost mezi ohraničením a jeho podřízeným prvkem.
  • StrokeShape, typu IShape, popisuje tvar ohraničení. Tato vlastnost má použitý převaděč typů, který může převést řetězec na jeho ekvivalent IShape. Výchozí hodnota je Rectangle. Border Proto bude ve výchozím nastavení obdélníkový.
  • Stroke, typu Brushoznačuje štětec použitý k malování ohraničení.
  • StrokeThickness, typu doubleoznačuje šířku ohraničení. Výchozí hodnota této vlastnosti je 1,0.
  • StrokeDashArray, typu DoubleCollection, který představuje kolekci double hodnot, které označují vzor pomlček a mezer, které tvoří ohraničení.
  • StrokeDashOffset, typu double, určuje vzdálenost v pomlčkovém vzoru, kde začíná pomlčka. Výchozí hodnota této vlastnosti je 0,0.
  • StrokeLineCap, typu PenLineCap, popisuje obrazec na začátku a konci jeho čáry. Výchozí hodnota této vlastnosti je PenLineCap.Flat.
  • StrokeLineJoin, typu PenLineJoin, určuje typ spojení, které se používá na vrcholech tvaru tahu. Výchozí hodnota této vlastnosti je PenLineJoin.Miter.
  • StrokeMiterLimit, typu double, určuje omezení poměru délky miteru na polovinu tloušťky tahu. Výchozí hodnota této vlastnosti je 10,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Důležité

Při vytváření ohraničení pomocí obrazce, například obrazce Rectangle nebo Polygon, by se měly použít pouze zavřené obrazce. Otevřené obrazce, jako Line jsou například nepodporované.

Další informace ovlastnostech

Vytvoření ohraničení

Pokud chcete nakreslit ohraničení, vytvořte Border objekt a nastavte jeho vlastnosti tak, aby definovaly jeho vzhled. Potom nastavte jeho podřízený ovládací prvek, do kterého má být ohraničení přidáno.

Následující příklad XAML ukazuje, jak nakreslit ohraničení kolem 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 Případně můžete hodnotu vlastnosti zadat pomocí syntaxe značky vlastnosti:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu je ohraničení se zaobleným levým horním a pravým dolním rohem nakresleno Labelkolem . Obrazec ohraničení je definován jako RoundRectangle objekt, jehož CornerRadius vlastnost je nastavena na Thickness hodnotu, která umožňuje nezávislé řízení každého rohu obdélníku:

Ohraničení kolem snímku obrazovky s popiskem

Vzhledem k tomu, že Stroke vlastnost je typu Brush, ohraničení lze také nakreslit pomocí přechodů:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu je ohraničení, které používá lineární přechod kolem Label:

Lineární přechodové ohraničení kolem snímku obrazovky s popiskem

Definování obrazce ohraničení pomocí řetězce

V jazyce XAML lze hodnotu StrokeShape vlastnosti definovat pomocí syntaxe značek vlastností nebo jako string. Platné string hodnoty pro StrokeShape vlastnost jsou:

  • Ellipse
  • Linenásledované jedním nebo dvěma dvojicemi souřadnic x a y. Například Line 10 20 nakreslí čáru z (10 20) na (0,0) a Line 10 20, 100 120 nakreslí čáru z (10 20) do (100 120).
  • Pathnásledovaná daty syntaxe značek cesty. Například Path M 10,100 L 100,100 100,50Z nakreslí trojúhelníkové ohraničení. Další informace o syntaxi značek cesty naleznete v tématu Syntaxe značek cesty.
  • Polygonnásledované kolekcí párů souřadnic x a y. Například Polygon 40 10, 70 80, 10 50.
  • Polylinenásledované dvojicemi souřadnic x- a y kolekce. Například Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
  • Rectangle
  • RoundRectanglevolitelně následovaný rohovým poloměrem. Například RoundRectangle 40 nebo RoundRectangle 40,0,0,40.

Důležité

I když Line je platná string hodnota vlastnosti StrokeShape , její použití není podporováno.

String-based x- and y-coordinate pairs can be delimited by a single čárka and/or one or more spaces. Například 40 10 70 80 a 40 10, 70 80 jsou obě platné. Dvojice souřadnic budou převedeny na Point objekty, které definují X a Y vlastnosti typu double.