Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

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

Publicada el 13 agosto, 201213 agosto, 2012
Twittear

dia14

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">

<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">

Estatico

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>

<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.

HTMLScroll

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">

<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.

Resoluciones

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!

2 comentarios en «Día 14: Tamaño de pantalla y contenedores»

  1. Cynthia Rodriguez dice:
    26 junio, 2014 a las 5:55 pm

    Estoy desarrollando mi primer proyecto de tipo Aplicación de Silverlight, y estoy batallando para programar mi página principal, esta tiene un par de imágenes de fondo y una animación, además de las opciones de menú, y no logro hacer que se ajusten y se vean bien, dependiendo del tamaño y resolución del monitor en el que se ejecuten, tendrás algún ejemplo que pueda ayudarme??
    Saludos y gracias

    Responder
    1. victor dice:
      19 agosto, 2014 a las 7:36 pm

      Hola … estoy trabajando c on silverligth y WCF y ado

      cuando copio la etiqueta embed…… sale un error de que no se acepta embed
      nesesito que mi pagina principal ocupe toda la resolucion de la pantalla
      ayudaa

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress