Source: https://javiersuarezruiz.wordpress.com/2013/11/19/tips-and-tricks-windows-phone-optimiza-tus-apps-a-pantallas-grandes/
Timestamp: 2017-02-21 11:59:49+00:00

Document:
[Tips and Tricks] Windows Phone. Optimiza tus Apps a pantallas grandes | Javier Suárez | Blog
19 noviembre 2013	[Tips and Tricks] Windows Phone. Optimiza tus Apps a pantallas grandes
Más grande. Se suprime el límite de tamaño en resolución establecido permitiendo la llegada en el futuro de teléfonos con pantallas de 5 o 6 pulgadas con resolución de 1080p (1080 × 1920).
Más accesible. Se realiza un esfuerzo por facilitar el uso del dispositivo a personas invidentes. Se permite la gestión de llamadas, correos, contactos, uso de Skype o Lync, etc.
Con los dispositivos recién anunciados por Nokia se aumenta el rango de posibilidades en resoluciones y aspect ratio. El Nokia Lumia 1520 cuenta con una resolución de 1080x1920px y el Nokia Lumia 1320 cuenta con una resolución de 720x1280px, ambos con una pantalla de 6 pulgadas y 16:9 de aspect ratio.
Esto abre un nuevo debate a los desarrolladores, ¿cómo preparo mis Apps para sacar el máximo provecho en este tipo de dispositivos?
&lt;ScreenResolution Name=&quot;ID_RESOLUTION_WVGA&quot;/&gt;
&lt;ScreenResolution Name=&quot;ID_RESOLUTION_WXGA&quot;/&gt;
&lt;ScreenResolution Name=&quot;ID_RESOLUTION_HD720P&quot;/&gt;
App WP8 soportando 720p en 1080p
Las Aplicaciones Windows Phone 7 funcionaran sin problemas en dispositivos con la actualización Update 3 y con un aspect ratio de 16:9. Sin embargo, y dado que estas Aplicaciones se crearon con un aspect ratio de 15:9, no se reescalaran correctamente dejando una banda negra en la parte superior de la pantalla.
App WP7 en 1080p
Como ya hemos comentado, contamos con una nueva resolución. Sin duda, para poder ofrecer a nuestros usuarios la mejor experiencia posible en cualquiera de las resoluciones disponibles, necesitamos identificar cada una de ellas, la nueva resolución de 1080p incluida:
Sin embargo, entre las resoluciones 720p y 1080p no podemos encontrar diferencias utilizando la propiedad App.Current.Host.Content.ScaleFactor o Application.Current.Host.Content.ActualHeight ya que en ambas devuelven los mismos resultados, 150 y 853 respectivamente.
_screenDpiX = (double)DeviceExtendedProperties.GetValue(&quot;RawDpiX&quot;);
_screenDpiY = (double)DeviceExtendedProperties.GetValue(&quot;RawDpiY&quot;);
_resolution = (Size)DeviceExtendedProperties.GetValue(&quot;PhysicalScreenResolution&quot;);
return (_screenSize &gt;= 6.0f);
Detectado cuando estamos ante las nuevas pantallas de 6″ de los nuevos dispositivos que llegarán como el Nokia Lumia 1520 o el Nokia Lumia 1320 nos permite adaptar dinamicamente el layout de nuestra Aplicación para aprovechar de la mejor manera posible cada dispositivo.
Vamos a crear un listado tipo album que adaptaremos segun el tipo de resolución. En dispositivos WVGA y WXGA mostraremos dos columnas mientras que en dispositivos 720p y 1020p mostraremos una columna más de una forma similar a como el propio sistema muestra una columna más de tiles.
&lt;Grid Margin=&quot;10, 5&quot;&gt;
&lt;Image Grid.Row=&quot;0&quot; Source=&quot;{Binding Image}&quot; Style=&quot;{StaticResource GridImage}&quot; /&gt;
&lt;TextBlock Grid.Row=&quot;1&quot; Margin=&quot;0&quot; Text=&quot;{Binding Title}&quot; /&gt;
Necesitamos datos para poder probar… vamos a darle solución. Crearemos una viewmodel para nuestra vista donde obtendremos un listado de elementos.
Creamos un método LoadData donde se creará un listado de datos que para este ejemplo será el listado de juegos de la inminente Xbox One:
Title = &quot;Forza Motorsport 5&quot;,
Image = &quot;http://compass.xboxlive.com/assets/cd/33/cd33e4ec-5406-40d4-8129-b92504e877d3.jpg?n=Forza%205.jpg&quot;
Title = &quot;Ryse: Son of Rome&quot;,
Image = &quot;http://compass.xboxlive.com/assets/4a/8c/4a8cc02a-ed1a-432f-9fbd-42de90a4525e.jpg?n=Ryse.jpg&quot;
Title = &quot;Kinect Sports Rivals&quot;,
Image = &quot;http://compass.xboxlive.com/assets/95/1e/951e1851-a32b-4738-903a-ed58839cb0bc.jpg?n=KinectSportsRivals.jpg&quot;
Title = &quot;Dead Rising 3&quot;,
Image = &quot;http://compass.xboxlive.com/assets/bd/83/bd835a75-d7be-4134-b7c7-b9730f8b3dde.jpg?n=DeadRising3_hubhero.jpg&quot;
Title = &quot;Halo para Xbox One&quot;,
Image = &quot;http://compass.xboxlive.com/assets/17/69/1769a7af-4a9a-4b23-9ef7-ddb9dbdc10a3.jpg?n=HaloXboxOne-200x190.jpg&quot;
Title = &quot;Sunset Overdrive&quot;,
Image = &quot;http://compass.xboxlive.com/assets/f9/60/f9606a94-2318-4b8a-87b1-a387cfe96661.jpg?n=SunsetOverdrive.jpg&quot;
Title = &quot;Quantum Break&quot;,
Image = &quot;http://compass.xboxlive.com/assets/97/16/9716a7e4-62ed-403b-a2de-19aa9e34445a.jpg?n=Quantum%20Break.jpg&quot;
Title = &quot;Killer Instinct&quot;,
Image = &quot;http://compass.xboxlive.com/assets/07/1c/071c4e77-273e-45e2-84fd-2a0006eb582a.png?n=KillerInstinct200x190.png&quot;
Title = &quot;Project: Spark&quot;,
Image = &quot;http://compass.xboxlive.com/assets/ab/bf/abbfc373-38e0-4fe6-88a1-3d325ff571d0.png?n=ProjectSpark_banner_tree_200x190.png&quot;
Title = &quot;Zoo Tycoon&quot;,
Image = &quot;http://compass.xboxlive.com/assets/fb/df/fbdfa0e9-fc9b-4c38-a512-f6fb421e4924.jpg?n=Zoo_Tycoon_200x190.jpg&quot;
Title = &quot;Titanfall&quot;,
Image = &quot;http://compass.xbox.com/assets/8f/db/8fdb6276-3d2e-49e5-9ba6-76082d63e715.jpg?n=hero-titanfall-metro-200x190.jpg&quot;
Title = &quot;Call of Duty: Ghosts&quot;,
Image = &quot;http://compass.xboxlive.com/assets/c7/b9/c7b96d97-d1f7-4ffe-9d52-a29298383e3f.jpg?n=COD_Ghosts.jpg&quot;
Creamos un estilo por defecto que se utilizará en nuestra Aplicación. En este archivo de recursos crearemos los estilos a usar por defecto, en nuestro ejemplo, el estilo por defecto del listado:
&lt;Style x:Key=&quot;ListStyle&quot; TargetType=&quot;phone:LongListSelector&quot;&gt;
&lt;Setter Property=&quot;GridCellSize&quot; Value=&quot;140, 140&quot; /&gt;
&lt;ResourceDictionary Source=&quot;Themes/DefaultStyles.xaml&quot; /&gt;
Style=&quot;{StaticResource ListStyle}&quot;
Crearemos otro archivo de recursos destinado a sobrescribir el utilizado por defecto en dispositivos con pantallas grandes. En este archivo de recursos definimos el estilo a usar en nuestra lista album:
Nos crearemos un helper que utilizaremos para detectar si estamos ante un dispositivo 1080p (tal y como vimos previamente) para cargar dinámicamente el archivo de recursos destinado a pantallas grandes y sobrescribir el layout:
Source = new Uri(&quot;/EjemploResolucion;component/Themes/HDStyles.xaml&quot;, UriKind.RelativeOrAbsolute)
Aprovechamos el espacio mejor!
NOTA: Es importante recordar que con el Update 3 no hemos recibido un nuevo SDK. Tendremos emulador de 1080p proximamente pero por ahora probaremos usando los emuladores actuales, en concreto, el emulador 720p. Nokia pondrá en su servicio Remote Device Access dispositivos 1080p a disposición de los desarrolladores.
Tenemos otro listado de puntos importantes en los cuales centrar nuestra atención con el objetivo de preparar la Aplicación a cualquier resolución:
SplashScreen: Para poder utilizar una SplashScreen en dispositivos 1020p debemos utilizar una imagen llamada SplashScreenImage.Screen-720p.jpg. Para que se visualice correctamente la imagen debe ser de 720x1280px. La imagen se escalara en dispositivos 1080p para ocupar la pantalla completa. Si queremos evitar este escalado debemos utilizar una imagen de 1080x920px. En este caso, en 1080p no se realizaría ningun escalado pero si se reduciría en dispositivos 720p.
Uso de imágenes a mayor resolución. Es recomendable utilizar recursos preparados para 1080p y dejar al sistema escalar la imagen a resoluciones menores como 720p en caso necesario.
Mayor uso de memoria. Con una pantalla mayor y mejor resolución como hemos visto se tiende a utilizar recursos de mayor calidad, lo que provoca también un mayor consumo de memoria. Recordar que podemos solicitar un mayor consumo de memoria utilizando la etiqueta ID_FUNCCAP_EXTEND_MEM en el archivo de manifiesto. Más información en el siguiente enlace.
Publicado por Javier Suárez Ruiz en Windows Phone Etiquetado: 1080p, Tips and Tricks, windows phone
← [Tips and Tricks] Windows Phone. A specified communication resource (port) is already in use by another application	[Tips and Tricks] Windows Phone. Detener la sintetización de voz →
Un pensamiento en “[Tips and Tricks] Windows Phone. Optimiza tus Apps a pantallas grandes”	Pingback: Tips & Tricks de desarrollo para Windows Phone - MSDN España - Site Home - MSDN Blogs

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución