Hay una frase que desde que la leí en Twitter ha sido uno de mis más grandes mantras, esta frase es: La magia está en los detalles. Y una característica de Windows Phone que no implica más que un simple detalle es justamente una de las más desaprovechadas del SO. Esta característica es su resolución.
En Windows Phone 8 contamos con la posiblidad de manejar tres resoluciones diferentes las cuales explico brevemente a continuación.
WVGA
Es la resolución que desde el lanzamiento de Windows Phone ha existido, no hay mucho por decir, su resolución es de 480 x 800, su relación de aspecto es de 15:9 y es la única soportada por ambas versiones del SO, tanto las versiones 7.x como Windows Phone 8.
WXGA
Es la resolución que muestra la mayor compatibilidad con las pantallas actuales (como la de tu sala), su resolución es de 768 x 1280, su relación de aspecto es de 16:9 y es una de las dos nuevas resoluciones que Windows Phone 8 es capaz de admitir.
HD(720 p)
Esta resolución quizá sea la que más conocida te resulte dado que antes de las pantallas de alta definición, este tipo de resolución fue la indiscutida ganadora en las pantallas, de hecho a partir de este nivel es que se comienza a considerar a una pantalla como de alta definición, su resolución es igual a 720 x 1280, su relación de aspecto es de 15:9 y al igual que la anterior, solo es soportada por Windows Phone 7.
Un detalle importante que debes considerar es que comúnmente asumimos que la resolución es proporcional al tamaño del dispositivo y no es así. Para poner un buen ejemplo, ve la imagen siguiente.
![image]( "image")
Ahora puedes comparar sus características en cuanto a la pantalla.
| Modelo | Lumia 900 (blanco) | Lumia 920 (amarillo) |
| Resolución | 480 x 800 | 768 x 1280 |
| Tamaño de pantalla | 56 x 93 mm | 58 x 97 mm |
Como puedes ver, el tamaño físico de la pantalla no es un factor determinante para su resolución, a peras de unos cuantos milímetros de aumento en la pantalla, la resolución prácticamente es duplicada en el 920 con respecto al 900.
Como poder determinar la resolución en mi aplicación
Para poder saber cual es la resolución de con la que cuenta un dispositivo y determinar en función a ello el acomodo, visibilidad y despliegue de elementos, comienza por crear una nueva solución Windows Phone 8, dentro de esta solución crea una nueva carpeta y ahí una nueva clase llamada HelperResolucion. Tu proyecto debe quedar de la siguiente manera.
![image]( "image")
Permite que la clase sea pública y también estática.
namespace DiferentesResoluciones
{
public static class HelperResolucion
{
}
}
Dentro de la clase crea un enumerador público que se encargue de las tres posibilidades que hay para la resolución.
public enum Resoluciones
{
WVGA,
WXGA,
HD720P
}
Después crea un método público y estático llamado ObtenerResolucion();
public static Resoluciones ObtenerResolucion()
{
}
Por último, basándote en la propiedad del factor de escala, que se encuentra en la clase App, podrás determinar el tipo de resolución con el que estás trabajando y con un par de condiciones podrás controlar esta operación.
public static Resoluciones ObtenerResolucion()
{
if (App.Current.Host.Content.ScaleFactor == 100)
{
return Resoluciones.WVGA;
}
else if (App.Current.Host.Content.ScaleFactor == 160)
{
return Resoluciones.WXGA;
}
else //App.Current.Host.Content.ScaleFactor == 150
{
return Resoluciones.HD720P;
}
}
Una vez que tengas esta clase finalizada, podrás consultarla desde cualquier página de tu aplicación, para este ejemplo vamos a utilizar el método sobre escrito OnNavigatedTo() de MainPage.xaml. Un tip que te sugiero es que uses el fragmento de código para el operador switch.
![image]( "image")
Si usas el snippet de manera adecuada y además de ello estableces como condición el método ObtenerResolucion() obtendrás todas las opciones posibles del enumerador.
switch (HelperResolucion.ObtenerResolucion())
{
case HelperResolucion.Resoluciones.WVGA:
break;
case HelperResolucion.Resoluciones.WXGA:
break;
case HelperResolucion.Resoluciones.HD720P:
break;
}
Por último , solo necesitamos demostrar este ejercicio con algún elemento y el fondo de la aplicación es una excelente idea. Establece un color diferente para el fondo por cada resolución.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
switch (HelperResolucion.ObtenerResolucion())
{
case HelperResolucion.Resoluciones.WVGA:
ContentPanel.Background = new SolidColorBrush(Colors.Green);
break;
case HelperResolucion.Resoluciones.WXGA:
ContentPanel.Background = new SolidColorBrush(Colors.Blue);
break;
case HelperResolucion.Resoluciones.HD720P:
ContentPanel.Background = new SolidColorBrush(Colors.Purple);
break;
}
}
El resultado dependerá del emulador con que ejecutes tu aplicación. Recuerda que puedes cambiar de tipo de emulador antes de ejecutar la aplicación.
![image]( "image")
Y al probar los resultados deberán ser como lo siguiente.
Emulador WVGA (no importa cual de los dos elijas).
![image]( "image")
Emulador WXGA
![image]( "image")
Emulador 720p
![image]( "image")
De esta manera podrás manipular la reacción de tu App y su apariencia en función de la clase que determina la resolución con la que cuenta tu dispositivo y agregarás un elemento adicional que podrá ser el gran distintivo. ¿Quién sabe? ¡Hasta podrías hacer que tu aplicación luciera completamente diferente en función de la resolución!
Puedes descargar aquí el código de ejemplo.
![]()
) instruction.
