** Post compatible con la versión Silverlight 3 RTW **

En los siguientes posts estaré platicando del nuevo Framework de Navegación introducido en la version 3 de Silverlight. La idea es ir platicando a detalle sobre las caracteristicas de framework, y poco a poco iremos creando una aplicación cada vez más robusta basada en este concepto.

Qué es el Framwork de Navegación en SL3?

Es una de las caracteriticas introducidas en Silverlight 3 (todavia en beta) que nos permite inscrustar ‘frames’ dentro de nuestos xaml y permitir a las ‘paginas’ contenidad en estos frames conta con URL´s unicos, que a su vez sean amigables para los ‘motores de busquedas’.

Así pues, podemos hacer referencia a una sola parte de nuestra applicación web, llamadas pages, usando url´s del tipo: http://www.domino.com/page.html#home; en donde la parte a notar, dentro de este concepto, es #home, que le indica a la aplicación que información debe de mostrar (más adelante explicaremos con mayor detalle este punto)

Configurar una aplicacion SL3 para usar el framework

Para poder utilizar el framework de navegación en nuestros proyectos es necesario agregar la referencia System.Windows.Controls.Navigation a nuestro proyecto (incluida en las librerias de SL3).

image

Y como ya es bien sabido, debemos agregar nuestra referencia en nuestro archivo xaml.

image

Codificando

Una vez que hemos preparado nuestra solución para usar el framework de navegación podemos comenzar a codificar nuestra applicación. Lo primero que haremos es crear el menu de navegación con los tipicos menus de Inicio y Acerca, además agregaremos una opción de Clientes que nos servirán en los siguientes post (por ahora no le daremos funcionalidad a esta opción).

Una vez agregado el menú, comenzaremos a utilizar elementos del framework comenzando por poner un ‘frame’.

1
<span style="color: #606060" id="lnum1"> 1:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=&quot;LayoutRoot&quot;</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum2"> 2:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid.ColumnDefinitions</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColumnDefinition</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">=&quot;0.20*&quot;</span><span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum4"> 4:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColumnDefinition</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">=&quot;0.80*&quot;</span><span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum5"> 5:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid.ColumnDefinitions</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum6"> 6:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">=&quot;8,8,8,8&quot;</span> <span style="color: #ff0000">VerticalAlignment</span><span style="color: #0000ff">=&quot;Top&quot;</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum7"> 7:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">HyperlinkButton</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">=&quot;Inicio&quot;</span><span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum8"> 8:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">HyperlinkButton</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">=&quot;Acerca&quot;</span><span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum9"> 9:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">HyperlinkButton</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">=&quot;Clientes&quot;</span><span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum10"> 10:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum11"> 11:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">nav:Frame</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=&quot;MainFrame&quot;</span> <span style="color: #ff0000">Grid</span>.<span style="color: #ff0000">Column</span><span style="color: #0000ff">=&quot;1&quot;</span> <span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum12"> 12:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span>

*Yo he decidido poner este par de bloques (menu y frame) en un Grid, pero cada quien podrá hacerlo como más le guste.

Ya que hemos definido nuestro espacio de trabajo principal, agregaremos un par de archivos xaml a nuestra solución en donde se definirá el contenido de cada una de la opciones del menu, los cuales son llamados ‘paginas (pages en ingles)’. La sugerencia es ponerlos en una carpeta especial para este tipo de archivos xaml. En este paso, utilizaremos una de los elementos contenido en las platillas para el compomente de control de navegación llamada ‘Silverlight Page’

image

Y nuestra solución se vera así:

image

Principales caracteristicas que nuestros archivos xaml para nuestras ‘pages’:

  • El tag principal del archivo debe de ser: navigation:Page
  • Dentro del tag principal, el contenido del atributo Title será el titulo que el navegador mostrará para la página.
  • Una vez mas, el tag principal tiene que hacer referencia a nuestro esamblado de Navegación.
  • El contenido de nuestro xaml será lo que se muestre en nuestro frame de nuestro xaml principal.
1
<span style="color: #606060" id="lnum1"> 1:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">navigation:Page</span> <span style="color: #ff0000">x:Class</span><span style="color: #0000ff">=&quot;Silverlight3.NavigationFramework.Contents.Inicio&quot;</span>

1
<span style="color: #606060" id="lnum2"> 2:</span> <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span>

1
<span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #ff0000">xmlns:x</span><span style="color: #0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span>

