Allineamento, margine e spaziatura interna

Nelle app XAML la maggior parte degli elementi dell'interfaccia utente ereditano dalla classe FrameworkElement. Ogni classe FrameworkElement ha proprietà relative a dimensioni, allineamento, margine e spaziatura interna che influenzano il comportamento di layout. Le indicazioni seguenti offrono una panoramica di come usare queste proprietà di layout per assicurarsi che l'interfaccia utente dell'app sia leggibile e facile da usare in qualsiasi contesto.

Dimensioni (altezza, larghezza)

L'uso di dimensioni appropriate garantisce che tutto il contenuto sia chiaro e leggibile. Gli utenti non dovrebbero eseguire lo scorrimento o lo zoom per decifrare il contenuto principale.

• Height e Width specificano le dimensioni di un elemento. I valori predefiniti sono matematicamente NaN (non un numero). Puoi impostare valori fissi misurati in pixel effettivi o usare Auto o il ridimensionamento proporzionale per un comportamento fluido.

• ActualHeight e ActualWidth sono proprietà di sola lettura che indicano la dimensione di un elemento in runtime. Se i layout fluidi si espandono o riducono, i valori vengono modificati in un evento SizeChanged. Un oggetto RenderTransform non modifica i valori di ActualHeight e ActualWidth.

• MinWidth/MaxWidth e MinHeight/MaxHeight specificano i valori che vincolano le dimensioni di un elemento, consentendo il ridimensionamento fluido.

• FontSize e altre proprietà di testo controllano le dimensioni del layout per gli elementi di testo. Gli elementi di testo non hanno dimensioni dichiarate in modo esplicito, ma dispongono di elementi ActualWidth e ActualHeight calcolati.

Allineamento

L'allineamento rende l'aspetto dell'interfaccia utente interessante, organizzato ed equilibrato e può essere usato anche per stabilire relazioni e gerarchia visiva.

• HorizontalAlignment e VerticalAlignment specificano come deve essere posizionato un elemento all'interno del relativo contenitore padre.

  • I valori per HorizontalAlignment sono Left, Center, Right e Stretch.
  • I valori per VerticalAlignment sono Top, Center, Bottom e Stretch.

• Stretch è il valore predefinito per entrambe le proprietà e gli elementi riempiono tutto lo spazio disponibile nel contenitore padre. Un valore Height e Width con un numero reale annulla un valore Stretch, che agirà come valore Center. Alcuni controlli, ad esempio Button, eseguono l'override del valore Stretch predefinito nel relativo stile predefinito.

• HorizontalContentAlignment e VerticalContentAlignment specificano come sono posizionati gli elementi figlio in un contenitore.

• L'allineamento può influire sul ritaglio all'interno di un pannello di layout. Ad esempio, con HorizontalAlignment="Left", il lato destro dell'elemento viene ritagliato se il contenuto è maggiore di ActualWidth.

• Gli elementi di testo usano la proprietà TextAlignment. In generale, è consigliabile usare l'allineamento a sinistra, ovvero il valore predefinito. Per altre informazioni sull'applicazione di stili al testo, vedi Tipografia.

Margine e spaziatura interna

Le proprietà relative al margine (Margin) e alla spaziatura interna (Padding) consentono di evitare che l'interfaccia utente risulti troppo piena o troppo rada e possono anche semplificare l'uso di determinati input, come la penna e il tocco. Di seguito è riportata una figura in cui sono visualizzati i margini e la spaziatura interna per un contenitore e il relativo contenuto.

Margine

Margin controlla la quantità di spazio vuoto intorno a un elemento. Margin non aggiunge pixel a ActualHeight e ActualWidth e non è considerata parte dell'elemento ai fini di hit testing e sourcing degli eventi di input.

• I valori di Margin possono essere uniformi o distinti. Con Margin="20", all'elemento viene applicato un margine uniforme di 20 pixel sui lati sinistro, superiore, destro e inferiore. Con Margin="0,10,5,25", i valori vengono applicati sui lati sinistro, superiore, destro e inferiore (in questo ordine).

