Silverlight: El objeto de silverlight crece pero no aparece el scrollbar

En una página web normal, cuando el contenido interno que está en un elemento DIV crece ya sea porque agregamos contenido de texto o porque aparece un control u otros elementos adicionales, generalmente aparece al lado derecho una barra de desplazamiento para poder observar el contenido que no se puede ver.

Pues resulta que en silverlight no existe el elemento DIV, lo que existe en silverlight y que son equivalentes a los DIV son: Grid, StackPanel, DockPanel, Canvas, ScrollViewer, etc. Esos controles tienen la capacidad de crecer conforme crece su contenido interno. El problema aparece cuando el contenedor principal crece pero el objeto DIV que contiene al objeto de silverlight no crece de ninguna manera. Uno esperaría que aparezca una barra de desplazamiento en el lado derecho de la pantalla, sin embargo, la página no crece en altura.

Existen dos soluciones una aplicando javascript y otra usando el control ScrollViewer.

Usando Javascript:

Los pasos para resolver el problema de la altura de la página son los siguientes:

1º Al control Grid que es por así decir el contenedor principal que generalmente lo tenemos por defecto en la página MainPage.xaml, tenemos que agregarle el evento LayoutUpdated para que se dispare cada vez que el contenido interno crece en altura. Por más mínimo que sea el cambio de altura o inclusive de anchura de un control interno, ese evento se va a disparar.

2º El segundo paso es agregar una línea de código el cual debe ejecutar el evento LayoutUpdatedcada vez que cambie las dimensiones de un control interno:

 3º Finalmente, hay que poner la función de javascript en la página que contiene al objeto de silverlight:

Noten que la función getElementId de javascript devuelve la referencia del elemento de silverlight que previamente se le asignó el nombre "silverlightControlHost".

Cada vez que se dispare el evento LayoutUpdated, éste invoca a una función de javascript la cual se encarga de cambiar la altura del control DIV que contiene al objeto OBJECT que hace referencia al control del silverlight.

Usando el control ScrollViewer:

Más fácil, y menos dolores de cabeza. Si usted llegó a mi blog buscando una solución para la altura en silverlight, está salvado, jeje!.

Lo primero es lo primero, hay que limpiar el código que tenemos en la página xaml. Principalmente la altura del control contenedor más externo se podría reemplazar por MinHeight (solo si fuera necesario). En mi caso, yo quite todos los Height, Width, VerticalAlignment, HorizontalAlignment y dejo los que son estrictamente necesarios de los cuales puse MinHeight y lugar de Height.

El siguiente paso es utilizar el control ScrollViewer. Lo que se debe hacer es colocarlo como el control más externo y lo más importante es ponerle las propiedades VerticalAlignment y HorizontalAlignment con el valor Strech para que se extiendan en toda la página. Adicionalmente usando CSS, hay que poner al 100% el ancho y alto del DIV que contiene al objeto de silverlight y también ponérselo al mismo objeto de silverlight.

Una buena ayuda en el foro de silverlight