Eigener FeedReader für WP8 #3
Hier folgt nun auch schon der letzte Teil der kleinen FeedReader-App für Windows Phone 8. Im ersten Teil haben wir das Datenmodell erstellt und im zweiten Teil bereits eine erste Listen-Ansicht für die Feedbeiträge. In diesem Beitrag wollen wir nun noch eine Detail-Seite anlegen,welche uns den einzelnen Inhalt des Blogbeitrags anzeigt.
Den Code aus dem letzten Teil könnt ihr hier herunterladen:
FeedReader - Teil 2 (88,0 KiB)
Legen wir nun also los und starten Visual Studio und öffnen das bisherige Projekt. Anschließend öffnen wir die MainPage.xaml-Datei und suchen die Definition des LongListSelectors im XAML-Code. Ergänzt in der Definition nun die folgende Eigenschaft SelectionChanged="LatestItemsList_SelectionChanged", so dass wir insgesamt die folgende Definition erhalten:
|
1 2 3 |
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:LongListSelector x:Name="LatestItemsList" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource FeedItemTemplate}" SelectionChanged="LatestItemsList_SelectionChanged"/> </Grid> |
Nun müssen wir noch die hinzugefügte Methode implementieren. Dazu wechseln wir in die Code-Behind-Datei und füllen die noch leere Methode mit dem folgenden Inhalt:
|
1 2 3 4 5 6 7 8 9 10 |
private void LatestItemsList_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (LatestItemsList.SelectedItem != null) { PhoneApplicationService.Current.State["SelectedItem"] = LatestItemsList.SelectedItem as DataModel.FeedItem; NavigationService.Navigate(new Uri("/DetailPage.xaml", UriKind.Relative)); } LatestItemsList.SelectedItem = null; } |
Diese Methode wird immer dann aufgerufen, wenn der Nutzer eine Listeneintrag angeklickt hat. Das ausgewählte Element merken wir uns dann und wir wechseln auf die DetailPage.xaml, welche wir jetzt noch anlegen müssen. Klickt dazu im Solution-Explorer mit der rechten Maustaste auf das Projekt, hier FeedReader und wählt aus dem Kontextmenü Add – New Item – Windows Phone Portrait Page und wählt als Namen DetailPage.xaml.
neue Seite hinzufügen
Öffnen nun die neu angelegte DetailPage.xaml und ändert das TitlePanel zunächst ab:
|
1 2 3 4 5 |
<!--TitlePanel contains the name of the application and page title--> <StackPanel Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="MEIN FEEDREADER" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock Text="{Binding Title}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> |
Im nächsten Schritt ergänzen wir noch eine Textbox im ContentPanel, damit wir später dort den eigentlichen Text des Blogbeitrags anzeigen können:
|
1 2 3 4 5 6 |
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer> <TextBlock Text="{Binding Description}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/> </ScrollViewer> </Grid> |
Wechselt nun in die Code-Behind-Datei der DetailPage und fügt abschließend die folgende Methode samt Inhalt hinzu:
|
1 2 3 4 5 |
protected override void OnNavigatedTo(NavigationEventArgs e) { var feedItem = PhoneApplicationService.Current.State["SelectedItem"] as DataModel.FeedItem; this.DataContext = feedItem; } |
Nun sind wir eigentlich auch schon fertig und können die App einmal testen und wir erhalten folgendes Bild der App:
fertige App
Damit sind wir auch schon am Ende der Serie angekommen und ich hoffe, dass ihr einiges mitnehmen konntet. Diese App könnt ihr nun als Grundlage verwenden oder ihr ladet euch bei Microsoft direkt eine verbesserte Variante und verwendet diese. Ich freue mich schon auf eure FeedReader-Apps im Windows Phone Store.