Eigener FeedReader für WP8 #2
Wie ich bereits in meinem Blog angekündigt habe, möchte ich zusammen mit euch einen kleinen RSS-FeedReader für Windows Phone 8 programmieren. Dieser ist allerdings sehr rudimentär und kann gerade einmal den Text aus eurem Feed anzeigen, aber trotzdem kann man an diesem Beispiel viel lernen und dann legen wir auch gleich los. In diesem zweiten Teil wollen wir das Datenmodell anzeigen lassen, dazu starten wir Visual Studio.
Wir öffnen nun das bisherige Projekt, welches wir im ersten Teil angelegt haben. Falls ihr erst jetzt zur Serie dazu gekommen seid, könnt ihr den Sourcecode hier herunterladen:
FeedReader - Teil 1 (80,8 KiB)
Öffnet nun die App.xaml.cs-Datei und gebt direkt unterhalb der Klassendefinition public partial class App : Application nach der geschweiften Klasse den folgenden Code ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
private static DataModel.FeedViewModel _fvm; public static DataModel.FeedViewModel FVM { get { if (_fvm == null) { _fvm = new DataModel.FeedViewModel(); } return _fvm; } } |
Somit haben wir jetzt die Möglichkeit auf unser Datenmodell zuzugreifen. Im nächsten Schritt wollen wir die Daten auf der MainPage anzeigen lassen. Dafür öffnen wir nun die MainPage.xaml-Datei. Sucht in dieser Datei die beiden folgenden Zeilen
|
1 2 |
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> |
und ändert die beiden Text-Eigenschaften nach euren Wünschen, z.B.
|
1 2 |
<TextBlock Text="MEIN FEEDREADER" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="blogbeiträge" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> |
Nun sucht ihr das ContentPanel, welches in diesem Fall durch ein Grid dargestellt wird
|
1 2 3 4 |
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> </Grid> |
und dort wollen wir eine Liste mit den Blogbeiträgen anzeigen lassen, was wir durch die folgende Zeile erreichen
|
1 |
<phone:LongListSelector x:Name="LatestItemsList" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource FeedItemTemplate}"/> |
Ihr werdet nun feststellen, dass das ItemTemplate unterstrichen wird, denn dieses ist noch nicht definiert, was wir nun direkt nachholen werden. Dazu öffnen wir nun die App.xaml-Datei und geben unter der Zeile
|
1 |
<local:LocalizedStrings xmlns:local="clr-namespace:FeedReader" x:Key="LocalizedStrings"/> |
den folgenden Code-Ausschnitt ein
|
1 2 3 4 5 6 7 |
<DataTemplate x:Key="FeedItemTemplate"> <StackPanel Margin="0,15"> <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="5" Margin="12,0,12,5"/> <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle3Style}" HorizontalAlignment="Left" TextWrapping="Wrap"/> <TextBlock Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding DatePublished}" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </DataTemplate> |
Nun müssen wir nur noch eine Verbindung zwischen dem Datenmodell und der Ansicht darstellen. Dafür öffnen wir die MainPage.xaml.cs-Datei und geben im Konstruktor unterhalb des Methode-Aufrufs InitializeComponent(); nun noch this.DataContext = App.FVM; ein und können nun die App testen, welche nun das folgende Bild zeigt
erste Version der FeedReader-App (via PlaceIt)
Nun sehen wir bereits eine Liste mit den letzten Einträgen aus dem Blog und das entsprechende Datum der Veröffentlichung. Im nächsten Schritt wollen wir nun eine Detail-Seite anlegen, welche uns dann den eigentlich Blog-Beitrag präsentiert, was ich im dritten Teil dieser Serie gerne vorstellen und verwirklichen möchte.