What's the best approach to creating a "contact list" in Silverlight?
I am trying to create a Silverlight application that embeds my contacts and Flickr photos. I want them to display "nicely". I intend to create a control that shows the user and their images next to their name. I want each user to be listed one by one. Something like that:
----------------------------
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 if needed. (This way the user can scroll up and down.)
What's the best approach to creating something like this? Is there a control or technique that I should follow?
source to share
You need a ListBox. In fact, several nested lists.
First of all, put your data into a structure that works well with Silverlight (and I'm assuming Silverlight2 here). For this I would use
ObservableCollection<Contact>
where Contact is your class that represents one contact. This class must have
ObservableCollection<FlickrPhoto>
as a property.
Here's the XAML structure. You might want to move templates to resources or create a custom control to hold each item in the list.
<!-- 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 list to force the WrapPanel to wrap.
- You need to set the DataContext of the external Listbox (or ancestor control) to your contact collection.
source to share
this kind of layout is easy in Silverlight once you understand templates.
If you've ever done ASP.net consider a repeater on steroids (or perhaps ListView in recent versions).
Basically what you want is a list that displays each item with your specific "template" (username and four photos).
so suppose you are setting your ItemsSource listbox 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 location required for one item (username and four photos).
Hope it helps. If you need more information, just leave a comment.
source to share
This article is an article about Silverlight and Flicker can help you.
In terms of styling the custom control, have you seen the MIX video ?
source to share