Introducción
En Windows Phone, podemos definir un tema totalmente personalizado para nuestras aplicaciones. Por defecto, ya contamos con dos temas, claro y oscuro (“Light” y “Dark”
respectivamente). Si no usamos nuestro propio tema totalmente
personalizado debemos gestionar los elementos de nuestra interfaz para
una correcta visualización tanto en el tema claro como en el oscuro. El
usuario puede cambiar el tema a utilizar (por defecto oscuro).
Podemos forzar el utilizar un tema en concreto e incluso en tiempo de ejecución podemos modificar el tema a utilizar para cualquier elemento.
NOTA: Modificar la propiedad Application.RequestedTheme en tiempo de ejecución provoca una excepción.
RequestTheme
La propiedad RequestedTheme nos permite obtener o establecer el tema a utilizar. Al cambiar el valor de RequestedTheme
de la Aplicación a nivel general o de un elemento en concreto provoca
que se obtengan las plantillas y estilos del ResourceDictionary
denominados “Light” o “Dark” de la colección ThemeDictionaries.
NOTA: La propiedad RequestedTheme es ignorada si el usuario tiene activo el modo de alto contraste.
Crearemos un ejemplo muy simple para realizar el cambio en tiempo de ejecución del tema. Creamos dos sencillos botones:
<Button Content="Light" /><Button Content="Dark" />El primero cambiara al tema claro y el segundo al tema oscuro:
En nuestra viewmodel, contaremos con un comando para cada botón:
private ICommand _lightCommand;private ICommand _darkCommand;public ICommand LightCommand{ get { return _lightCommand = _lightCommand ?? new DelegateCommand(LightCommandExecute); }}public ICommand DarkCommand{ get { return _darkCommand = _darkCommand ?? new DelegateCommand(DarkCommandExecute); }}private void LightCommandExecute(){}private void DarkCommandExecute(){}La definición de los botones quedara:
<Button Content="Light" Command="{Binding LightCommand}" /><Button Content="Dark" Command="{Binding DarkCommand}" />En Windows Phone 8.1, la App cuenta con una Window que contiene un único Frame que ocupa el 100% del área de la pantalla.
El Frame, se crea en el arranque de la aplicación y es el encargado de contener y gestionar cada una de las páginas (Page). La propiedad RequestedTheme establecida en un elemento FrameworkElement
es heredado en sus elementos hijos. Podemos anular la herencia
estableciendo la propiedad RequestedTheme en un elemento hijo concreto.
Estableceremos la propiedad en el Frame de la Aplicación provocando que
la misma sea heredada por sus elementos hijos, es decir, las páginas de
la Aplicación:
AppFrame.RequestedTheme = ElementTheme.Light;
En el segundo comando establecemos el RequestedTheme del Frame de la Aplicación al tema oscuro:
AppFrame.RequestedTheme = ElementTheme.Dark;
Al cambiar al tema claro nuestra interfaz se vera de la siguiente forma:
El resultado en video:
Podéis descargar el pequeño ejemplo realizado a continuación:
Más información
- Windows Dev Center: FrameworkElement.RequestedTheme Property
- Windows Dev Center: XAML requested theme sample
- Guruumeditation (Blog de Oliver Matis): Changing app theme on the fly with RequestedTheme