Condividi tramite

Raggio dell'angolo

  • Articolo

A partire dalla versione 2.2 di WinUI, lo stile predefinito di molti controlli è stato aggiornato per l'uso degli angoli arrotondati. Questi nuovi stili hanno lo scopo di evocare un senso di calore e affidabilità e facilitano l'elaborazione visiva dell'interfaccia da parte degli utenti.

Ecco due controlli Button, il primo senza angoli arrotondati e il secondo con uno stile di angoli arrotondati.

Pulsanti senza e con angoli arrotondati

WinUI ti fornisce gli stili aggiornati sia per i controlli WinUI che per quelli della piattaforma. Vedi Opzioni di personalizzazione, per i dettagli su come personalizzare gli angoli arrotondati.

Importante

Alcuni controlli, ad esempio TreeView o ColorPicker, sono disponibili sia nella piattaforma (Windows.UI.Xaml.Controls) sia in WinUI (Microsoft.UI.Xaml.Controls). Quando usi WinUI nell'app, devi usare la versione del controllo per WinUI. Nella versione per la piattaforma l'arrotondamento degli angoli potrebbe essere applicato in modo incoerente se usato con WinUI.

API importanti: Proprietà Control.CornerRadius

Progettazioni di controlli predefiniti

Esistono tre tipologie di controlli in cui vengono usati gli stili caratterizzati da angoli arrotondati: elementi rettangolari, elementi a comparsa ed elementi a barra.

Angoli degli elementi di interfaccia utente rettangolari

  • Questi elementi di interfaccia utente includono i controlli di base, ad esempio i pulsanti, che gli utenti visualizzano sempre sullo schermo.
  • Il valore predefinito del raggio usato per questi elementi di interfaccia utente è 4px.

Pulsante con angoli arrotondati evidenziati

Controlli

  • AutoSuggestBox
  • Pulsanti
    • Pulsanti ContentDialog
  • CalendarDatePicker
  • CheckBox
    • Caselle di controllo multi-selezione per TreeView, GridView e ListView
  • Selezione colori
  • CommandBar
  • ComboBox
  • DatePicker
  • DropDownButton
  • Expander
  • FlipView
  • GridView e ListView
    • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, Elenco TreeView
  • InfoBar
  • Controlli per l'input penna
  • Riproduzione di contenuti multimediali
  • MenuBar
  • NumberBox
  • PasswordBox
  • RichEditBox
  • SplitButton
  • TextBox
  • TimePicker
  • ToggleButton
  • ToggleSplitButton

Angoli degli elementi di interfaccia utente a comparsa e sovrapposti

  • Può trattarsi di elementi di interfaccia utente temporanei che vengono visualizzati sullo schermo provvisoriamente, ad esempio MenuFlyout, o elementi sovrapposti ad altri, ad esempio schede TabView.
  • Il valore del raggio predefinito che utilizziamo per questi elementi UI è 8px.

Esempio di elemento a comparsa

Controlli

  • CommandBarFlyout
  • ContentDialog
  • Flyout
  • MenuFlyout
  • Schede TabView
  • TeachingTip
  • ToolTip (utilizza 4px raggio a causa delle dimensioni ridotte)
  • Parte a scomparsa (quando è aperta)
    • AutoSuggestBox
    • CalendarDatePicker
    • ComboBox
    • DatePicker
    • DropDownButton
    • Controllo dell'inchiostrazione
    • MenuBar
    • NumberBox
    • SplitButton
    • TimePicker
    • ToggleSplitButton

Elementi a barra

  • Questi elementi di interfaccia utente, ad esempio ProgressBar, hanno la forma di barre o linee.
  • I valori di raggio predefiniti che utilizziamo sono 4px.

Esempio di indicatore di stato

Controlli

  • Indicatore di selezione NavigationView
  • ProgressBar
  • ScrollBar
  • Cursore
    • Dispositivo di scorrimento colori ColorPicker
    • Dispositivo di scorrimento barra di ricerca MediaTransportControls

Opzioni di personalizzazione

