Geometria in Windows

La geometria descrive la forma, le dimensioni e la posizione degli elementi dell'interfaccia utente sullo schermo. Questi elementi di progettazione fondamentali aiutano a ottenere esperienze coerenti nell'intero sistema di progettazione.

La geometria di Windows è stata creata per supportare esperienze di app moderne. Gli angoli progressivamente arrotondati, gli elementi annidati e gli spazi intercolonna coerenti si combinano per creare un effetto morbido, calmo e accessibile che enfatizza l'unità di scopo e la facilità d'uso.

Suggerimento

Questo articolo descrive come viene applicato il linguaggio Fluent Design alle app di Windows. Per altre informazioni, vedere Fluent Design - Shapes.

Angoli arrotondati

Windows 11 applica angoli arrotondati a tutte le finestre delle app di primo livello. Lo stesso vale per i controlli più comuni, ad esempio Button e ListView.

Windows 11 usa tre livelli di arrotondamento a seconda del componente dell'interfaccia utente arrotondato e della disposizione del componente rispetto agli elementi adiacenti.

Raggio dell'angolo	Utilizzo
8px	I contenitori di primo livello, come le finestre dell'app, i menu a tendina e le finestre di dialogo, vengono arrotondati con un raggio di 8 pixel.
4px	Gli elementi all'interno della pagina, come i pulsanti e i backplates delle liste, vengono arrotondati usando un raggio d'angolo di 4px.
0px	I bordi dritti che si intersecano con altri bordi dritti non vengono arrotondati.
0px	Gli angoli delle finestre non vengono arrotondati quando sono ancorate o ingrandite.

Elementi dell'interfaccia utente rettangolari

I controlli standard visualizzati dagli utenti sullo schermo usano sempre un raggio dell'angolo 4px . Sono inclusi controlli come Button, CheckBox, ComboBox, TextBox e ListView.

Elementi dell'interfaccia utente a comparsa e sovrapposizione

Gli elementi dell'interfaccia utente che appaiono temporaneamente sullo schermo o si sovrappongono a un'altra interfaccia utente usano un raggio d'angolo di 8 px. Sono inclusi elementi come ContentDialog, Flyout, MenuFlyout e TeachingTip. Tooltip è un'eccezione, utilizzando 4px a causa delle sue piccole dimensioni.

Elementi della barra

Gli elementi dell'interfaccia utente modellati come barre o linee usano un raggio dell'angolo 4px . Sono inclusi controlli come ProgressBar, ScrollBar e Slider.

Quando non arrotondare

Ci sono istanze in cui l'angolo di un controllo non deve essere arrotondato e non viene arrotondato per impostazione predefinita.

• Quando più elementi dell'interfaccia utente ospitati all'interno di un contenitore si toccano tra loro, ad esempio le due parti di un controllo SplitButton. Non dovrebbe esserci spazio quando si toccano.

• Quando un elemento dell'interfaccia utente del riquadro a comparsa è connesso a un'interfaccia utente che richiama il riquadro a comparsa su un lato.

Personalizzazione del raggio dell'angolo

I raggi di angolo predefiniti sono controllati da due risorse globali: ControlCornerRadius (impostazione predefinita 4px) e OverlayCornerRadius (impostazione predefinita 8px). Puoi sovrascrivere questi valori nel tuo App.xaml per modificare i valori di arrotondamento in tutti i controlli nella tua app.

Se stai creando un'app desktop Win32, puoi acconsentire esplicitamente agli angoli arrotondati per le finestre dell'app usando l'API DWM. Per informazioni dettagliate, vedere Applicare angoli arrotondati nelle app desktop.