Building Your First Windows Phone App with Silverlight and Visual Studio 2010

In this article, I will demonstrate how to build a simple application for Windows Phone 7 Series with Silverlight and Visual Studio. Future posts will build upon this app, adding more screens and features, and alternative ways to approach its development.

Before getting started, let's ensure the development machine has all the tools needed. For a comprehensive list of the current developer preview tools available for Windows Phone 7 Series, see Adam Kinney's excellent article. For our first attempt at building this app, everything needed for development is included in the Windows Phone Developer Tools CTP download.

• Visual Studio 2010 Express for Windows Phone CTP
• Windows Phone Emulator CTP
• Silverlight for Windows Phone CTP
• XNA 4.0 Game Studio CTP (included but not used in this article)

 After the installation is complete and you launch Visual Studio 2010, launch the dialog to create a new project.

There is a Silverlight for Windows Phone category under Visual C#. In that category three project templates can be found:

• Windows Phone Application
• Windows Phone List Application
• Windows Phone Class Library

Select the Windows Phone Application template and give the project a name. We going to name this project DotNetZoneReader. This simple app will pull from the .NET Zone RSS feed and display the latest stories from our site. When the new project loads, we are presented with a split view (editor and designer) of the MainPage.xaml file.

The phone pages are automatically styled to have the Windows Phone "Metro" UI design and the WYSIWYG designer surface has the Windows Phone look & feel.

To get started we will change the text on the application and page title TextBlock controls to read "DZone - .NET Zone Reader" and "stories", respectively. Next, add a button to the TitleGrid to refresh the story list. At this point, the TitleGrid XAML should look something like this:

        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="DZone - .NET Zone Reader" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text="stories" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
            <Button Content="refresh" Height="44" HorizontalAlignment="Left" Margin="368,70,0,0" Name="button1" VerticalAlignment="Top" Width="106" FontSize="16" Click="button1_Click" />
        </Grid>

and the designer displays:

To display the stories, we will add a listbox to the Content grid and format the items with a custom inline DataTemplate. The DataTemplate will show an image of the author's picture from their .NET Zone user profile and the Title and Description of each story. I also made the Title a HyperlinkButton with a link to the actual story on .NET Zone, but this version of the CTP does not support launching non-relational Uri's from a hyperlink. You will receive an unhandled exception if you click the link. In a future article, we'll link to a second page with more details about the story.

        <Grid x:Name="ContentGrid" Grid.Row="1">
            <ListBox Height="640" HorizontalAlignment="Left" Margin="6,6,0,0" Name="storyList" VerticalAlignment="Top" Width="468" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Height="132">
                            <Image Source="{Binding AuthorImageUrl}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,7,5,0"/>
                            <StackPanel Width="368">
                                <HyperlinkButton Content="{Binding Title}" NavigateUri="{Binding Link}" Foreground="OrangeRed"  FontSize="24" />
                                <TextBlock Text="{Binding Description}" TextWrapping="Wrap" FontSize="18" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

Next, double-click the button on the designer surface to generate an event handler for the Click event of our button. This behavior is the same as any other designer in Visual Studio. Three lines of code are needed to create an instance of the WebClient class that will retreive the RSS feed data from .NET Zone, wire up the delegate to handle the callback, and invoke the asynchronous download method.

In the callback method, dzoneRss_DownloadStringCompleted, we parse the XML returned and use LINQ to XML to insert the story records into a list of FeedItem entities. A reference to System.Linq.Xml will need to be added to your project. The collection of FeedItem objects is bound to the storyList ListBox's ItemsSource property. One item of note, in this particular RSS feed, DZone uses some elements that are not part of the RSS standard and belong to a separate XML namespace. In order to read data from those elements, an XNamespace object must be prepended to each of those element's names.

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            var dzoneRss = new WebClient();
            dzoneRss.DownloadStringCompleted += dzoneRss_DownloadStringCompleted;
            dzoneRss.DownloadStringAsync(new Uri("http://feeds.dzone.com/zones/dotnet"));
        }

        private void dzoneRss_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null) return;

            XElement xmlStories = XElement.Parse(e.Result);
            XNamespace dz = "http://www.developerzone.com/modules/dz/1.0";

            storyList.ItemsSource = from story in xmlStories.Descendants("item")
                                    select new FeedItem
                                               {
                                                   Title = story.Element("title").Value,
                                                   Description =  story.Element("description").Value,
                                                   Link =  story.Element("link").Value,
                                                   PublishDate = Convert.ToDateTime(story.Element(dz + "submitDate").Value).ToString("dd-MMM"),
                                                   Author = story.Element(dz + "submitter").Element(dz + "username").Value,
                                                   AuthorImageUrl = story.Element(dz + "submitter").Element(dz + "userimage").Value
                                               };
        }

Here is a look at the FeedItem class.

    public class FeedItem
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public string Link { get; set; }
        public string PublishDate { get; set; }
        public string Author { get; set; }
        public string AuthorImageUrl { get; set; }
    }

At this point we are ready to press F5 and launch the application in the Windows Phone Emulator. This is what it looks like in the emulator after pressing the refresh button to load the .NET Zone stories.

Stay tuned for the next installment when we add some more features to the app.