Custom ListViewItem [closed]

Question

I must customize .NET ListView control.
ListViewItem must have following structure:

alt text http://img257.imageshack.us/img257/1575/85834837.jpg

Is there any good tutorial which will help me to make this customization?

I am using Visual Studio 2008, C#.

Answer 1

Scott Guthrie has some great tutorials covering the listview control

http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx

Answer 2

Create your own listviewitem based on the normal Listviewitem and and do your own drawing

Answer 3

In WPF you can use the ListViewItem to describe how a ListViewItem should look, or even use a DataTemplate. Here is a really simple start to your above problem, then see if you can play with it to your needs.

<ListView ItemsSource="{Binding ViewModelList}" >
          <ListViewItem>
            <Grid>
                   <Grid.RowDefinitions>
                         <RowDefinition />
                         <RowDefinition />
                   </Grid.RowDefinitions>
                   <Grid.ColumnDefinitions>
                         <ColumnDefinition />
                         <ColumnDefinition />
                         <ColumnDefinition />
                         <ColumnDefinition />
                   </Grid.ColumnDefinitions>
                   <Image Source="{Binding ImageInViewModel}" 
                          Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
                   <TextBlock Text="{Binding ItemText}" Name="Item Text" 
                              Grid.Row="0" Grid.Column="1" />
                   <TextBlock Name="SubItem1" Text="{Binding SubItem1}"
                              Grid.Row="0" Grid.Column="2" />
                   <TextBlock Name="SubItem2" Text="{Binding SubItem2}"
                              Grid.Row="0" Grid.Column="3" />
                   <Read Comment! Grid.Row="1" Grid.Column="1" Grid.ColSpan="3" />
            </Grid>
          </ListViewItem>
</ListView>

Read Comment: Instead of thinking of this specific part as your ListBoxItem, there can be two approaches.

1. You are in the context of your current ListViewItem's binding, so you can describe that next block to suit your needs.

2. You can use an "middle-man" ViewModel that contains a reference to another ViewModel that describes your content in "Multiline subitem 3". This would allow you to use a DataTemplate on both types and separate the display of each. This solution is complex, at first, but looks to be more in line with your question.