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 tipoIView
, rappresenta il contenuto da visualizzare nel bordo. Questa proprietà è laContentProperty
classe Border e pertanto non deve essere impostata in modo esplicito da XAML.Padding
, di tipoThickness
, rappresenta la distanza tra il bordo e il relativo elemento figlio.StrokeShape
, di tipoIShape
, descrive la forma del bordo. A questa proprietà è applicato un convertitore di tipi che può convertire una stringa nell'equivalenteIShape
. 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 tipodouble
, indica la larghezza del bordo. Il valore predefinito di questa proprietà è 1,0.StrokeDashArray
, di tipoDoubleCollection
, che rappresenta una raccolta didouble
valori che indicano il modello di trattini e spazi vuoti che costituiscono il bordo.StrokeDashOffset
, di tipodouble
, specifica la distanza all'interno del motivo trattino in cui inizia un trattino. Il valore predefinito di questa proprietà è 0,0.StrokeLineCap
, di tipoPenLineCap
, descrive la forma all'inizio e alla fine della riga. Il valore predefinito di questa proprietà èPenLineCap.Flat
.StrokeLineJoin
, di tipoPenLineJoin
, specifica il tipo di join utilizzato nei vertici della forma del tratto. Il valore predefinito di questa proprietà èPenLineJoin.Miter
.StrokeMiterLimit
, di tipodouble
, 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:
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
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) eLine 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
oRoundRectangle 40,0,0,40
.
Importante
Mentre Line
è un valore valido string
per la StrokeShape
proprietà, il relativo utilizzo non è supportato.
String
Le 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
.