Día 14: Tamaño de pantalla y contenedores

En este penúltimo día de la serie vamos a ver cuales son las mejores prácticas para el uso de contenedores y como poder aprovechar las diferentes resoluciones de la pantalla de nuestros usuarios.

Tamaños de pantalla

Es definitivo, nunca sabrás en que monitor verá su aplicación tu usuario. Así que debes ponerte a pensar en cual es la opción mas adecuada para tu proyecto. te la pondré mas fácil si quieres. Tienes dos opciones realmente, puedes colocar medidas estáticas o bien hacer que tu aplicación se adapte a la resolución de tu pantalla (dentro de esta opción es que estoy considerando la de la pantalla completa también).

Para colocar las medidas estáticas dentro de tu aplicación debes modificar dos archivos. El primero es tu archivo XAML de visualización principal (si no cambias nada es tu MainPage), y lo debes dejar de la siguiente manera.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:MiClase="clr-namespace:Clases.Clase"
xmlns:local="clr-namespace:Clases"
x:Class="Clases.MainPage" Width="640" Height="2480">

Puedes ver dos cosas con el tamaño de resolución que le metimos. La primera es que el ancho de tu aplicación no es suficiente para cubrir todo el espacio, así que de manera preestablecida el color restante entre el tamaño de tu aplicación y el de la ventana será cubierto por el color blanco. Y la otra es que como verás no hay una forma de que te puedas desplazar hacia abajo para poder ver el contenido total.

Para poder corregir el primer error solo debes ajustar la ventana al tamaño esperado, para el segundo error, abre tu archivo HTML (o .aspx en caso de que sea este el que estés utilizando) y en el tag del objeto que contiene tu XAP es donde debes modificar el tamaño de tu aplicación a las medidas que tu desees.

<div id="silverlightControlHost"><object width="100%" height="2480" classid="clsid:dfeaf541-f3e1-4c24-acac-99c30715084a"><param name="source" value="ClientBin/Clases.xap" /><param name="onerror" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="4.0.60310.0" /><param name="autoUpgrade" value="true" /><param name="src" value="data:application/x-silverlight-2," /><embed width="100%" height="2480" type="application/x-silverlight-2" src="data:application/x-silverlight-2," source="ClientBin/Clases.xap" onerror="onSilverlightError" background="white" minRuntimeVersion="4.0.60310.0" autoUpgrade="true" /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=4.0.60310.0" style="text-decoration: none;"><img src="http://go.microsoft.com/fwlink/?LinkID=161376" alt="Get Microsoft Silverlight" style="border-style: none" /></a></object><iframe id="_sl_historyFrame" style="height: 0px; visibility: hidden; width: 0px; border-width: 0px;" width="320" height="240"></iframe></div>

Así es como puedes simplemente solucionar el problema de desplazamiento hacia abajo en tu página HTML.

Esa es la parte a la que podrías acostumbrarte pues así es como funciona cualquier aplicación web, pero aquí lo mas recomendable es permitir que sin importar el tamaño de la pantalla, tus controles sean capaces de poder adaptarse sin problema. Para ello es simple, solo coloca el siguiente XAML en tu página principal.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Clases.MainPage"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="1024" d:DesignHeight="768">

Necesitas dos espacios de nombres primero (en el ejemplo de arriba los puedes ver como “d” y “mc”, recuerda que los puedes nombrar como gustes). El espacio de nombres “mc” contiene el atributo Ignorable que te permite ver que prefijos serán ignorados dentro de tu XAML. El espacio de nombres “d” tiene los atributos de DesignWidth y DesignHeight que te permiten ver en tiempo de diseño un tamaño específico, pero en tiempo de ejecución tomarán el tamaño total de la ventana del explorador.

En este caso mas que una buena práctica, te recomiendo que uses el tipo de elemento que necesitas para cada escenario, recuerda que cada aplicación tiene sus variables.

Contenedores

En el caso de los contenedores si hablaremos de mejores prácticas.

Lo primero que debes evitar en este caso es hacer uso innecesario de contenedores, usa los menos posibles. Si deseas por ejemplo fragmentar los espacios en un Grid usa las filas y columnas, no uses mas “mini Grids”.

El control WrapPanel es genial (lo confieso, mi contenedor favorito). Pero utilizarlo incrementa el tamaño de tu .XAP así que recuerda utilizarlo como última opción o cuando es estrictamente necesario.

Procura utilizar el Grid como contenedor preferido, además de ser el mas flexible es el contenedor que te dará mayores características.

Conclusión

Es bien sencillo poder acostumbrarte a utilizar las dos funcionalidades antes descritas. Solo es cuestión de práctica como siempre. Así que ya sabes ¡A practicar!