WPF combine icon and text in Listview with columns

Question

I'm coding simple file explorer in WPF and I have Listview with 5 columns (Name, Extension, Size, Date, Attributes)

XAML looks this:

<ListView Name="ListView" BorderThickness="2,0,2,0" BorderBrush="Gray" Height="Auto" Width="Auto" >
<ListView.View>
    <GridView>
        <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="450"/>
        <GridViewColumn Header="Extension" DisplayMemberBinding="{Binding Extension}" Width="70"/>
        <GridViewColumn Header="Size" DisplayMemberBinding="{Binding Size}" Width="80"/>
        <GridViewColumn Header="Date" DisplayMemberBinding="{Binding Date}" Width="80"/>
        <GridViewColumn Header="Attributes" DisplayMemberBinding="{Binding Attributes}" Width="60"/>
    </GridView>
</ListView.View>

Then, I have class FileInfo with five properties, each binded to column via DisplayMemberBinding

public class FileInfo
{        
    public string Name { get; set; }
    public string Extension { get; set; }
    public string Size { get; set; }
    public string Date { get; set; }
    public string Attributes { get; set; }
}

var files = new List<FileInfo> { new FileInfo { Name = "Foo", Extension = ".sub", Date = "1.1.2015", Size = "3.05", Attributes = "H" } } //just as test
ListView.ItemsSource = files;

That works fine.

Now, in column Name I want to combine file name with its associated icon. And I don't know, how to do that. I don't want to create another column for icon, icon must be included in Name column.

Any ideas? Is there a way to do this programmatically, or do I need to modify XAML?

You need to create your own [CellTemplate](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.gridviewcolumn.celltemplate?view=netframework-4.5.2) for the Name column. — Insane, Sep 18 '19 at 09:27
Sticking an image and textblock in a celltemplate is the easy bit. Getting the icon is way harder https://stackoverflow.com/questions/2701263/get-the-icon-for-a-given-extension — Andy, Sep 18 '19 at 18:30

score 2 · Answer 1 · answered Sep 18 '19 at 11:45

You need to create CellTemplate for your GridViewColumn like this

<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="450">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="<Your Image Source>"/>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

WPF combine icon and text in Listview with columns

1 Answers1