Windows Phone nos proporciona dos estilos para nuestros teléfonos que afectan al background, estos son dark o light
Podemos cambiar el valor en Settings (en el emulador también aparece)
Es importante tener en cuenta nuestros diseños para que funcione en cualquiera de los dos temas, para ello lo primero que tenemos que saber es como detectar cual es el que el usuario ha elegido para adaptar nuestros estilos de la aplicación al elegido por el usuario. La detección del tema que tiene el usuario en el teléfono es muy manual tanto que nos basaremos en detectar el color de fondo que tiene la aplicación, para ello debemos utilizar la siguiente tabla
Para detectarlo utilizaremos la siguiente instrucción
SolidColorBrush backgroundBrush = Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;
Si la variable backgroundBrush es igual a Color.FromArgb(255, 0, 0, 0) estamos con Dark Theme y si es igual a Color.FromArgb(255, 255, 255, 255) estamos en Light Theme, de esta manera tan sencilla sabemos si el usuario ha elegido un tema u otro.
Vamos a ejecutar la aplicación del articulo Windows Phone–Tutorial – Navegación con MVVM Light Toolkit eligiendo Light Theme
Podemos ver que los iconos de la barra de aplicación han cambiado automáticamente de estilo sin tener que hacer nada, pero que pasa si esa imagen la metemos n un objeto Image en cualquier parte de la pantalla.
En el tema Light la imagen sigue estando pero el usuario no la ve porque es blanca, con lo que deberiamos cambiarla dependiendo del tema. Existe un truco para no tener que dibujar dos iconos, uno para cada tema, y es envolver la imagen con un rectángulo relleno con la brocha del tema que esta en el recurso PhoneForegroundBrush y con mascara de opacidad
1 <Rectangle Width="48" Height="48" Fill="{StaticResource PhoneForegroundBrush}" Margin="100,152,332,344"> 2 <Rectangle.OpacityMask> 3 <ImageBrush ImageSource="/Assets/appbar.next.rest.png"/> 4 </Rectangle.OpacityMask> 5 </Rectangle> 6
Como podéis observar ya aparece nuestra imagen, tanto en fondo negro como en blanco.
Otro concepto que tenemos que tener en cuenta en nuestros diseños es el concepto accent color, que es el color que elige el usuario para resaltar, el color elegido esta en el recurso PhoneAccentColor
La lista de colores que tiene el usuario a elegir es :
Por ejemplo podemos aplicar el estilo PhoneAccentColor al titulo de la página y al fondo de la ventana
1 <Grid x:Name="LayoutRoot" Background="Transparent"> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="Auto"/> 4 <RowDefinition Height="*"/> 5 </Grid.RowDefinitions> 6 7 <Rectangle Stroke="Black" Grid.RowSpan="2"> 8 <Rectangle.Fill> 9 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 10 <GradientStop Color="{StaticResource PhoneBackgroundColor}" Offset="0"/> 11 <GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"/> 12 </LinearGradientBrush> 13 </Rectangle.Fill> 14 </Rectangle> 15 16 <!--TitlePanel contains the name of the application and page title--> 17 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 18 <TextBlock x:Name="ApplicationTitle" Text="Test" Style="{StaticResource PhoneTextNormalStyle}"/> 19 <TextBlock x:Name="PageTitle" Text="TEMAS" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"> 20 <TextBlock.Foreground> 21 <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/> 22 </TextBlock.Foreground> 23 </TextBlock> 24 </StackPanel> 25 26 <!--ContentPanel - place additional content here--> 27 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 28 <TextBlock Height="589" HorizontalAlignment="Left" Margin="9,12,0,0" Name="textBox1" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat, ipsum vehicula lobortis placerat, felis lorem varius massa, a accumsan mi justo vel augue. Donec venenatis magna et mauris ornare convallis. Mauris ut metus purus, eu pharetra nisi. Aliquam dignissim enim id nulla consequat ut tempor tortor porttitor. Morbi ultrices leo in augue rutrum ultrices. Proin consequat, metus id blandit tincidunt, quam neque blandit nisl, non consequat eros eros a lorem. Fusce tristique ornare convallis. Quisque ut tellus vel risus imperdiet vehicula. Praesent non metus eget massa cursus euismod. Etiam tempor rutrum nunc. Aenean aliquet dapibus felis sit amet elementum." VerticalAlignment="Top" Width="441" TextWrapping="Wrap" /> 29 </Grid> 30 </Grid> 31
Nos queda la aplicación
