Condividi tramite


Border

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) Border è un controllo contenitore che disegna un bordo, uno sfondo o entrambi intorno a un altro controllo. Un Border oggetto può contenere un solo oggetto figlio. Se si desidera inserire un bordo intorno a più oggetti, eseguirne il wrapping in un oggetto contenitore, ad esempio un layout. Per altre informazioni sui layout, vedere Layout.

Border definisce le proprietà seguenti:

  • Content, di tipo IView, rappresenta il contenuto da visualizzare nel bordo. Questa proprietà è la ContentProperty classe Border e pertanto non deve essere impostata in modo esplicito da XAML.
  • Padding, di tipo Thickness, rappresenta la distanza tra il bordo e il relativo elemento figlio.
  • StrokeShape, di tipo IShape, descrive la forma del bordo. A questa proprietà è applicato un convertitore di tipi che può convertire una stringa nell'equivalente IShape. Il valore predefinito è Rectangle. Pertanto, un Border oggetto sarà rettangolare per impostazione predefinita.
  • Stroke, di tipo Brush, indica il pennello utilizzato per disegnare il bordo.
  • StrokeThickness, di tipo double, indica la larghezza del bordo. Il valore predefinito di questa proprietà è 1,0.
  • StrokeDashArray, di tipo DoubleCollection, che rappresenta una raccolta di double valori che indicano il modello di trattini e spazi vuoti che costituiscono il bordo.
  • StrokeDashOffset, di tipo double, specifica la distanza all'interno del motivo trattino in cui inizia un trattino. Il valore predefinito di questa proprietà è 0,0.
  • StrokeLineCap, di tipo PenLineCap, descrive la forma all'inizio e alla fine della riga. Il valore predefinito di questa proprietà è PenLineCap.Flat.
  • StrokeLineJoin, di tipo PenLineJoin, specifica il tipo di join utilizzato nei vertici della forma del tratto. Il valore predefinito di questa proprietà è PenLineJoin.Miter.
  • StrokeMiterLimit, di tipo double, specifica il limite per il rapporto tra la lunghezza del miter e la metà dello spessore del tratto. Il valore predefinito di questa proprietà è 10,0.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Importante

Quando si crea un bordo utilizzando una forma, ad esempio o Rectangle Polygon, è necessario utilizzare solo forme chiuse. Pertanto, le forme aperte, ad Line esempio, non sono supportate.

Per altre informazioni sulle proprietà che controllano la forma e il tratto del bordo, vedere Forme.

Creare un bordo

Per disegnare un bordo, creare un Border oggetto e impostarne le proprietà per definirne l'aspetto. Impostare quindi il relativo elemento figlio sul controllo su cui aggiungere il bordo.

L'esempio XAML seguente illustra come disegnare un bordo intorno a un Labeloggetto :

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

In alternativa, è possibile specificare il valore della proprietà usando la StrokeShape sintassi dei tag delle proprietà:

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

Il codice C# equivalente è il seguente:

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

In questo esempio, un bordo con angoli arrotondati in alto a sinistra e in basso a destra viene disegnato intorno a un oggetto Label. La forma del bordo viene definita come oggetto RoundRectangle , la cui CornerRadius proprietà è impostata su un Thickness valore che consente il controllo indipendente di ogni angolo del rettangolo:

Bordo intorno a uno screenshot etichetta.

Poiché la proprietà è di tipo Brush, i Stroke bordi possono essere disegnati anche usando sfumature:

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

Il codice C# equivalente è il seguente:

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

In questo esempio viene disegnato un bordo che usa una sfumatura lineare intorno a :Label

Bordo sfumato lineare intorno a uno screenshot etichetta.

Definire la forma del bordo con una stringa

In XAML il valore della proprietà può essere definito usando la StrokeShape sintassi property-tag o come .string I valori validi string per la StrokeShape proprietà sono:

  • Ellipse
  • Line, seguito da una o due coppie di coordinate x e y. Ad esempio, Line 10 20 disegna una linea da (10,20) a (0,0) e Line 10 20, 100 120 disegna una linea da (10,20) a (100,120).
  • Path, seguito dai dati della sintassi di markup del percorso. Ad esempio, Path M 10,100 L 100,100 100,50Z disegnare un bordo triangolare. Per altre informazioni sulla sintassi di markup del percorso, vedere Sintassi di markup path.
  • Polygon, seguito da una raccolta di coppie di coordinate x e y. Ad esempio: Polygon 40 10, 70 80, 10 50.
  • Polyline, seguito da una raccolta di coppie di coordinate x e y. Ad esempio: Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
  • Rectangle
  • RoundRectangle, facoltativamente seguito da un raggio dell'angolo. Ad esempio, RoundRectangle 40 o RoundRectangle 40,0,0,40.

Importante

Mentre Line è un valore valido string per la StrokeShape proprietà, il relativo utilizzo non è supportato.

StringLe coppie di coordinate x e y basate su y possono essere delimitate da una singola virgola e/o da uno o più spazi. Ad esempio, "40,10 70,80" e "40 10, 70 80" sono entrambi validi. Le coppie di coordinate verranno convertite in Point oggetti che definiscono X e Y proprietà, di tipo double.