Silverlight 3 News Teil 2/4: Deep Linking und Navigation
Gastbeitrag von Mario Mair-Huber zu Silverlight 3. Teil 2 von 4
Eine bedeutende Verbesserung in Silverlight 3 stellt die Navigation und Deep Linking dar. Hierbei ist es nun einfacher möglich zwischen einzelnen Pages zu wechseln. Dadurch kann man sehr einfach mehrere Views einbauen, ohne ein eigenes Management System dafür zu bauen. Mit Deep Linking hat man nun die Möglichkeit, einzelne Zustände der Applikation direkt anzusprechen. Dies äußert sich auch in der Adressleiste des Browsers, wie in der ersten Abbildung ersichtlich ist.
In Silverlight 3 ist dies auch sehr einfach implementiert. Für die Navigation muss man die Assembly "System.Windows.Controls.Navigation" referenzieren und den Namespace einfügen.
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Die Navigation kann dann einfach durch das Frame-Steuerelement geregelt werden. Im nun folgenden Beispiel wird ein Grid mit 2 Columns erstellt, wo am linken Rand die Navigation statt finden soll. In Column 0 werden 2 Buttons eingefügt, wobei für beide ein Handler verwendet wird. In diesem Handler wird der Tag des Buttons als URL verwendet (natürlich muss auch der Tag gesetzt werden).
Seiten, zu welchen navigiert werden kann sind nun vom Typ "navigation:Page". Hierfür gibt es mit den Silverlight 3 Beta 1 Tools bereits ein Template, wie in der kommenden Abbildung ersichtlich ist.
Von dieser Seite erstellen wir nun 2, wobei eine den Namen "AnotherPage.xaml" und die andere den Namen "Home.xaml" trägt. Diese Seiten werden nun als Tag im Button gesetzt. In die zweite Reihe setzen wir nun das Frame Steuerelement ein. Der komplette XAML-Code sieht dann folgendermaßen aus:
1: <UserControl x:Class="DeepLink_and_Navigation_Demo.MainPage"
2: xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" >
5:
6:
7: <Grid x:Name="LayoutRoot" Background="White">
8:
9: <Grid.ColumnDefinitions>
10: <ColumnDefinition Width="150" />
11: <ColumnDefinition />
12: </Grid.ColumnDefinitions>
13:
14: <StackPanel Background="DarkGray" Grid.Column="0">
15: <Button Click="Button_Click" Tag="/Views/Home.xaml" Content="Startseite" />
16: <Button Click="Button_Click" Tag="/Views/AnotherPage.xaml" Content="Andere Seite" />
17: </StackPanel>
18:
19: <navigation:Frame Background="White" Grid.Column="1" Name="NavigationFrame" Source="/Views/Home.xaml"
20: HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
21:
22: </navigation:Frame>
23:
24: </Grid>
25: </UserControl>
Nun fehlt nur noch der Handler an sich: diesen implementieren wir in der Code-Behind Datei. Hierfür ist lediglich ein ".Navigate" für das Frame-Steuerelement notwendig, welche eine URI als Parameter fordert. Diese bekommen wir aus dem Tag der Buttons.
private void Button_Click(object sender, RoutedEventArgs e)
{
string Page = ((Button)sender).Tag.ToString();
NavigationFrame.Navigate(new Uri(Page, UriKind.Relative));
}
In die einzelnen Views kann man nun beliebig Inhalte rein geben. Für "AnotherPage.xaml" gibt es noch eine weitere Neuerung, welche ich zeigen möchte: die ChildWindows. Dies sind eigene Fenster in der Applikation. Auch diese sind als Vorlage vorhanden und können einfach eingefügt werden. Das Element trägt hier den Namen "Silverlight Child Window". Ein Child Window wird hier genauso angezeigt wie ein Fenster in einer WPF Applikation. Man erstellt sich das Fenster und ruft die .Show() Funktion auf. Das ganze wird durch einen Button in "AnotherPage.xaml" aufgerufen.
private void Button_Click(object sender, RoutedEventArgs e)
{
MyChildWindow child = new MyChildWindow();
child.Show();
}
Fazit
Mit Deep Linking sind sehr interessante Möglichkeiten in Silverlight möglich, auch hinsichtlich der Suchmaschinenoptimierung. Die Navigation bietet auch eine erhebliche Vereinfachung in der Entwicklung von Rich Internet Applications. Mit den Fenstern gibt es nun ein sehr interessantes Tool um zusätzliche Informationen anzuzeigen.