• I margini sono additivi. Se due elementi specificano entrambi un margine uniforme di 10 pixel e sono adiacenti in un orientamento, la distanza che intercorre tra essi è di 20 pixel.

• Sono consentiti margini negativi. Tuttavia, l'uso di un margine negativo può spesso causare ritagli o sovrapposizioni di peer, quindi non è una tecnica comune usare margini negativi.

• I valori dei margini sono vincolati per ultimi, è pertanto necessario prestare attenzione ai margini perché i contenitori possono ritagliare o vincolare gli elementi. Un valore di Margin potrebbe essere il motivo della mancata visualizzazione del rendering di un elemento. Con un valore di Margin applicato, la dimensione di un elemento può essere vincolata a 0.

Padding

Padding controlla la quantità di spazio tra il bordo interno di un elemento e i relativi elementi o contenuti figlio. Un valore di riempimento positivo riduce l'area di contenuto dell'elemento.

A differenza della proprietà Margin, Padding non è una proprietà di FrameworkElement. Esistono diverse classi che definiscono la propria proprietà Padding:

• Control.Padding: viene ereditata in tutte le classi derivate Control. Poiché non tutti i controlli hanno contenuto, per alcuni l'impostazione della proprietà non ha alcun effetto. Se il controllo ha un bordo, la spaziatura interna viene applicata all'interno di tale bordo.
• Border.Padding: definisce lo spazio tra la linea del rettangolo creata da BorderThickness/BorderBrush e l'elemento Child.
• ItemsPresenter.Padding: contribuisce all'aspetto degli elementi nei controlli item, disponendo la spaziatura interna specificata attorno a ognuno di essi.
• TextBlock.Padding e RichTextBlock.Padding: espandono il riquadro di delimitazione attorno al testo dell'elemento di testo. Questi elementi di testo non hanno un elemento Background, pertanto la visualizzazione può essere difficile. Per questo motivo, usa le impostazioni di Margin nei contenitori Block.

In ciascuno di questi casi, gli elementi hanno anche una proprietà Margin. Se si applicano sia Margin sia Padding, questi sono additivi, ovvero la distanza apparente tra un contenitore più esterno e qualsiasi contenuto interno sarà data dal margine più la spaziatura interna.

Esempio

Esame degli effetti di Margin e Padding sui controlli reali. Ecco un controllo TextBox all'interno di una griglia con i valori predefiniti di Margin e Padding pari a 0.

Ecco gli stessi valori TextBox e Grid con Margin e Padding nel controllo TextBox, come illustrato in questo codice XAML.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Risorse di stile

Non è necessario impostare ogni valore di proprietà singolarmente in un controllo. In genere è più efficiente raggruppare i valori delle proprietà in una risorsa Style e applicare style a un controllo . Ciò vale soprattutto quando è necessario applicare gli stessi valori di proprietà a molti controlli. Per altre informazioni sull'uso degli stili, vedi Stili XAML.

Raccomandazioni generali

• Applica i valori di misurazione solo a determinati elementi chiave e usa il comportamento di layout fluido per gli altri elementi. Ciò rende l'interfaccia utente reattiva quando cambia la larghezza della finestra.

• Se usi valori di misurazione, tutte le dimensioni, i margini e la spaziatura interna deve essere in incrementi di 4 epx. Quando la piattaforma XAML usa pixel effettivi e ridimensionamento per rendere l'app leggibile in tutti i dispositivi e dimensioni dello schermo, gli elementi dell'interfaccia utente vengono ridimensionati in multipli di 4. L'uso dei valori in incrementi di 4 ha come risultato il rendering migliore mediante l'allineamento con pixel interi.

• Per larghezze della finestra ridotte (inferiori a 640 pixel), è consigliabile una rilegatura di 12 epx e per larghezze maggiori della finestra, è consigliabile una rilegatura di 24 epx.

Argomenti correlati

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding