Borda

O .NET Multi-platform App UI (.NET MAUI) Border é um controle de contêiner que desenha uma borda, plano de fundo ou ambos, em torno de outro controle. Um Border só pode conter um objeto filho. Se você quiser colocar uma borda ao redor de vários objetos, envolva-os em um objeto de contêiner, como um layout. Para obter mais informações sobre layouts, consulte Layouts.

Border define as propriedades a seguir:

• Content, do tipo IView, representa o conteúdo a ser exibido na borda. Essa propriedade é a da Border classe e, portanto, não precisa ser definida explicitamente a ContentProperty partir de XAML.
• Padding, do tipo Thickness, representa a distância entre a borda e seu elemento filho.
• StrokeShape, do tipo IShape, descreve a forma da borda. Essa propriedade tem um conversor de tipo aplicado a ela que pode converter uma cadeia de caracteres em seu equivalente IShape. Seu valor padrão é Rectangle. Portanto, um Border será retangular por padrão.
• Stroke, do tipo Brush, indica o pincel usado para pintar a borda.
• StrokeThickness, do tipo double, indica a largura da borda. O valor padrão dessa propriedade é 1.0.
• StrokeDashArray, do tipo DoubleCollection, que representa uma coleção de valores que indicam o padrão de double traços e lacunas que compõem a borda.
• StrokeDashOffset, do tipo double, especifica a distância dentro do padrão de traço onde um traço começa. O valor padrão dessa propriedade é 0,0.
• StrokeLineCap, do tipo PenLineCap, descreve a forma no início e no final de sua linha. O valor padrão dessa propriedade é PenLineCap.Flat.
• StrokeLineJoin, do tipo , especifica o tipo PenLineJoinde junção usado nos vértices da forma de traçado. O valor padrão dessa propriedade é PenLineJoin.Miter.
• StrokeMiterLimit, do tipo double, especifica o limite da relação entre o comprimento da esquadria e metade da espessura do traçado. O valor padrão dessa propriedade é 10.0.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser alvos de associações de dados e estilizadas.

Importante

Ao criar uma borda usando uma forma, como a Rectangle ou Polygon, somente formas fechadas devem ser usadas. Portanto, abra formas como Line não são suportadas.

Para obter mais informações sobre as propriedades que controlam a forma e o traçado da borda, consulte Formas.

Criar uma borda

Para desenhar uma borda, crie um Border objeto e defina suas propriedades para definir sua aparência. Em seguida, defina seu filho para o controle ao qual a borda deve ser adicionada.

O exemplo XAML a seguir mostra como desenhar uma borda ao redor de um 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>

Como alternativa, o valor da propriedade pode ser especificado usando a sintaxe da StrokeShape marca de propriedade:

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

Este é o código C# equivalente:

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

Neste exemplo, uma borda com cantos arredondados superior esquerdo e inferior direito é desenhada ao redor de um Labelarquivo . A forma de borda é definida como um objeto, cuja CornerRadius propriedade é definida como um RoundRectangleThickness valor que permite o controle independente de cada canto do retângulo:

Como a Stroke propriedade é do tipo Brush, as bordas também podem ser desenhadas usando gradientes:

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

Este é o código C# equivalente:

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

Neste exemplo, uma borda que usa um gradiente linear é desenhada em torno de um Label:

Definir a forma da borda com uma cadeia de caracteres

Em XAML, o valor da propriedade pode ser definido usando a StrokeShape sintaxe property-tag ou como um stringarquivo . Os valores válidos string para a StrokeShape propriedade são:

• Ellipse
• Line, seguido por um ou dois pares de coordenadas x e y. Por exemplo, desenha uma linha de (10,20) a (0,0) e Line 10 20, 100 120 desenha uma linha de (10,20) a (100,120Line 10 20).
• Path, seguido por dados de sintaxe de marcação de caminho. Por exemplo, Path M 10,100 L 100,100 100,50Z desenhará uma borda triangular. Para obter mais informações sobre a sintaxe de marcação de caminho, consulte Sintaxe de marcação de caminho.
• Polygon, seguido por uma coleção de pares de coordenadas x e y. Por exemplo, Polygon 40 10, 70 80, 10 50.
• Polyline, seguido por uma coleção de pares de coordenadas x e y. Por exemplo, Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
• Rectangle
• RoundRectangle, opcionalmente seguido por um raio de canto. Por exemplo, RoundRectangle 40 ou RoundRectangle 40,0,0,40.

Importante

Embora Line seja um valor válido string para a StrokeShape propriedade, seu uso não é suportado.

String-baseados em pares de coordenadas x e y podem ser delimitados por uma única vírgula e/ou um ou mais espaços. Por exemplo, "40,10 70,80" e "40 10, 70 80" são ambos válidos. Os pares de coordenadas serão convertidos em Point objetos que definem X e Y propriedades, do tipo double.