What is the best approach to creating a "list of contacts" in Silverlight?

Question

I am trying to create a Silverlight application which pulls in my Flickr contacts and photos. I want them to display "nicely". I intend on creating a control that shows the user and their images right next to their name. I want each user to be listed one after another. Something like this:

----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------

I want to be able to create it dynamically and have a scrollbar appear if it is needed. (So the user can scroll up and down).

What's the best approach to create something like this? Is there a control or technique that I should follow?

Answer 1

This article on Silverlight and Flicker may help you.

As for styling the user control, have you seen the MIX videos?

Answer 2

You want a ListBox. In fact, multiple nested listboxes.

First of all, get your data into a structure that will work nicely with Silverlight (and I'm assuming Silverlight2 here). For this I'd use an

ObservableCollection<Contact>

where Contact is your class that represents one contact. That class should have an

ObservableCollection<FlickrPhoto>

as a property.

Here's the structure of the XAML. You'll probably want to move the templates off to resources, or create a usercontrol to hold each list item.

<!-- needs the SilverlightToolkit for WrapPanel -->
<!-- xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" -->

<ListBox ItemsSource="{Binding}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="400">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding UserName}"/>
                <ListBox 
                    Grid.Column="1" 
                    ItemsSource="{Binding FlickrPhotos}"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <tk:WrapPanel/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Photo}" Width="80"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Notes:

• This code is a very rough example only
• You need to disable the horizontal scrollbar on the listbox to force WrapPanel to wrap.
• You'll need to set the DataContext of the outer Listbox (or an ancestor control) to your collection of contacts.

Answer 3

that kind of layout is easy in Silverlight once you understand templating.

If you've ever done ASP.net, think repeater on steroids (or maybe ListView in the recent versions).

Basically what you want is a listbox that displays each item with your specific "template" (the user name and the four photos).

so assuming you set your listbox's ItemsSource property to a collection of objects carrying the UserName property, as well as Photo1 to Photo4:

<ListBox x:Name="Photos">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <YOUR_ITEM_LAYOUT_HERE />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Where <YOUR_ITEM_LAYOUT_HERE /> is replaced by the actual layout you want for one item (the username and the four photos).

Hope that helps. If you need more info, just leave a comment.