WPF - アイコン付きのリストビューを作成する

Question

私は非常に簡単な質問があります。

私はListViewコントロールを持っており、左側にアイコン付きのアイテムを作成する方法を知りたいと思います。項目はでコードでC＃では動的に追加され、XAMLでは動的に追加されません。

画像サンプル：（管理レコードヘッダを除く）上記と同様のhere

何か。私はグリッドを動的に（ListViewコントロールを使用せずに）作成することで上記のことを行うことができましたが、イベントをコントロールする方法（クリックなど）はわかりません。

ありがとうございます。 :)

Answer 1

ソリューションは、表示項目DataTemplateをオーバーライドします。

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" 
    xmlns:self="clr-namespace:WpfApplication1" 
    xmlns:props="clr-namespace:WpfApplication1.Properties"> 
<Window.Resources> 
    <self:ImageConverter x:Key="Conv"/> 

    <DataTemplate x:Key="Template"> 
     <StackPanel Orientation="Horizontal"> 
      <Image Source="{Binding Path=Icon, Converter={StaticResource Conv}}" 
        Width="64" 
        Height="64"/> 
      <TextBlock Text="{Binding Name}" 
         VerticalAlignment="Center"/> 
     </StackPanel> 
    </DataTemplate> 

</Window.Resources> 
<StackPanel> 
    <ListView ItemsSource="{Binding Items}" 
       ItemTemplate="{StaticResource Template}"/> 
</StackPanel> 

その後、我々は、このビューの背後にあるコードでは、ビューのDataContextのよう私たちのPresentationModelを設定する必要があります。

public MainWindow() 
    { 
     InitializeComponent(); 
     this.DataContext = new SampleModel(); 
    } 

をあなたが私たちのプレゼンテーションモデルは、アイテムプロパティを公開する必要がありますXAMLでバインディング式からわかるように（実行時にItemsリストを変更することを検討した場合、その変更に応じてListViewが反応するためには、基になるコレクションはObservableCollectionでなければなりません）。

public class SampleModel 
{ 
    public IEnumerable<ViewData> Items 
    { 
     get 
     { 
      yield return new ViewData(Properties.Resources.airbrush_256, "item 1"); 
      yield return new ViewData(Properties.Resources.colors_256, "item 2"); 
      yield return new ViewData(Properties.Resources.distribute_left_edge_256, "item 3"); 
      yield return new ViewData(Properties.Resources.dossier_ardoise_images, "item 4"); 
     } 
    } 
} 

public class ViewData 
{ 
    public ViewData(Bitmap icon, string name) 
    { 
     this._icon = icon; 
     this._name = name; 
    } 

    private readonly Bitmap _icon; 
    public Bitmap Icon 
    { 
     get 
     { 
      return this._icon; 
     } 
    } 

    private readonly string _name; 
    public string Name 
    { 
     get 
     { 
      return this._name; 
     } 
    } 
} 

このソリューションでは、既存のPNG画像をProperties.Resourcesクラスに追加します。その後、アイコンはSourceプロパティタイプと互換性のないビットマップ型を持つので、私たちは次のコンバータとしたBitmapSourceに変換する必要があります

public class ImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (value is Bitmap) 
     { 
      var stream = new MemoryStream(); 
      ((Bitmap)value).Save(stream, ImageFormat.Png); 

      BitmapImage bitmap = new BitmapImage(); 
      bitmap.BeginInit(); 
      bitmap.StreamSource = stream; 
      bitmap.EndInit(); 

      return bitmap; 
     } 
     return value; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

一方あなたは、アイコンの代わりに、リソースを格納するためpack uri'sを使用することができます。そして、あなたのViewDataクラスは（ビットマップではなく）Uri型のプロパティを公開します。その後、コンバータは必要ありません。