Colores de plataforma predeterminados
Cuando no estableces estilos o colores, tu interfaz de usuario usar谩 el tema nativo de la plataforma en la que se ejecuta la aplicaci贸n. Por ejemplo, as铆 es como se ve esta nueva plantilla de aplicaci贸n en blanco en iOS:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="36,48,36,36" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36" />
</Frame>
<Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
<Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0" />
<Label FontSize="16" Padding="30,24,30,0">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Learn more at " />
<Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold" />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
Cuando cambia el simulador de iOS entre los modos oscuro y claro (CMD + SHFT + A), puede ver que el fondo de ContentPage cambia de blanco a negro y el texto de negro a blanco. Estos son los colores de plataforma predeterminados. Compare esto con el t铆tulo, que permanece azul, y el texto del t铆tulo, que permanece en blanco. Estos son los colores expl铆citos establecidos en el c贸digo.
Tomando el control del negro
Para controlar ahora los colores del t铆tulo y el texto oscuros y claros, puede reemplazar los colores est谩ticos con AppThemeBinding, que reaccionar谩 en tiempo de ejecuci贸n a la configuraci贸n del tema de su sistema operativo. Primero habilite esta funci贸n agregando una bandera a su App.xaml.cs:
public App()
{
Device.SetFlags(new string[]{ "AppTheme_Experimental" });
InitializeComponent();
}Actualizaci贸n de solo encabezado, se ve as铆:
<Frame BackgroundColor="{AppThemeBinding Dark=#2196F3, Light=#2196F3}" Padding="36,48,36,36" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="{AppThemeBinding Dark=DarkBlue, Light=White}" FontSize="36" />
</Frame>
Por supuesto, puede cambiar los estilos como aqu铆:
<ContentPage.Resources>
<Style x:Key="HeaderBg" TargetType="Frame">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Dark=#1d1d1d, Light=#2196F3}"/>
<Setter Property="Padding" Value="36,48,36,36"/>
<Setter Property="CornerRadius" Value="0"/>
</Style>
<Style x:Key="HeaderTitle" TargetType="Label">
<Setter Property="TextColor" Value="{AppThemeBinding Dark=#F1F1F1, Light=White}"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="FontSize" Value="36"/>
</Style>
</ContentPage.Resources>
<Frame Style="{StaticResource HeaderBg}">
<Label
Style="{StaticResource HeaderTitle}"
Text="Welcome to Xamarin.Forms!" />
</Frame>Y si desea utilizar estilos de color predefinidos, podr铆a verse as铆:
<Color x:Key="Background_Dark">#1d1d1d</Color>
<Color x:Key="Background_Light">#1d1d1d</Color>
<Style x:Key="HeaderBg" TargetType="Frame">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Background_Dark}, Light={StaticResource Background_Light}}"/>Dar al usuario una opci贸n
A veces, es posible que desee dar al usuario control sobre el tema en lugar de confiar en el tema del sistema operativo. Para hacer esto, solo necesita proporcionar una forma de instalar App.Current.UserAppTheme de esta manera:
App.Current.UserAppTheme = OSAppTheme.Dark;
Luego, para restablecer la aplicaci贸n de modo que responda autom谩ticamente a los cambios en el tema del sistema operativo, puede configurarla en "Sin especificar":
App.Current.UserAppTheme = OSAppTheme.Unspecified;Ahora cree la experiencia descrita anteriormente y agregue tres casillas de verificaci贸n a su interfaz: "predeterminado", "oscuro" y "claro".
<StackLayout Orientation="Horizontal" Spacing="10">
<CheckBox IsChecked="{Binding UseDeviceThemeSettings}" VerticalOptions="Center" />
<Label Text="Use device settings"
VerticalOptions="Center"/>
</StackLayout>
<StackLayout
IsVisible="{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}"
Orientation="Horizontal"
Spacing="10">
<CheckBox IsChecked="{Binding UseDarkMode}" VerticalOptions="Center"/>
<Label Text="Dark Theme"
VerticalOptions="Center"/>
</StackLayout>
<StackLayout
IsVisible="{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}"
Orientation="Horizontal"
Spacing="10">
<CheckBox IsChecked="{Binding UseLightMode}" VerticalOptions="Center"/>
<Label Text="Light Theme"
VerticalOptions="Center"/>
</StackLayout>Luego, agregue propiedades p煤blicas al BindingContext de la p谩gina, en cuyo caso la p谩gina maneja su propio estado.
public MainPage()
{
BindingContext = this;
InitializeComponent();
}
private bool _useDarkMode;
public bool UseDarkMode {
get {
return _useDarkMode;
}
set {
_useDarkMode = value;
if(_useDarkMode)
{
UseLightMode = UseDeviceThemeSettings = false;
App.Current.UserAppTheme = OSAppTheme.Dark;
}
}
}
private bool _useLightMode;
public bool UseLightMode
{
get
{
return _useLightMode;
}
set
{
_useLightMode = value;
if (_useLightMode)
{
UseDarkMode = UseDeviceThemeSettings = false;
App.Current.UserAppTheme = OSAppTheme.Light;
}
}
}
private bool _useDeviceThemeSettings = true;
public bool UseDeviceThemeSettings
{
get
{
return _useDeviceThemeSettings;
}
set
{
_useDeviceThemeSettings = value;
if(_useDeviceThemeSettings)
{
App.Current.UserAppTheme = OSAppTheme.Unspecified;
}
}
}El c贸digo anterior cambia entre oscuro y claro seg煤n las preferencias del usuario en la aplicaci贸n, y luego cambia entre la preferencia del usuario y la preferencia del tema del sistema operativo.
隆Envoltura!
Este nuevo asistente de modo claro y oscuro de AppThemeBinding, junto con UserAppTheme, facilita el trabajo con modos oscuros en sus aplicaciones Xamarin.Forms. Esto funciona no solo para colores, sino tambi茅n para im谩genes y otros recursos. Como se mostr贸 anteriormente, incluso funciona con los nuevos formularios y rutas agregadas en Xamarin.Forms 4.7.
Para obtener m谩s informaci贸n sobre los temas de las aplicaciones, consulte la documentaci贸n sobre los cambios en el tema del sistema. Si desea ir m谩s all谩 de los temas oscuros y claros, intente usar recursos din谩micos e incluso cargar temas en tiempo de ejecuci贸n para crear temas en sus aplicaciones.