What System.Windows UIElement does skype use for its 'Contact List'?

Question

Hey so I was wondering what UIElement does skype use for its Contact List in order to display additional details within each ListItem (such as Status Updates, Avatars, Online Status and so forth)?

_{(source: iforce.co.nz)}

As far as I know the regular System.Windows.Forms.ListBox only lets you display a single line of text to represent that Object.

_{(source: iforce.co.nz)}

I'm looking to recreate something similar but for a different purpose, but I haven't been able to find much on google (So that's why I'm seeing if anyone here has experience modifying the design of a ListBox, to gain a better perspective over each detail).

Thanks

Answer 1

Here is a very basic example of creating a custom Datatemplate for WPF.

First you create your Model with all the properties you want to be displayed, then bind a list of them to your ListBox. Then you can create a DataTemplate this is basically a xaml(visual) representation of your Model, you can make it look however you want and you can use any of the properties from your Model in the DataTemplate.

Example:

Window code:

public partial class MainWindow : Window
{
    private ObservableCollection<MyListBoxItemModel> _listBoxItems = new ObservableCollection<MyListBoxItemModel>();

    public MainWindow()
    { 
        InitializeComponent();
        ListBoxItems.Add(new MyListBoxItemModel { Title = "Item 1", Image = new BitmapImage(new Uri("http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Search-icon.png")) });
        ListBoxItems.Add(new MyListBoxItemModel { Title = "Item 2", Image = new BitmapImage(new Uri("http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Search-icon.png")) });
        ListBoxItems.Add(new MyListBoxItemModel { Title = "Item 3", Image = new BitmapImage(new Uri("http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Search-icon.png")) });
    }

    public ObservableCollection<MyListBoxItemModel> ListBoxItems
    {
        get { return _listBoxItems; }
        set { _listBoxItems = value; }
    }
}

Model:

public class MyListBoxItemModel : INotifyPropertyChanged
{
    private string _title;
    private string _line2 = "Line2";
    private BitmapImage _image;

    public string Title
    {
        get { return _title; }
        set { _title = value; NotifyPropertyChanged("Title"); }
    }

    public string Line2
    {
        get { return _line2; }
        set { _line2 = value; NotifyPropertyChanged("Line2"); }
    }


    public BitmapImage Image
    {
        get { return _image; }
        set { _image = value; NotifyPropertyChanged("Image"); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string p)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(p));
        }
    }
}

Xaml:

   <Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication7"
        Title="MainWindow" Height="351" Width="464" Name="UI" >

 <Window.Resources>
    <!-- The tempate for MyListBoxItemModel -->
    <DataTemplate DataType="{x:Type local:MyListBoxItemModel}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}" />
            <StackPanel>
                <TextBlock Text="{Binding Title}" FontWeight="Medium" />
                <TextBlock Text="{Binding Line2}" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>   
 </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding ElementName=UI, Path=ListBoxItems}" />
    </Grid>

</Window>

This is just a simple example with an Image and some text, but it should get you started, Just modify the DataTemplate and Model how you want to display the snp code data

Result: