Borde

  • Artículo

El Border de .NET Multi-platform App UI (.NET MAUI) es un control de contenedor que dibuja un borde, un fondo o ambos alrededor de otro control. Un Border solo puede contener un objeto secundario. Si quieres colocar un borde alrededor de varios objetos, ajústalos en un objeto contenedor, como un diseño. Para obtener más información sobre los diseños, consulta Diseños.

Border define las siguientes propiedades:

  • Content, de tipo IView, representa el contenido que se va a mostrar en el borde. Esta propiedad es la ContentProperty de la clase Border y, por tanto, no es necesario establecerla de forma explícita desde XAML.
  • Padding, de tipo Thickness, representa la distancia entre el borde y su elemento secundario.
  • StrokeShape, de tipo IShape, describe la forma del borde. Esta propiedad tiene un convertidor de tipos aplicado que puede convertir una cadena en su IShape equivalente. Su valor predeterminado es Rectangle. Por lo tanto, un Border será rectangular de forma predeterminada.
  • Stroke, de tipo Brush, indica el pincel usado para pintar el borde.
  • StrokeThickness, de tipo double, indica el ancho del borde. El valor predeterminado de esta propiedad es 1.0.
  • StrokeDashArray, de tipo DoubleCollection, que representa una colección de valores double que indican el patrón de guiones y huecos que componen el borde.
  • StrokeDashOffset, de tipo double, especifica la distancia dentro del patrón de guion donde comienza un guion. El valor predeterminado de esta propiedad es 0.0.
  • StrokeLineCap, de tipo PenLineCap, describe la forma al principio y al final de su línea. El valor predeterminado de esta propiedad es PenLineCap.Flat.
  • StrokeLineJoin, de tipo PenLineJoin, especifica el tipo de combinación que se usa en los vértices de la forma de trazo. El valor predeterminado de esta propiedad es PenLineJoin.Miter.
  • StrokeMiterLimit, de tipo double, especifica el límite en la relación de la longitud angular a la mitad del grosor del trazo. El valor predeterminado de esta propiedad es 10.0.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

Importante

Al crear un borde mediante una forma, como un Rectangle o Polygon, solo se deben usar formas cerradas. Por lo tanto, no se admiten formas abiertas, como una Line.

Para obtener más información sobre las propiedades que controlan la forma y el trazo del borde, consulta Formas.

Creación de un borde

Para dibujar un borde, crea un objeto Border y establece sus propiedades para definir su apariencia. Después, define su elemento secundario en el control al que debe agregarse el borde.

En el ejemplo XAML siguiente se muestra cómo dibujar un borde alrededor de una 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, el valor de propiedad StrokeShape se puede especificar con la sintaxis de etiqueta de propiedad:

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

El código de C# equivalente es el siguiente:

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

En este ejemplo, se dibuja un borde con las esquinas superior izquierda e inferior derecha redondeadas alrededor de una Label. La forma del borde se define como un objeto RoundRectangle, cuya propiedad CornerRadius se establece en un valor Thickness que permite el control independiente de cada esquina del rectángulo:

Border around a Label screenshot.

Dado que la propiedad Stroke es del tipo Brush, también se pueden dibujar bordes con degradados:

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

El código de C# equivalente es el siguiente:

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

En este ejemplo, se dibuja un borde que usa un degradado lineal alrededor de una Label:

Linear gradient border around a Label screenshot.

Definición de la forma de borde con una cadena

En XAML, el valor de la propiedad StrokeShape se puede definir con la sintaxis de etiqueta de propiedad o como string. Los valores string válidos para la propiedad StrokeShape son los siguientes:

  • Ellipse
  • Line, seguido de uno o dos pares de coordenadas x e y. Por ejemplo, Line 10 20 dibuja una línea de (10,20) a (0,0), y Line 10 20, 100 120 dibuja una línea de (10,20) a (100,120).
  • Path, seguido de los datos de sintaxis de marcado de trazado. Por ejemplo, Path M 10,100 L 100,100 100,50Z dibujará un borde triangular. Para obtener más información sobre la sintaxis de marcado de trazados, consulta Sintaxis de marcado de trazados.
  • Polygon, seguido de una colección de pares de coordenadas x e y. Por ejemplo, Polygon 40 10, 70 80, 10 50.
  • Polyline, seguido de pares de coordenadas x e y de una colección. Por ejemplo, Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
  • Rectangle
  • RoundRectangle, seguido opcionalmente de un radio de esquina. Por ejemplo, RoundRectangle 40 o RoundRectangle 40,0,0,40.

Importante

Aunque Line es un valor string válido para la propiedad StrokeShape, su uso no es compatible.

Los pares de coordenadas x e y basados en String se pueden delimitar mediante una coma o uno o varios espacios. Por ejemplo, "40,10 70,80" y "40 10, 70 80" son válidos. Los pares de coordenadas se convertirán en objetos Point que definen propiedades X y Y, de tipo double.