[Check here for the source code: https://skydrive.live.com/?cid=10e568adbb498dc8&sc=documents#cid=10E568ADBB498DC8&id=10E568ADBB498DC8%211600&sc=documents]
(Please visit the site to view this video)
In this post, we are going to show how to create a very very very simple RSS reader for Windows Phone 7 using Expression Blend and Visual Studio in 5 minutes, using minimal code. The RSS reader we will create will fetch the RSS feed using a direct URL (although this can be easily modified) and display them on our device (or emulator). Furthermore, the application will start by showing a simple animation.
First of all, we start by creating a new Windows Phone application project in Expression Blend. Let’s call it RSSReader. We’re going to create a simple animation to serve as a “welcome screen”.
Start by dragging and dropping a TextBlock onto the designer surface. Let’s make it write “Welcome”.
We’ll then press F6 (or select Window-Workspaces-Animation from the top menu) to go to the Animation workspace. We press + (check below) to create a new Storyboard object, which will contain our animation.
We give the newly created Storyboard the name of “WelcomeStoryboard”.
We will create an animation that will last 1.5 seconds, will rotate and change the color of the TextBlock. This animation will start as soon as the application starts, and after it finishes, the user will be transferred to the main RSS reader page.
So, after we press the OK button to give our Storyboard a name, we proceed to create the animation. Select the TextBlock and click the “Record Keyframe” button (looks like an egg, check screenshot).
This will record the properties of the textBlock control at the given time (0 seconds). Move the marker to 1.5 seconds and click again the “Record Keyframe” button.
Let’s create some movement! Enlarge the TextBlock and select a color for it.
Animation is ready :) But there is an important step we need to make in order to have it running when the app starts. We are going to use a Behavior for that (yeah, we could do this in code but using behaviors can save you much time). Go to the Behaviors pane, and drag-drop a ControlStoryboardAction on the LayoutRoot, at Objects and Timeline pane.
Select the ControlStoryboardAction behavior that you added under the LayoutRoot (just click it!), and go to the Properties pane. We want the animation to play when the app starts. So, we’ll select Loaded as the EventName (the Loaded event gets raised when the Page is loaded, and since the current page will be the first page of the app => when the app is Loaded), leave Play as the ControlStoryboardOption and select WelcomeStoryboard (the Storyboard we just created) as the Storyboard to be played upon application loading.
Now, let’s create the main page of our RSS reader. First, click on the projects pane in Blend. Right click the project, select Add New Item, select “Windows Phone Page”, name it “RssMain.xaml” and click OK.
We want the app to navigate to our new page (RssMain.xaml) when the animation we built earlier has ended. So, we go back to the MainPage.xaml (double click it from the Projects pane) and we’ll again use a Behavior. This time, we’ll use the NavigateToPageAction. Drag-drop it on the LayoutRoot.
Now, we’ll go to the Properties pane. We will change the trigger this time. Click “new” on the TriggerType option and select “StoryboardCompletedTrigger” (remember that we want the navigation to occur when the storyboard has completed).
Select WelcomeStoryboard as the selected Storyboard, and RssMain as the target page.
Time has come to build the main part of our application. Double click the RssMain.xaml page on the Projects pane. In order to easily consume the RSS feed, we’ll use a helper library from Silverlight 3 SDK. Right click on the references item on the Projects pane, select add reference and find the System.ServiceModel.Syndication.dll library from the Silverlight 3 SDK (on my x64 PC it is located on the folder “C:Program Files (x86)Microsoft SDKsSilverlightv3.0LibrariesClient”). Click OK to add a reference to it on your project.
Expression Blend gives us the opportunity to easily create User Interfaces with the data pane. First, we need to build our project. Press Ctrl-Shift-B or simply select Project-Build project from the menu. Then, go to the data pane, select the respective (check screenshot below) icon and choose “Create sample data from class”.
Select the SyndicationFeed class and press OK. SyndicationFeed class will wrap all functionality we need to parse and consume the RSS feed.
We can see that Blend has created sample data (project-wide visible) from the SyndicationFeed class. If we wish, we can edit this data using the small button on the top-right corner.
The property of SyndicationFeed class that is of high interest to us is the Items property. This property will hold information for each entry in our RSS feed. Next thing we’ll do in order to mock up the UI is to drag-drop the Items property to the designer surface of RssMain.xaml. This will create a listbox. After a bit of resizing, it will look like this
In the above picture we can see the ListBox that was created via the drag-drop operation. The ListBox contains a TextBlock for each item. In order to customize what we will be displayed, we need to edit the ListBox’s ItemTemplate. So, right click on the ListBox and then Edit Additional Templates – Edit Generated Items (ItemTemplate) – Edit Current.
We now see that each item consists of a StackPanel and a TextBlock. By digging through the TextBlock properties, we can observe that the Text property is bound to the Id property of each entry (we can see this easily by pressing the square button on the right of the Text property, and click the data binding option). We change that so it is bound to the Title.Text property. We, of course, press OK.
Now, we can drag-drop another TextBlock and a HyperlinkButton onto the designer surface, below our Title TextBlock.
We want this second TextBlock to display the Summary of the RSS feed entry, and the HyperlinkButton, when clicked to navigate us to the RSS entry web page. We select the TextBlock, go to the properties window, click the small square on the right of the text property, select the data binding option and set its Text property to be bound at Summary.Text property.
Regarding the HyperlinkButton, we need to do three basic things.
1. Edit the content property to write “Click” or something.
2. Edit the NavigateUri to point to Links[0].Uri.AbsoluteUri of the SyndicationItem object
3. Edit the TargetName property, use a custom expression and write “_blank”, so that when the user clicks there, a new browser window opens (showing the page in the NavigateUri link)
Last thing we need to do in Blend is to select both TextBoxes (or one by one, if you prefer) and modify their TextWrapping property to “Wrap”.
Now, we have our UI ready, time to feed it with some real-time RSS updates! Before we leave Blend, though, we will have to give the ListBox a name, to be able to refer to it from code. We close the template, by clicking in the [ListBox] button (check below),
select the ListBox, and modify its name via the Properties pane. We give it the name “lst” (although you can name it as you wish).
So, we’re ready to leave Blend. We go to the projects pane, right-click on the project file and select “Edit in Visual Studio”. Visual Studio opens and lets us write some code. We go to the RSSMain.xaml.cs page, and modify the code to write
Inside the new Uri constructor you can use whichever feed you wish (I used my blog’s one).
Well, we’re done! Press F5 to run your solution either on a device or on the emulator! You will see the animation during the application startup, see the RSS feed entries popup in a few seconds
and when you click on a HyperLink you will be transferred to the respective blog post
Check here for the source code: https://skydrive.live.com/?cid=10e568adbb498dc8&sc=documents#cid=10E568ADBB498DC8&id=10E568ADBB498DC8%211600&sc=documents and here for the respective video: http://studentguru.gr/p/videos.aspx?category=21&id=171
Don’t forget to check kids’ apps for WP7 that I have co-developed here: http://www.windowsphone.com/en-US/search?q=anlock
First Words: Learning Animals
![190316_10150113001833742_775863741_6608102_7897414_n[1]](http://www.studentguru.gr/blogs/dt008/190316_10150113001833742_775863741_6608102_7897414_n1_7B62AAE1.jpg "190316_10150113001833742_775863741_6608102_7897414_n[1]")
Dimitris Gkanatsios 