Silverlight tecnica di navigazione utilizzo di più pagine contemporaneamente

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_silverlight-utilizzare-piu-pagine-contem_1021.aspx

Introduzione

In questo articolo introduttivo vedremo come creare un progetto in Silverlight, che ci permetta di navigare tra più pagine Silverlight ed utilizzarle in contemporaneamente. Il nostro esempio di navigazione, riguarda due pulsanti situati nella parte superiore, che avranno il compito di aprire le pagine, in questo modo si potranno visualizzare le singole pagine di Silverlight,
Tutto questo utilizzando il controllo border e grid.

Il tutto come mostrato in figura 1.

Figura 1

Impostazione della pagina

Dopo aver creato un nuovo progetto in Silverlight, aggiungiamo al nostro progetto due pagine, una chiamata Page1, e l’altra chiamata Page2.
Terminata tale operazione, inseriamo nella pagina principale due pulsanti, a questo punto non ci resta che impostare le proprietà di riga del controllo Grid, in questo modo forniamo all’aspetto grafico, una pulsantiera di navigazione nella parte superiore, mentre nella parte inferiore, verrà visualizzata la pagina di navigazione.

Il tag Grid, al suo interno, conterrà un tag definitivo di tipo grid.RowDefinitions, nel quale andiamo ad impostare le altezze della righe.
Terminata la definizione della griglia, aggiungiamo un tag di tipo border, in cui verranno visualizzati di volta in volta le pagine, e due pulsanti.
Nell’evento click del pulsante, doppiamo scrivere il codice che ci permette di visualizzare le pagine, aggiunte al nostro progetto in precedenza.

Qui di seguito si riporta il codice XAML

<Grid x:Name="LayoutRoot" Background="White" Margin="5" >

<Grid.RowDefinitions>

<RowDefinition Height="41*"></RowDefinition>

<RowDefinition Height="249*"></RowDefinition>

</Grid.RowDefinitions>

<Border BorderBrush="Azure" BorderThickness="1" Name="borderCaricamento" Background="AliceBlue" Margin="0,41,0,0" Grid.RowSpan="2"></Border>

<Button Content="Pagina 1" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="BtnPagina1" VerticalAlignment="Top" Width="75" Click="BtnPagina1_Click" />

<Button Content="Pagina 2" Height="23" HorizontalAlignment="Left" Margin="101,12,0,0" Name="btnPagina2" VerticalAlignment="Top" Width="75" Click="btnPagina2_Click" />

</Grid>

Ora passiamo in visualizzazione codice, e precisamente nell’evento click del pulsante1 e successivamente nel pulsante 2.
Dobbiamo scrivere il codice che visualizzerà le pagine inserite precedentemente, dopo aver creato un istanza di oggetto di una delle pagine, impostiamo la proprietà child dell’oggetto border con l’oggetto di pagina appena creato.

Qui di seguito si riporta il codice del pulsante 1

VB.Net

Private Sub BtnPagina1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Dim pagina1 As New Page1()

borderCaricamento.Child = pagina1

End Sub

C#

private void BtnPagina1_Click(object sender, RoutedEventArgs e)

{

Page1 pagina1 = new Page1();

borderCaricamento.Child = pagina1;

}

Si riporta il codice per l’evento click del pulsante 2.

VB.Net

Private Sub btnPagina2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Dim pagina2 As New Page2

borderCaricamento.Child = pagina2

End Sub

C#

private void btnPagina2_Click(object sender, RoutedEventArgs e)

{

Page2 pagina2 = new Page2();

borderCaricamento.Child = pagina2;

}

Se invece, vogliamo caricare normalmente la pagina, senza utilizzare il border, possiamo utilizzare il metodo Add della proprietà children dell’oggetto grid, che caricherà la pagina.
Qui di seguito si riporta un esempio di codice.

VB.Net

Dim pagina2 As New Page2

LayoutRoot.Children.Clear()

LayoutRoot.Children.Add(pagina2)

C#

Page2 pagina2 = new Page2();

LayoutRoot.Children.Clear();

LayoutRoot.Children.Add(pagina2);

Conclusioni.

L’articolo ha voluto fornire delle nozioni di come creare un sistema di navigazione, uno dei tanti modi per creare applicazioni Silverlight basate con la navigazione su più pagine.
Nei prossimi articoli vedremo anche l'utilizzo del controllo Frame, per creare un ottimo sistema per gestire la navigazione, anche con l'utilizzo di parametri