Rispondere alle modifiche dei temi di sistema nelle Xamarin.Forms applicazioni
Scaricare l'esempioI dispositivi in genere includono temi chiari e scuri, che fanno riferimento a un ampio set di preferenze di aspetto che possono essere impostate a livello di sistema operativo. Le applicazioni devono rispettare questi temi di sistema e rispondere immediatamente quando cambia il tema del sistema.
Il tema del sistema può cambiare per diversi motivi, a seconda della configurazione del dispositivo. Ciò include il tema di sistema modificato in modo esplicito dall'utente, che cambia a causa dell'ora del giorno e cambia a causa di fattori ambientali come la scarsa illuminazione.
Xamarin.Forms le applicazioni possono rispondere alle modifiche del tema di sistema utilizzando le risorse con l'estensione AppThemeBinding di markup e i SetAppThemeColor metodi di estensione e SetOnAppTheme<T> .
Per rispondere a una modifica del tema di sistema, è necessario soddisfare Xamarin.Forms i requisiti seguenti:
- Xamarin.Forms 4.6.0.967 o versione successiva.
- iOS 13 o versione successiva.
- Android 10 (API 29) o versione successiva.
- Build UWP 14393 o successiva.
- macOS 10.14 o versione successiva.
Gli screenshot seguenti mostrano pagine a tema, per i temi di sistema chiaro e scuro in iOS e Android:
Definire e usare le risorse del tema
Le risorse per i temi chiari e scuri possono essere utilizzate con l'estensione AppThemeBinding di markup e i SetAppThemeColor metodi di estensione e SetOnAppTheme<T> . Con questi approcci, le risorse vengono applicate automaticamente in base al valore del tema di sistema corrente. Inoltre, gli oggetti che utilizzano queste risorse vengono aggiornati automaticamente se il tema di sistema cambia durante l'esecuzione di un'app.
Estensione di markup AppThemeBinding
L'estensione AppThemeBinding di markup consente di utilizzare una risorsa, ad esempio un'immagine o un colore, in base al tema di sistema corrente:
<ContentPage ...>
<StackLayout Margin="20">
<Label Text="This text is green in light mode, and red in dark mode."
TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
<Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}" />
</StackLayout>
</ContentPage>
In questo esempio, il colore del testo del primo Label è impostato su verde quando il dispositivo usa il tema chiaro e viene impostato su rosso quando il dispositivo usa il tema scuro. Analogamente, Image visualizza un file di immagine diverso in base al tema di sistema corrente.
Inoltre, le risorse definite in un ResourceDictionary possono essere utilizzate con l'estensione di StaticResource markup:
<ContentPage ...>
<ContentPage.Resources>
<!-- Light colors -->
<Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
<Color x:Key="LightSecondaryColor">Black</Color>
<!-- Dark colors -->
<Color x:Key="DarkPrimaryColor">Teal</Color>
<Color x:Key="DarkSecondaryColor">White</Color>
<Style x:Key="ButtonStyle"
TargetType="Button">
<Setter Property="BackgroundColor"
Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
<Setter Property="TextColor"
Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
</Style>
</ContentPage.Resources>
<Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}">
<Button Text="MORE INFO"
Style="{StaticResource ButtonStyle}" />
</Grid>
</ContentPage>
In questo esempio il colore di sfondo di Grid e lo Button stile cambia in base al fatto che il dispositivo usi il tema chiaro o il tema scuro.
Per altre informazioni sull'estensione AppThemeBinding di markup, vedere Estensione di markup AppThemeBinding.
Metodi di estensione
Xamarin.Forms include SetAppThemeColor e SetOnAppTheme<T> metodi di estensione che consentono VisualElement agli oggetti di rispondere alle modifiche del tema di sistema.
Il SetAppThemeColor metodo consente di Color specificare gli oggetti che verranno impostati su una proprietà di destinazione in base al tema di sistema corrente:
Label label = new Label();
label.SetAppThemeColor(Label.TextColorProperty, Color.Green, Color.Red);
In questo esempio, il colore del testo di Label è impostato su verde quando il dispositivo usa il tema chiaro e viene impostato su rosso quando il dispositivo usa il tema scuro.
Il SetOnAppTheme<T> metodo consente di specificare gli oggetti di tipo T che verranno impostati su una proprietà di destinazione in base al tema di sistema corrente:
Image image = new Image();
image.SetOnAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");
In questo esempio, l'oggetto Image viene visualizzato lightlogo.png quando il dispositivo usa il tema chiaro e darklogo.png quando il dispositivo usa il tema scuro.
Rilevare il tema del sistema corrente
Il tema di sistema corrente può essere rilevato ottenendo il valore della Application.RequestedTheme proprietà :
OSAppTheme currentTheme = Application.Current.RequestedTheme;
La RequestedTheme proprietà restituisce un OSAppTheme membro di enumerazione. L'enumerazione OSAppTheme definisce i membri seguenti:
Unspecified, che indica che il dispositivo usa un tema non specificato.Light, che indica che il dispositivo usa il tema chiaro.Dark, che indica che il dispositivo usa il tema scuro.
Impostare il tema utente corrente
Il tema usato dall'applicazione può essere impostato con la Application.UserAppTheme proprietà , che è di tipo OSAppTheme, indipendentemente dal tema di sistema attualmente operativo:
Application.Current.UserAppTheme = OSAppTheme.Dark;
In questo esempio, l'applicazione è impostata per usare il tema definito per la modalità scura del sistema, indipendentemente dal tema di sistema attualmente operativo.
Nota
Impostare la UserAppTheme proprietà su OSAppTheme.Unspecified per impostazione predefinita sul tema del sistema operativo.
Reagire alle modifiche del tema
Il tema di sistema in un dispositivo può cambiare per diversi motivi, a seconda della modalità di configurazione del dispositivo. Xamarin.Forms Le app possono ricevere notifiche quando il tema di sistema cambia gestendo l'evento Application.RequestedThemeChanged :
Application.Current.RequestedThemeChanged += (s, a) =>
{
// Respond to the theme change
};
L'oggetto AppThemeChangedEventArgs , che accompagna l'evento RequestedThemeChanged , ha una singola proprietà denominata RequestedTheme, di tipo OSAppTheme. Questa proprietà può essere esaminata per rilevare il tema del sistema richiesto.
Importante
Per rispondere alle modifiche del tema in Android, è necessario includere il ConfigChanges.UiMode flag nell'attributo Activity della MainActivity classe.