Archive for January, 2010

 

Managing Friends and Followers with Tweetsharp – Part 4 – UI

See Part 1, Part 2, Part 3

It’s been a busy time in the world of TweetSharp as we’ve been pushing toward something we can dub the official 1.0 release for a while now, with a ways yet to go. However, it’s high time I returned to this series, so without further ado…

One nice thing about the objects you get back from TweetSharp that represent the Twitter data model is that they implement INotifyPropertyChanged, so you can easily bind to them in WPF or Silverlight.

To make this app useful, I need to show some basic information about the users I’m displaying in the app. For this we will use a WPF Data Template. I want to show the user’s avatar, both their screen name and their ‘real’ name, their bio information, and a count of how many friends and followers they have. Since those are all bindable properties on the TwitterUser class, the data template is pretty straightforward XAML.

<DataTemplate x:Key="TwitterUserTemplate" DataType="x:Type local:TwitterUser">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="20" />
            <RowDefinition Height="*" MinHeight="35" />
            <RowDefinition Height="Auto" MinHeight="14" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal"  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <TextBlock x:Name="ScreenNameBlock" FontSize="14" Height="17" TextWrapping="Wrap" FontWeight="Bold" Text="{Binding Path=ScreenName}"/>
            <TextBlock x:Name="UserNameBlock" Margin="5,0,0,0" FontSize="14" Height="17.342" TextWrapping="Wrap" Text="{Binding Path=Name}"/>
        </StackPanel>
        <Border Height="55" Width="55" Padding="2,2,2,2" Margin="0,0,5,0" Grid.Row="1" BorderBrush="#FF530000" BorderThickness="2" CornerRadius="6" Grid.RowSpan="2">
            <Image x:Name="ProfileImage" Source="{Binding Path=ProfileImageUrl}" Width="50" Height="50" />
        </Border>
        <Border BorderBrush="#FF808084" BorderThickness="1" Grid.Row="1"  Grid.ColumnSpan="2" Grid.Column="1" Margin="0,5,0,0" VerticalAlignment="Top">
            <TextBlock x:Name="BioText" FontSize="12" Width="110" Height="Auto" TextWrapping="Wrap" MinHeight="47" MinWidth="250" Text="{Binding Path=Description}"></TextBlock>
        </Border>
        <TextBlock x:Name="FollowCount" FontSize="9" Grid.Row="2" Grid.Column="1" Text="{Binding Path=FriendsCount, StringFormat=Following:{0}}"></TextBlock>
        <TextBlock x:Name="FriendCount" FontSize="9" Grid.Column="2" Grid.Row="2" Text="{Binding Path=FollowersCount, StringFormat=Followers:{0}}"></TextBlock>
    </Grid>
</DataTemplate>

The key points to notice here are the DataType=”x:Type local:TwitterUser” attribute on the DataTemplate element, which specifies the type of object this template is used for, and the various {Binding Path=xyz} attribute values that specify what properties of the TwitterUser we’re binding to.

This will produce a user-box that looks like this:

Like many developers, my design-fu is kind of weak, the UI itself is rather bland and uninteresting. (Though some might say that’s befitting the subject it’s displaying in this case – bazinga?)

To display a collection of these (such as the ‘jerks’ and ‘spammers’ lists we’ve been working with so far), we’ll simply create a listbox in the application and tell it to use the previously defined template for its items (again in XAML):

<ListBox Name="JerksList" ItemTemplate="{StaticResource TwitterUserTemplate}" ></ListBox>

Then, in our code, we’ll bind the “jerks” collection to the JerksList listbox like so:

var items = new Binding {Source = jerks};
JerksList.SetBinding(ItemsControl.ItemsSourceProperty, items);

Obviously, the process is be repeated for the “Spammers” list as well, and it would not be a terribly difficult stretch to adapt this template to display Tweets (aka. TwitterStatus objects) instead of users.

In the upcoming final installment, we’ll wire up actions that allow us to follow, block, unfollow and report (as spammers) the users in our lists. This will give us an elementary tool we can use to begin manage our friends and followers lists.

Posted by Jason under General  •  No Comments