Question

Is there any control in c# which allows us to make some sort of list view with images and formatted text and icons, something like the contacts in android? The closest I found is this:

1) http://www.c-sharpcorner.com/UploadFile/mgold/ListViewInCSharp11172005021741AM/ListViewInCSharp.aspx

2) http://www.dreamincode.net/forums/topic/75911-adding-images-to-listview/

Which in my opinion is very ugly compared to what android and iPhone can do, something like this:

http://www.trymasak.my/sample/iphone2.jpg

Answer 1

Ok, well if you don’t care whether you use WinForms or WPF, I would recommend using WPF.

If you want something like a ListView, try using the DataGrid. The basic concept you need here is the usage of the DataTemplate. Within the DataTemplate, you can restyle the contents of the cell however you like.

Here’s a rough example that I pulled from some of my code, but I haven’t made it compile on its own. It’ll give you a good head start.

<DataGrid ItemsSource="{Binding MyGridData}" AutoGenerateColumns="False" Name="my_datagrid">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Column1">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source={Binding GridCellImage}" />
                        <TextBlock Text="{Binding GridCellText}" />
                    </StackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Read up on databinding to understand MyGridData. It’s basically going to be a collection in code-behind that supplies the information for your grid. It could be something like a List<T> or ObservableCollection<T>. T is a class that has two public properties called GridCellImage and GridCellText. WPF makes it easy in that you create your data in code-behind, and because it is databound your GUI will update automatically (in the case of the ObservableCollection). Set GridCellImage to your image path and GridCellText to the text you want in that cell. GridCellImage needs more specified to actually make it work, but the point of this answer is to show you how easy it is to retemplate stuff in WPF to make it display data pretty much however you like.

Hope this helps!