Wpf Binding Xml Twitter example

Playing with the twitter API these days, of course ;) inspired by Blu, I started a WPF client. For this example let’s start by showing your friends images thru a ListBox.

Wondering how to bind most directly to the twitter API I came accross the following solution; Instead of binding to classes which are generated from the Xml spit out by the Api, I thought of the XmlDataProvider is a more proper way of doing…
First here’s the xaml:

<Window x:Class="WpfTwitter.TwitterView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Twitter View" Height="300" Width="300">
    <Window.Resources>
        <XmlDataProvider x:Key="DataProvider"/>        
    </Window.Resources>
    <Grid>
        <ListBox Width="300" Height="500" ItemsSource="{Binding Source={StaticResource DataProvider}, XPath='users/user'}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Aqua">
                        <Image Source="{Binding XPath='profile_image_url'}" Width="50" Height="50"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>
</Window>

For a more loosely coupled design I’ve chosen the PRISM way: MVP -> model view presenter.:
For this of course you need all 3:
Model: TwitterPresentationModel
View: TwitterView
Presenter: TwitterPresenter

Now the TwitterView implements the ITwitterview, which holds a reference to the model:

public interface ITwitterView
{
TwitterPresentationModel Model { get; set; }
}

The model will hold the xmldocument returned from twitter:

namespace WpfTwitter
{
public class TwitterPresentationModel:XmlDocument
{
public TwitterPresentationModel()
{

}
}
}

Notice that it is just inherited from XmlDocument. That will do for now.

Then in the presenter we control both view and model:

public class TwitterPresenter
{
private ITwitterView view;
private Yedda.Twitter twitter;
public TwitterPresenter(ITwitterView view)
{
twitter = new Yedda.Twitter();
var twitterPresentationModel = new TwitterPresentationModel();
twitterPresentationModel.LoadXml(twitter.GetFriends(“user”, “password”, Yedda.Twitter.OutputFormatType.XML));
view.Model = twitterPresentationModel;
}
}

Here I used the Yedda twitter Library Really usefull. All methods from the twitter api are implemented!

In the TwitterView.cs we’ll start to bind some things:

public partial class TwitterView : Window, ITwitterView
{
public TwitterView()
{
InitializeComponent();
var presenter = new TwitterPresenter(this);
}

public TwitterPresentationModel Model
{
get
{
return (this.Resources["DataProvider"] as XmlDataProvider).Document as TwitterPresentationModel;
}
set
{
(this.Resources["DataProvider"] as XmlDataProvider).Document = value;
}
}
}

As you can see, we hook the XmlDataProvider to the Model. Thus, Provider becomes Model and Provider becomes Model.
The only thing that’s left is binding the list to the model. As you can see in the xaml, this is done by binding to the XmlDataProvider and setting the datatemplate-binding to the user node
of the Xml. All can be done with XPath, which a vast bunch o developers still might love:

        <ListBox Width="300" Height="500" ItemsSource="{Binding Source={StaticResource DataProvider}, XPath='users/user'}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Aqua">
                        <Image Source="{Binding XPath='profile_image_url'}" Width="50" Height="50"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Great! Try it, use it, love it…

Frans.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.