WPF - 创建图标列表视图 [英] WPF - Create a listview with icons

问题描述

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

I have a very simple question.

我有一个ListView控件，我想知道如何与左边的图标来创建一个项目。该项目将在C＃中，而不是通过XAML代码动态添加

I have a ListView control and I want to know how to create an item with an icon on the left side. The items will be dynamically added in code in C# and not through XAML.

图像采样：的这里

类似于上面的东西（不包括管理记录头）。我设法创建动态网格（不使用ListView控件）做上面的一个，但我不知道如何控制的事件（点击，等等）。

Something similar to above (excluding the Manage Records header). I managed to do the one above by creating grids dynamically (not using a ListView control) but I'm not sure on how to control the events (click, etc).

在此先感谢。 ：）

推荐答案

解决方案包括在压倒一切的视图项的DataTemplate。

Solution consists in overriding view item 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>

然后我们需要设置我们的的PresentationModel作为视图的DataContext这个观点背后的代码：

Then we have to set our PresentationModel as view's DataContext in code behind this view:

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

正如你可以在XAML绑定表达式我们演示模型应公开项目属性看（如果你考虑改变项目列表中运行时，底层集合必须的ObservableCollection为了ListView控件上它的变化做出反应）：

As you can see from binding expression in XAML our presentation model should expose Items property (if you consider changing Items list in runtime, underlying collection must be ObservableCollection in order to ListView reacts on its changes):

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：

In this solution I add existing PNG images to Properties.Resources class. Then icons has type Bitmap that is incompatible with Source property type, so we should convert it to BitmapSource with next converter:

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（而不是位图）的财产。然后不需要转换器。

On other hand you can use pack uri's for storing icons instead of resources. Then your ViewData class will expose property of type Uri (instead of Bitmap). Then no converters are needed.

这篇关于WPF - 创建图标列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！