Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Le app di Windows supportano temi chiari e scuri e puoi personalizzare il modo in cui l'app risponde alle preferenze del tema dell'utente. Questo articolo illustra come modificare i temi, usare i pennelli del tema, personalizzare i colori principali e usare l'API colore.
Per indicazioni sulla progettazione sull'uso efficace del colore, vedi Color in Windows.
Modifica del tema
Puoi cambiare i temi modificando la proprietà RequestedTheme nel file App.xaml.
<Application
x:Class="App9.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App9"
RequestedTheme="Dark">
</Application>
La rimozione della proprietà RequestedTheme indica che l'applicazione userà le impostazioni di sistema dell'utente.
Gli utenti possono anche selezionare il tema a contrasto elevato, che usa una tavolozza ridotta di colori contrastanti che migliorano la visibilità dell'interfaccia. In tal caso, il sistema sostituirà il RequestedTheme.
Testare i temi
Se non hai bisogno di un tema specifico dell'app, ricordati di testare l'app con entrambi i temi, chiaro e scuro, per assicurarti che l'app sia sempre leggibile.
Pennelli del tema
I controlli comuni usano automaticamente i pennelli del tema per regolare il contrasto per i temi chiari e scuri.
Ecco un esempio di come viene utilizzato il controllo AutoSuggestBox con i pennelli del tema:
Uso dei pennelli del tema
Quando crei modelli per i controlli personalizzati, usa i pennelli del tema anziché valori di colore hardcoded. In questo modo, l'app può adattarsi facilmente a qualsiasi tema.
Ad esempio, questi modelli di elementi per ListView dimostrano come usare i pennelli del tema in un modello personalizzato.
<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
<Ellipse Height="48" Width="48" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush ImageSource="Placeholder.png"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Per altre informazioni sull'uso dei pennelli del tema nell'app, vedi Risorse del tema.
Colori accentati
I controlli comuni usano un colore principale per trasmettere le informazioni sullo stato. Per impostazione predefinita, il colore principale è il SystemAccentColor che gli utenti selezionano in Impostazioni. Tuttavia puoi anche personalizzare il colore principale dell'app per richiamare il tuo marchio.
Sostituzione del colore d'accento
Per cambiare il colore principale dell'app, inserisci il codice seguente in app.xaml.
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
Scelta di un colore principale
Se selezioni un colore principale personalizzato per l'app, assicurati che il contrasto tra il testo e gli sfondi che usano il colore principale sia sufficiente per una leggibilità ottimale. Per provare il contrasto, puoi usare lo strumento selezione colori nelle impostazioni di Windows oppure questi strumenti online per il contrasto.
Tavolozza dei colori principali
Un algoritmo di colore principale della shell di Windows genera sfumature chiare e scure del colore principale.
Queste sfumature sono accessibili come risorse del tema:
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
Puoi anche accedere alla tavolozza dei colori principali a livello di codice con il metodo UISettings.GetColorValue e l'enumerazione UIColorType.
Puoi usare la tavolozza dei colori principali per i temi dell'app. Ecco un esempio di uso della tavolozza dei colori principali su un pulsante.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
<Button Content="Button"></Button>
Quando usi testo colorato su uno sfondo colorato, assicurati che il contrasto tra il testo e lo sfondo sia sufficiente. Per impostazione predefinita, per i collegamenti ipertestuali o gli ipertesti verrà usato il colore principale. Se applichi varianti del colore principale allo sfondo, devi usare una variante del colore principale originale per ottimizzare il contrasto del testo colorato su uno sfondo colorato.
Il grafico seguente mostra un esempio delle varie sfumature chiare/scure del colore principale e come applicare un tipo colorato su una superficie colorata.
Per altre informazioni sui controlli di stile, vedi Stili XAML.
API per il colore
Esistono diverse API che possono essere usate per aggiungere colore all'applicazione. Innanzitutto, la classe Colors, che implementa un lungo elenco di colori predefiniti. Questi sono accessibili automaticamente con le proprietà XAML. Nell'esempio seguente viene creato un pulsante e vengono impostate le proprietà per il colore di sfondo e di primo piano per i membri della classe Colors.
<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>
Puoi creare colori personalizzati con valori RGB o esadecimali usando lo struct Color XAML.
<Color x:Key="LightBlue">#FF36C0FF</Color>
Puoi anche creare lo stesso colore nel codice usando il metodo FromArgb.
Color LightBlue = Color.FromArgb(255,54,192,255);
Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);
Le lettere "Argb" stanno per Alfa (opacità), Red, Green e Blue, che sono le quattro componenti di un colore. Ogni argomento può variare da 0 a 255. Puoi scegliere di omettere il primo valore, così otterrai un'opacità predefinita di 255, ossia del 100%.
Annotazioni
Se usi C++, devi creare i colori tramite la classe ColorHelper.
L'uso più comune di Color è come argomento di un SolidColorBrush, che può essere usato per colorare gli elementi dell'interfaccia utente in tinta unita. Questi pennelli sono generalmente definiti in un ResourceDictionary, in modo da poterli riutilizzare per più elementi.
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
<SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>
Per altre informazioni su come usare i pennelli, vedi Pennelli XAML.
Elementi correlati
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
