Border

Articolo
05/14/2024

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:

Border around a Label screenshot.

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

Linear gradient border around a Label screenshot.

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.

Condividi tramite

Border

Creare un bordo

Definire la forma del bordo con una stringa

Commenti e suggerimenti

Risorse aggiuntive