Skype 将什么 System.Windows UIElement 用于其“联系人列表”？

Question

嘿，所以我想知道 UIElement 为它的 Contact List 使用了什么 Contact List 以便在每个 ListItem 中显示更多详细信息（例如 Status Updates、Avatars、Online Status 等等）？

_{（来源：iforce.co.nz）}

据我所知，常规的 System.Windows.Forms.ListBox 只允许您显示一行文本来表示 Object。

_{（来源：iforce.co.nz）}

我正在寻找重新创建类似但用于不同目的的东西，但我无法在谷歌上找到很多东西（所以我想看看这里是否有人有修改 ListBox 的设计的经验，以便更好地了解每个细节）。

谢谢

Answer 1

这是为 WPF 创建自定义 Datatemplate 的一个非常基本的示例。

首先，您使用您想要显示的所有属性创建您的Model，然后将它们的列表绑定到您的ListBox。然后您可以创建一个DataTemplate，这基本上是您的Model 的xaml（可视）表示，您可以让它看起来像您想要的那样，您可以使用Model 中的任何属性DataTemplate。

例子：

窗口代码：

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; }
    }
}

型号：

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>

这只是一个带有Image 和一些文本的简单示例，但它应该可以帮助您入门，只需修改DataTemplate 和Model 您希望如何显示snp code 数据

结果：