1
<span style="color: #606060" id="lnum4"> 4:</span> <span style="color: #ff0000">xmlns:navigation</span><span style="color: #0000ff">=&quot;clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation&quot;</span>

1
<span style="color: #606060" id="lnum5"> 5:</span> <span style="color: #ff0000">Title</span><span style="color: #0000ff">=&quot;SL3 Framework de Navegación.- Página principal&quot;</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum6"> 6:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=&quot;LayoutRoot&quot;</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">=&quot;White&quot;</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum7"> 7:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">=&quot;Página principal&quot;</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">=&quot;24&quot;</span> <span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum8"> 8:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #606060" id="lnum9"> 9:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">navigation:Page</span><span style="color: #0000ff">&gt;</span>

Ahora bien, una vez que tenemos todos nuestros elementos listo, podemos pasar a la parte programativa, que será la encargada de hacer funcionar el framework y el paso entre páginas.

Hasta aquí, es decir para este ejemplo, la forma en que navegaremos es cargando las páginas de contenido en nuestro frame de nuestra xaml principal usando los eventos de click de nuestros HiperlinkButtons de nuestro menú. Los tres eventos apuntaran hacia la misma función evitando así reescribir código inecesariamente. Ademas agregaremos un atributo de ‘Tag’ a cada uno de las opciones de menú para diferenciar hacia que ‘pagina’ apuntará nuestra applicación.

1
<span style="color: #606060" id="lnum1"> 1:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">HyperlinkButton</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">=&quot;Inicio&quot;</span> <span style="color: #ff0000">Click</span><span style="color: #0000ff">=&quot;NavigateButton_Click&quot;</span> <span style="color: #ff0000">Tag</span><span style="color: #0000ff">=&quot;/Contents/Home.xaml&quot;</span> <span style="color: #0000ff">/&gt;</span>

1
<span style="color: #606060" id="lnum2"> 2:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">HyperlinkButton</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">=&quot;Acerca&quot;</span> <span style="color: #ff0000">Click</span><span style="color: #0000ff">=&quot;NavigateButton_Click&quot;</span> <span style="color: #ff0000">Tag</span><span style="color: #0000ff">=&quot;/Contents/About.xaml&quot;</span> <span style="color: #0000ff">/&gt;</span>

Y en nuestra función a la que apunta nuestro even handler, en este caso NavigateButton_Click, definiremos un HyperlinkButton para leer nuestro sender, así como un string para definir el url del contenido. Y la parte que corresponde al framework de navegación que es apuntar la propiedad de ‘Navigate’ de nuestro frame hacia la nueva url.

1
<span style="color: #606060" id="lnum1"> 1:</span> <span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> NavigateButton_Click(<span style="color: #0000ff">object</span> sender, RoutedEventArgs e)

1
<span style="color: #606060" id="lnum2"> 2:</span> {

1
<span style="color: #606060" id="lnum3"> 3:</span> HyperlinkButton btn = sender <span style="color: #0000ff">as</span> HyperlinkButton;

1
<span style="color: #606060" id="lnum4"> 4:</span> <span style="color: #0000ff">string</span> url = btn.Tag.ToString();

1
<span style="color: #606060" id="lnum5"> 5:</span>

1
<span style="color: #606060" id="lnum6"> 6:</span> <span style="color: #0000ff">this</span>.MainFrame.Navigate(<span style="color: #0000ff">new</span> Uri(url, UriKind.Relative));

1
<span style="color: #606060" id="lnum7"> 7:</span> }

Y listo, tenemos nuestra primera aplicación que utiliza el framework de navegación.

Tiempo de ejecución

La forma de acceder a una aplicación con framework de navegación es como la usual, hacemos la llamada a nuestra página web donde esta montado el xap:

http://ligasilverlight.jorgelevy.com/Silverlight3.NavigationFramework.Part1TestPage.html

Pero si queremos ingresar directamente a una ‘página’ de nuestra aplicación, podemos utilizar url del tipo:

http://ligasilverlight.jorgelevy.com/Silverlight3.NavigationFramework.Part1TestPage.html#/Contents/About.xaml 

Donde encontrar este código:

KodiakLS.codeplex.com (I’m in love with codeplex.com)

Proximamente:

  • Como modificar el url para uso de nombres mas amigables
  • Como cargar información dependiendo de parametros en el url
  • Plantilla de projecto para el framework de navegación.
  • Etc…

Es decir, el tema da para mucho…

Saludos.