WPF - create a list with icons

Question

I have a very simple question.

I have a ListView control and I want to know how to create an element with an icon on the left. Elements will be dynamically added to C # code , not through XAML.

Sample Image: here

Something like the above (excluding the Manage Records heading). I managed to do this above by creating meshes dynamically (without using the ListView control), but I'm not sure how to manage events (click, etc.).

Thanks in advance.:)

Answer 1

The solution is to override the DataTemplate view element.

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