WPF: ListView with icons view?


Question

I can't figure out how I can implement an Icon View in the WPF ListView (a view similar to the Windows Explorer). Searching on google I only found informations about implementing the GridView but no clues about the Icon View. I'm not talking about System.Windows.Form.ListView but System.Windows.Controls.ListView.

Perhaps there is another control to do that? I didn't find anything relevant about this?

I've only found some people that build the icon view by hand using the listbox and changing the paneltemplate and the icontemplate. I can't believe this is the only way to do it.

Any clues?

Thanks in advance

1
9
1/27/2009 7:19:01 PM

Accepted Answer

Same as Tanveer Badar's answer, but with a WrapPanel instead of a UniformGrid. Set the following in your listbox:

ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
ScrollViewer.VerticalScrollBarVisibility="Auto"       

to force the WrapPanel to wrap.

8
1/27/2009 8:04:15 PM

EDIT Appears i misunderstood what you meant with Explorer view...i have mine set to Details... ;) I'll leave my answer up here in case anyone makes the same mistake as i...


There is no such thing as an Icon View in WPF, you'll have to implement it yourself, but you dont have to do everything from scratch.

You can use the ListView in combination with a GridView and at least one CellTemplate for the column that contains the icon.

The general outline would look something like this for an Windows Explorer like view:

<ListView>
    <ListView.Resources>
        <DataTemplate x:Key="IconTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0"/>
                <TextBlock Grid.Column="1" Text="{Binding Name}"/>
            </Grid>
        </DataTemplate>
    </ListView.Resources>            
    <ListView.View>     
        <GridView>
            <GridViewColumn CellTemplate="{StaticResource IconTemplate}" Header="Name"/>
            <GridViewColumn DisplayMemberBinding="{Binding Size}" Header="Size"/>
            <GridViewColumn DisplayMemberBinding="{Binding Type}" Header="Type"/>                    
        </GridView>
    </ListView.View>
</ListView>

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon