Allineamento, margine, spaziatura interna

Nelle app XAML la maggior parte degli elementi dell'interfaccia utente eredita dalla classe FrameworkElement . Ogni FrameworkElement ha dimensioni, allineamento, margine e proprietà di riempimento, che influenzano il comportamento del layout. Le indicazioni seguenti forniscono 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)

Il dimensionamento corretto garantisce che tutto il contenuto sia chiaro e leggibile. Gli utenti non devono eseguire lo scorrimento o lo zoom per decifrare il contenuto primario.

• Height e Width specificano le dimensioni di un elemento. I valori predefiniti sono matematicamente NaN (Not A Number). È possibile impostare valori fissi misurati in pixel effettivi oppure usare il ridimensionamentoautomatico o proporzionale per il comportamento fluido.

• ActualHeight e ActualWidth sono proprietà di sola lettura che forniscono le dimensioni di un elemento in fase di esecuzione. Se i layout fluidi aumentano o si riducono, i valori cambiano in un evento SizeChanged . Si noti che renderTransform non modificherà i valori ActualHeight e ActualWidth.

• Minwidth/MaxWidth e MinHeight/MaxHeight specificano 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. Anche se gli elementi di testo non hanno dimensioni dichiarate in modo esplicito, hanno calcolato ActualWidth e ActualHeight.

Allineamento

L'allineamento rende l'interfaccia utente ordinata, organizzata e bilanciata e può essere usata anche per stabilire una gerarchia visiva e relazioni.

• HorizontalAlignment e VerticalAlignment specificano come posizionare un elemento all'interno del contenitore padre.

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

• Stretch è l'impostazione predefinita per entrambe le proprietà e gli elementi riempiono tutto lo spazio fornito nel contenitore padre. Altezza e larghezza di numero reale annullano un valore Stretch, che fungerà invece da valore Center. Alcuni controlli, ad esempio Button, eseguono l'override del valore predefinito Stretch nello stile predefinito.

• HorizontalContentAlignment e VerticalContentAlignment specificano il modo in cui gli elementi figlio vengono posizionati all'interno di 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 tagliato se il contenuto è maggiore di ActualWidth.

• Gli elementi di testo utilizzano la proprietà TextAlignment . In genere, è consigliabile usare l'allineamento a sinistra, il valore predefinito. Per altre informazioni sullo stile del testo, vedere Tipografia.

Margine e spaziatura interna

Le proprietà di margine e spaziatura interna impediscono all'interfaccia utente di apparire troppo ingombra o troppo sparse e possono anche semplificare l'uso di certi input come penna e tocco. Ecco un'illustrazione che mostra margini e padding per un contenitore e il relativo contenuto.

Margin

Margin controlla la quantità di spazio vuoto intorno a un elemento. Margin non aggiunge pixel a ActualHeight e ActualWidth e non è considerato parte dell'elemento per acquisire eventi di input e condurre il test di contatto.

• I valori dei margini possono essere uniformi o distinti. Con Margin="20", un margine uniforme di 20 pixel verrebbe applicato all'elemento a sinistra, in alto, a destra e in basso. Con Margin="0,10,5,25", i valori vengono applicati a sinistra, in alto, a destra e in basso (in tale ordine).
• I margini sono additivi. Se due elementi specificano entrambi un margine uniforme di 10 pixel e sono peer adiacenti in qualsiasi orientamento, la distanza tra di esse è di 20 pixel.
• Sono consentiti margini negativi. Tuttavia, l'uso di un margine negativo può spesso causare ritaglio o sovrapposizioni di peer, quindi non è una tecnica comune usare margini negativi.
• I valori dei margini sono vincolati infine, quindi prestare attenzione ai margini perché i contenitori possono tagliare o vincolare gli elementi. Un valore Margin potrebbe essere la causa di un elemento che non sembra eseguire il rendering; con un margine applicato, la dimensione di un elemento può essere vincolata a 0.

Imbottitura

Il padding controlla la quantità di spazio tra il bordo interno di un elemento e il suo contenuto o gli elementi figlio. Un valore di riempimento positivo riduce l'area di contenuto dell'elemento.

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

• Control.Padding: viene ereditato da tutte le classi derivate da Control. Non tutti i controlli hanno contenuto, quindi per questi controlli, impostare la proprietà è inutile. Se il controllo dispone di 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 elemento, posizionando la spaziatura interna specificata intorno a ogni elemento.
• TextBlock.Padding e RichTextBlock.Padding: espande il riquadro delimitatore attorno al testo dell'elemento di testo. Questi elementi di testo non hanno uno Sfondo, quindi può essere visivamente difficile da vedere. Per questo motivo, utilizzare le impostazioni Margin nei contenitori Block.

In ognuno di questi casi, gli elementi hanno anche una proprietà Margin. Se vengono applicati sia Margin che Padding, sono additivi: la distanza apparente tra un contenitore esterno e qualsiasi contenuto interno sarà margine più spaziatura interna.

Example

Esaminiamo gli effetti di Margin e Padding sui controlli reali. Ecco una TextBox all'interno di una griglia con i valori predefiniti di Margin e Padding impostati su 0.

Ecco lo stesso TextBox e Grid con valori di Margin e Padding sul TextBox, come illustrato in questo 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 info sull'uso degli stili, vedi Stili XAML.

Raccomandazioni generali

• Applicare solo i valori di misura a determinati elementi chiave e usare il comportamento del layout fluido per gli altri elementi. Ciò fornisce un'interfaccia utente reattiva quando la larghezza della finestra cambia.
• Se si usano valori di misura, tutte le dimensioni, i margini e la spaziatura interna devono essere in incrementi di 4 epx. Quando XAML utilizza pixel effettivi e ridimensionamento per garantire la leggibilità dell'app su tutti i dispositivi e dimensioni dello schermo, ridimensiona gli elementi dell'interfaccia utente al multiplo di 4. L'uso di valori in incrementi di 4 consente di ottenere il rendering migliore allineandolo a interi pixel.
• Per piccole larghezze di finestra (inferiori a 640 pixel), consigliamo canali epx da 12, e per larghezze di finestra maggiori, consigliamo canali epx da 24.

Argomenti correlati

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