WPF - Tạo một listview với các biểu tượng

Question

Tôi có một câu hỏi rất đơn giản.

Tôi có một điều khiển ListView và tôi muốn biết cách tạo một mục có biểu tượng ở bên trái. Các mục sẽ được được thêm động vào mã trong C# và không phải thông qua XAML.

Hình ảnh mẫu: here

Something tương tự như trên (không bao gồm Quản lý ghi tiêu đề). Tôi quản lý để làm một ở trên bằng cách tạo lưới động (không sử dụng một điều khiển ListView) nhưng tôi không chắc chắn về cách kiểm soát các sự kiện (bấm vào, vv).

Xin cảm ơn trước. :)

Answer 1

Giải pháp bao gồm trong mục xem trọng tài liệu 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> 

Sau đó, chúng ta phải thiết lập PresentationModel của chúng tôi như quan điểm của DataContext trong mã đằng sau quan điểm này:

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

Như bạn có thể nhìn thấy từ ràng buộc biểu hiện trong XAML mô hình trình bày của chúng tôi nên tiếp xúc với bất động sản mục (nếu bạn xem xét việc thay đổi danh sách Mục trong thời gian chạy, bộ sưu tập cơ bản phải là ObservableCollection để ListView phản ứng trên các thay đổi của nó):

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

Trong giải pháp này, tôi thêm hình ảnh PNG hiện có vào lớp Properties.Resources. Sau đó, các biểu tượng có kiểu Bitmap đó là không phù hợp với loại tài sản Nguồn, vì vậy chúng ta nên chuyển nó sang BitmapSource với chuyển đổi tiếp theo:

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

Mặt khác bạn có thể sử dụng pack uri's để lưu trữ các biểu tượng thay vì các nguồn tài nguyên. Sau đó lớp ViewData của bạn sẽ trưng ra thuộc tính của kiểu Uri (thay vì Bitmap). Sau đó, không cần chuyển đổi.