WPF - Create a listview with icons

Question

I have a very simple question.

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.

Image Sample: here

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

Thanks in advance. :)

Answer 1

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>

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

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

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

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

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.