Frame en Silverlight c#

Hola chicos, en esta oportunidad les traigo como cargar varias páginas contenidas en la misma página principal, lo cual es muy útil para un menú donde queremos utilizar el mismo diseño de toda la estructura de la página y que solo cambie el formulario que queremos mostrar en un área definida por nosotros.

 Esto es posible gracias al objeto “Frame”, el cual será el contenedor donde las demás páginas podrán renderizar, manos a la obra:

• Lo primero que haremos será crear un proyecto de Silverlight :

• En el MainPage.xaml colocaremos lo siguiente(sustituyen toda la etiqueta del Grid):

<Grid x:Name=»LayoutRoot» Background=»White»>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=»67*»/>

            <ColumnDefinition Width=»233*»/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height=»39*»/>

            <RowDefinition Height=»211*»/>

        </Grid.RowDefinitions>

        <TextBlock Grid.Column=»1″ FontSize=»30″ TextAlignment=»Center» VerticalAlignment=»Center» > Titulo de la pagina</TextBlock>

        <StackPanel Orientation=»Vertical» Grid.Row=»1″>

            <Button x:Name=»enlace1″ Click=»enlace1_Click» Height=»30″ Margin=»5″>enlace 1</Button>

            <Button x:Name=»enlace2″ Click=»enlace2_Click» Height=»30″ Margin=»5″>enlace 2</Button>

            <Button x:Name=»enlace3″ Click=»enlace3_Click» Height=»30″ Margin=»5″>enlace 3</Button>

        </StackPanel>

        <sdk:Frame x:Name=»navContent»  Grid.Column=»1″ Grid.Row=»1″ HorizontalAlignment=»Center» HorizontalContentAlignment=»Stretch» VerticalContentAlignment=»Stretch»  Source=»pagina1″>

            <sdk:Frame.UriMapper>

                <sdk:UriMapper >

                    <sdk:UriMapping Uri=»pagina1″ MappedUri=»/page1.xaml» />

                    <sdk:UriMapping Uri=»pagina2″ MappedUri=»/page2.xaml» />

                    <sdk:UriMapping Uri=»pagina3″ MappedUri=»/page3.xaml» />

                 </sdk:UriMapper>

            </sdk:Frame.UriMapper>

         </sdk:Frame>

    </Grid>

• Y resultara algo así:

• Yo creé 3 paginas como pueden ver en la imagen: page1.xaml, page2.xaml, page3.xaml las cuales serán las que cargaran en el frame, si se fijan el frame dice : (pagina1) es porque en su propiedad Source tiene pagina1, eso significa que cargara conteniendo page1.
• Continuamos, en el mainpage.xaml.cs, falta colocar los eventos click de los botones, para que allí coloquemos la funcionalidad para navegar, agregamos lo siguiente en el .cs:

  private void enlace1_Click(object sender, RoutedEventArgs e)

        {

            this.navContent.Navigate(new Uri(“pagina1”, UriKind.Relative));

        }

         private void enlace2_Click(object sender, RoutedEventArgs e)

        {

            this.navContent.Navigate(new Uri(“pagina2”, UriKind.Relative));

        }

         private void enlace3_Click(object sender, RoutedEventArgs e)

        {

            this.navContent.Navigate(new Uri(“pagina3”, UriKind.Relative));

        }

• Si notan, lo que agregamos en cada botón fue:

        this.navContent.Navigate(new Uri(«pagina2», UriKind.Relative));

ya con eso tenemos un fiel ejemplo de como utilizar frame en Silverlight, adjunto el proyecto AQUÍ, espero sea de utilidad .