c# - WPF - 创建带有图标的 ListView

Question

我有一个非常简单的问题。

我有一个 ListView 控件，我想知道如何创建一个在左侧带有图标的项目。这些项目将在 C# 中在代码中动态添加，而不是通过 XAML。

图片样本:here

类似于上面的内容(不包括管理记录标题)。我设法通过动态创建网格(不使用 ListView 控件)来完成上述操作，但我不确定如何控制事件(点击等)。

提前致谢。 :)

Answer 1

解决方案包括覆盖 View 项 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>

然后我们必须在这个 View 后面的代码中将我们的 PresentationModel 设置为 View 的 DataContext:

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

从 XAML 中的绑定(bind)表达式可以看出，我们的表示模型应该公开 Items 属性(如果您考虑在运行时更改 Items 列表，底层集合必须是 ObservableCollection，以便 ListView 对其更改使用react):

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 属性类型不兼容的 Bitmap 类型，因此我们应该使用下一个转换器将其转换为 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 类型的属性(而不是位图)。然后不需要转换器。