Confine

Il Border controllo disegna un bordo, uno sfondo o entrambi intorno a un altro elemento. Usare Border per creare una cornice visiva intorno al contenuto o per aggiungere spaziatura tra gli elementi dell'interfaccia utente.

Screenshot che mostra controlli di bordo multipli.

Titolo Description
Animare un valore di spessore del bordo Illustra come animare lo spessore di un bordo per creare effetti visivi dinamici.
Aggiungere un bordo attorno al contenuto di una tela Viene illustrato come usare un controllo Border per incorniciare il contenuto canvas.

Stili e modelli

Il Border controllo eredita da Decorator e fornisce funzionalità di stile visivo tramite le relative proprietà di bordo e sfondo.

Proprietà del contenuto

La proprietà content per questo controllo è Child. Questa proprietà consente di inserire un singolo elemento figlio all'interno del bordo.

Parti

Questo controllo non definisce parti del modello.

Stati di visualizzazione

Questo controllo non usa gli stati di visualizzazione.

Concetti chiave

Comprendere il funzionamento di Border all'interno del sistema di layout WPF consente di creare progettazioni visive efficaci.

Bordo come decoratore

Il Border controllo è un Decorator oggetto, il che significa che può contenere un solo elemento figlio. Se è necessario inserire più elementi all'interno di un bordo, racchiudili in un pannello come StackPanel o Grid.

Proprietà bordo

Border offre diverse proprietà chiave per la personalizzazione dell'oggetto visivo:

  • BorderBrush - Imposta il colore o il motivo della linea del bordo.
  • BorderThickness - Definisce lo spessore del bordo su ogni lato.
  • Background - Riempie l'area all'interno del bordo con un colore o un motivo.
  • CornerRadius - Crea angoli arrotondati per un aspetto più morbido.
  • Padding - Aggiunge spazio tra il bordo e il relativo contenuto figlio.

Considerazioni sul layout

Border partecipa al sistema di layout WPF misurando e disponendo il relativo singolo elemento figlio. Lo spessore e la spaziatura interna del bordo influiscono sui calcoli delle dimensioni finali, quindi prendere in considerazione questi valori durante la progettazione del layout.

Esempi

Gli esempi seguenti illustrano scenari comuni di utilizzo di Border.

Utilizzo dei bordi di base

Il seguente XAML crea un bordo semplice intorno a un TextBox.

<Border BorderBrush="Black" BorderThickness="2" CornerRadius="5" Padding="5">
    <TextBox Text="Enter text here" />
</Border>

Applicazione di stili con pennelli

È possibile usare sfumature e altri pennelli per creare effetti bordo più sofisticati:

<Border BorderThickness="3" CornerRadius="10" Padding="10">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="LightBlue" Offset="1" />
        </LinearGradientBrush>
    </Border.BorderBrush>
    <Border.Background>
        <SolidColorBrush Color="LightGray" />
    </Border.Background>
    <TextBlock Text="Styled content" />
</Border>

Contenitore di più elementi

Poiché Border può contenere un solo elemento figlio, usare un pannello per raggruppare più elementi:

<Border BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Padding="8">
    <StackPanel>
        <TextBlock Text="Title" FontWeight="Bold" />
        <TextBlock Text="Description text goes here." />
        <Button Content="Action" />
    </StackPanel>
</Border>

Vedere anche

  • Last updated on