c# - skypeは「連絡先リスト」にどのSystem.WindowsUIElementを使用しますか？

Question

ねえ、私はUIElementスカイプがContact Listそれぞれの中に追加の詳細ListItem（、、などStatus Updates）Avatarsを表示するために何を使用するのか疑問に思っていましたOnline Statusか？

_{（出典：iforce.co.nz）}

私の知る限り、レギュラーSystem.Windows.Forms.ListBoxでは、それを表す1行のテキストしか表示できませんObject。

_{（出典：iforce.co.nz）}

私は似たようなものを別の目的で再現しようとしていますが、グーグルで多くを見つけることができませんでした（したがってListBox、より良い視点を得るために、ここの誰かがのデザインを変更した経験があるかどうかを確認しています各詳細について）。

ありがとう

Answer 1

Datatemplateこれは、 WPFのカスタムを作成する非常に基本的な例です。

まず、Model表示するすべてのプロパティを使用してを作成し、次にそれらのリストをにバインドしますListBox。次に、DataTemplateこれを基本的にxaml（visual）表現で作成し、好きなように見せることができ、でModelの任意のプロパティを使用できます。ModelDataTemplate

例：

ウィンドウコード：

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とを変更するだけです。Modelsnp code

結果：