Acceder y manipular el DOM desde Silverlight

Para que una aplicación Silverlight pueda acceder a elementos del DOM se pueden utilizar dos clases

  • HtmlPage
  • HtmlDocument

De esta manera podemos acceder a los distintos objetos que ofrece el DOM, a continuación muestro algunos ejemplos prácticos y sencillos.

HtmlElement es la clase que define los elementos del DOM a los cuales podemos acceder.

Obtener información del QueryString

Podemos acceder a los distinto parámetros que recibe la página que contiene nuestro objeto Silverlight utilizando la propiedad QueryString de la clase HtmlDocument.

string parametro = HtmlPage.Document.QueryString["parametro"].ToString();

Cambiar el Título de una página

HtmlDocument documentPage = HtmlPage.Document; 
documentPage.SetProperty("title", "Título de la página");

Acceder a elementos del DOM

HtmlDocument documentPage = HtmlPage.Document; 
foreach (HtmlElement he in documentPage.GetElementsByTagName("div")) 
{ 
     he.SetStyleAttribute("height", "500px"); 
}

Crear un elemento

HtmlElement myDiv = HtmlPage.Document.CreateElement("div"); 
 
myDiv.SetProperty("innerHTML", "<strong>Some HTML Content</strong>"); 
 
myDiv.SetStyleAttribute("border", "solid 1px black"); 
myDiv.SetStyleAttribute("position", "absolute"); 
myDiv.SetStyleAttribute("top", "10px"); 
myDiv.SetStyleAttribute("left", "10px"); 
 
HtmlPage.Document.Body.AppendChild(myDiv); 

Pueden acceder a más información via MSDN.

De esta manera podemos acceder a una cantidad enorme de posibilidades, pero hay que tener en cuenta algo muy importante, y es que hay que permitirle al objeto Silverlight acceder al DOM. Este permiso no puede darselo via XAML, sino que hay que definirlo al momento de crear el objeto Silverlight.

Recordemos que hay 3 maneras de crear un objeto Silverlight :

  1. <object> tag
  2. Silverlight.js
  3. <asp:Silverlight /> control para páginas ASP.NET 3.5
La propiedad para definir el permiso es enableHtmlAccess. Por defecto esta propiedad en Silverlight.js y <asp:Silverlight /> es true, pero utilizando el <object> es false. Por lo que hay que tener cuidado de definir esta propiedad sino nos va a tirar un error al intentar acceder al DOM. Para evitar este error podemos preguntar por HtmlPage.IsEnabled para saber si podemos acceder o no al DOM.

No Comments