WPF - 创建带有图标的列表视图

Question

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

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

示例图像: 点击这里

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

先感谢您的帮助 :)

- James

---

链接失效了，我会使用除imgur以外的其他服务，因为我在互联网上看到的9/10 imgur链接都无法访问。 - msbg

Answer 1

解决方案在于覆盖视图项的数据模板。

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

然后，我们需要在这个视图的代码后台将我们的PresentationModel设置为视图的DataContext：

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

从XAML绑定表达式中可以看出，我们的演示模型应该公开Items属性（如果您考虑在运行时更改Items列表，则底层集合必须是ObservableCollection，以便ListView对其更改做出反应）：

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类中。然后，图标的类型为Bitmap，与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来存储图标，而不是使用资源。 然后，您的ViewData类将公开类型为Uri的属性（而不是Bitmap）。 那么就不需要转换器了。

- Alex Zhevzhik