I valori predefiniti dei raggi degli angoli forniti non sono immutabili ed esistono diversi modi che consentono di modificare con facilità l'arrotondamento degli angoli. A questo scopo, puoi usare due risorse globali oppure la proprietà CornerRadius direttamente sul controllo, a seconda del livello di granularità della personalizzazione che vuoi ottenere.

Quando non arrotondare

In alcuni casi l'angolo di un controllo non deve essere arrotondato e, per impostazione predefinita, non viene arrotondato.

  • Quando più elementi di interfaccia utente ospitati all'interno di un contenitore si toccano, ad esempio le due parti di un controllo SplitButton. Non devono essere presenti spazi nel punto di contatto.

SplitButton

  • Quando un elemento a comparsa è collegato a un'interfaccia utente che richiama l'elemento a comparsa da una parte.

Screenshot di un riquadro a comparsa di suggerimenti automatici con alcuni angoli non arrotondati.

Modifiche a CornerRadius a livello di pagina o app

I raggi degli angoli di tutti i controlli sono controllati da due risorse delle app:

  • ControlCornerRadius, con valore predefinito 4px.
  • OverlayCornerRadius - il valore predefinito è 8px.

Se sostituisci il valore di queste risorse in un ambito, tale modifica ha effetto su tutti i controlli all'interno di tale ambito.

In altre parole, se vuoi modificare l'arrotondamento di tutti i controlli in cui è possibile eseguire tale operazione, puoi definire entrambe le risorse a livello di app con i nuovi valori di CornerRadius nel modo seguente:

<Application
    xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
    xmlns:x=”http://schemas.micosoft.com/winfx/2006/xaml”
    xmlns:control=”using:Microsoft.UI.Xaml.Controls”>
    <Application.Resources>
      <controls:XamlControlsResources>
        <controls:XamlControlsResources.MergedDictionaries>
          <ResourceDictionary>
            <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
          </ResourceDictionary>
        </controls:XamlControlsResources.MergedDictionaries>
      </controls:XamlControlsResources>
    </Application.Resources>
</Application>

In alternativa, se vuoi modificare l'arrotondamento di tutti i controlli all'interno di un ambito specifico, ad esempio a livello di pagina o contenitore, puoi seguire uno schema simile:

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

Nota

Per rendere effettiva la risorsa OverlayCornerRadius, è necessario definirla a livello di app.

Questo perché i popup e i flyout non sono inseriti nell'albero visivo della pagina, ma vengono aggiunti alla radice popup. Il sistema di risoluzione delle risorse non attraversa correttamente l'albero visivo della radice del popup nell'albero visivo della pagina.

Modifiche a CornerRadius per singolo controllo

Per modificare l'arrotondamento solo di un numero selezionato di controlli, puoi modificare la proprietà CornerRadius direttamente sui controlli.

Predefiniti Proprietà modificata
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

Non tutti gli angoli dei controlli rispondono alla modifica della relativa proprietà CornerRadius. Per assicurarti che il controllo di cui vuoi arrotondare gli angoli risponda effettivamente alla relativa proprietà CornerRadius nel modo previsto, verifica prima che le risorse globali ControlCornerRadius e OverlayCornerRadius abbiano effetto sul controllo in questione. In caso contrario, verifica che il controllo per il quale vuoi eseguire l'arrotondamento abbia degli angoli. Molti dei nostri controlli non eseguono il rendering dei bordi effettivi e non possono quindi usare correttamente la proprietà CornerRadius.

Basare gli stili personalizzati su WinUI

Puoi basare gli stili personalizzati sugli stili caratterizzati da angoli arrotondati di WinUI specificando l'attributo BasedOn corretto nello stile. Ad esempio, per creare uno stile di pulsante personalizzato basato sullo stile del pulsante di WinUI, segui questa procedura:

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

In generale, gli stili di controllo di WinUI seguono una convenzione di denominazione coerente: "DefaultXYZStyle" dove "XYZ" è il nome del controllo. Per informazioni di riferimento complete, puoi vedere i file XAML nel repository di WinUI.