agDOTNETKICKS
I have to get my feet wet using Silverlight 2.0. What better way than creating a simple application? I decided to create a very simple dotnetkicks reader!
First things first:
1) Create a new silverlight 2.0 project using VS2008 (Blend 2.5 should also work)
2) Add a ItemsControl to the main page
<ItemsControl x:Name="ArticlesItemsControl" /> |
NOTE: I added a ItemsControl here because I don't need the selecting provided by the ListBox
3) Create a very basic RSS-like data structure to bind too for each article posted on DotNetKicks
public class Article
{
public string Title { get; set; }
public string Description { get; set; }
public Uri Link { get; set; }
public Uri KickUri { get; set; }
public int Kicks { get; set; }
} |
4) Asynchronously fetch the RSS feed from the DotNetKicks site
List<Article> _articles = new List<Article>();
const string feedUrl = @"http://feeds.feedburner.com/dotnetkicks?format=xml";
private void GetArticles(string url)
{
WebClient wc = new WebClient();
wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(articles_DownloadStringCompleted);
wc.DownloadStringAsync(new Uri(url));
} |
5) Parse the retrieved XML data
void articles_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
XDocument doc = XDocument.Parse(e.Result);
foreach (XElement article in doc.Descendants("item"))
{
Article a = new Article();
a.Title = (string)article.Element("title");
// The rest of the parsing is removed to reduce complexity
_articles.Add(a);
}
ArticlesItemsControl.ItemsSource = _articles;
} |
Once the RSS feed has been parsed and all the articles are added to the List, set the ItemsSource on the ItemsControl!
6) All that is now left to do is to replace the ItemTemplate with our own custom DataTemplate
<ItemsControl x:Name="ArticlesItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10,0,10,10">
<StackPanel>
<Border Background="Aqua" Width="50" Height="50" CornerRadius="5,0,5,0">
<StackPanel>
<TextBlock Text="0" FontSize="22" HorizontalAlignment="Center"/>
<TextBlock Text="Kicks" FontSize="10" HorizontalAlignment="Center" Foreground="#80000000"/>
</StackPanel>
</Border>
<Border Background="White" Width="50" Height="20" Margin="0,5,0,0" BorderBrush="Black" BorderThickness="1">
<HyperlinkButton Content="Kick It" NavigateUri="{Binding KickUri}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</StackPanel>
<StackPanel Margin="10,0,0,10">
<HyperlinkButton Content="{Binding Title}" NavigateUri="{Binding Link}" FontFamily="Trebuchet MS" FontSize="12" />
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" FontFamily="Arial" FontSize="8.5" Height="Auto" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
|
And here is the final result:
I am busy updating the example to use the JSON service provided... this will allow me to get a richer set of data back... As soon as I have it working, I will post it!
UPDATE: The app is now hosted using Silverlight Streaming, have a look here
