Borda

O .NET Multi-Platform App UI (.NET MAUI) Border é um controle de contêiner que desenha uma borda, plano de fundo ou ambos, ao redor 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 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. A propriedade é o ContentProperty da classe Border e, portanto, não precisa ser definido explicitamente a 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 IShape equivalente. 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 desta propriedade é 1.0.
• StrokeDashArray, do tipo DoubleCollection, que representa uma coleção de valores double que indicam o padrão de traços e espaços que compõem a borda.
• StrokeDashOffset, do tipo double, especifica a distância dentro do padrão de traços onde um traço começa. O valor padrão desta 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 PenLineJoin, especifica o tipo de junção que é usado nos vértices da forma de traçado. O valor padrão dessa propriedade é PenLineJoin.Miter.
• StrokeMiterLimit, do tipo double, especifica o limite na proporção do comprimento do malhete para metade da espessura do traçado. O valor padrão desta propriedade é 10.0.

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

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

Criar uma borda

Para desenhar uma borda, crie um objeto Border e defina suas propriedades para definir sua aparência. Em seguida, defina seu filho como 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 StrokeShape pode ser especificado usando a sintaxe da 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 superior esquerdo e inferior direito arredondados é desenhada ao redor de um Label. A forma da borda é definida como um objeto RoundRectangle, cuja propriedade CornerRadius é definida com um valor Thickness que permite o controle independente de cada canto do retângulo:

Como a propriedade Stroke é 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 ao redor de um Label:

Definir a forma da borda com uma cadeia de caracteres

No XAML, o valor da propriedade StrokeShape pode ser definido usando a sintaxe da marca de propriedade ou como um string. São valores string válidos para a propriedade StrokeShape:

• Ellipse
• Line, seguido por um ou dois pares de coordenadas x e y. Por exemplo, Line 10 20 desenha uma linha de (10,20) para (0,0) e Line 10 20, 100 120 desenha uma linha de (10,20) para (100,120).
• Path, seguido por dados de sintaxe da 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 da marcação de caminho, consulte Sintaxe da 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.

Os pares de coordenadas x e y baseados em String 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 válidos. Os pares de coordenadas serão convertidos em objetos Point que definem as propriedades X e Y, do tipo double.