MRoc

I am far away knowing how things work in WPF. For writing an own list view I needed quite much time. If it is done right? I can’t tell. Here how I understood things: Demo Project for Visual Studio 2008.

The goals were:

1. Data is provided through data binding
2. Support for different type of objects, each getting its own view
3. Overwrite the default look with the blue selection background

A data bound WPF ListView in XAML with overwritten look using templates and template triggers:

<ListView Name="myListView" ItemsSource="{Binding MyList}">
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Name="Border" Padding="2"
                                SnapsToDevicePixels="true"
                                Background="Transparent">
                            <ContentPresenter Name="Content" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Border"
                                Property="Background" Value="Tomato"/>
                                <Setter Property="Foreground" Value="Yellow"/>
                                <Setter Property="FontWeight" Value="Bold" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="Gray"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="FontWeight" Value="Bold" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.Resources>
        <DataTemplate DataType="{x:Type local:MyItemBase}">
            <TextBlock Text="{Binding Path=Name}"></TextBlock>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:MyItemDerived}">
            <StackPanel>
                <TextBlock Text="{Binding Path=Name}"></TextBlock>
                <TextBlock Text="{Binding Path=Description}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </ListView.Resources>
</ListView>

Here the document classes in c#. MyDocument contains the list. MyItemBase and MyItemDerived are the classes of items contained in the list. For both item classes a data template was defined in the XAML file:

public class MyItemBase
{
    private string name;

    public MyItemBase(string name)
    { Name = name; }

    public string Name
    {
        get { return name; }
        set { name = value; }
    }
}

public class MyItemDerived : MyItemBase
{
    private string description;

    public MyItemDerived(string name, string description)
        : base(name)
    { Description = description; }

    public string Description
    {
        get { return description; }
        set { description = value; }
    }
}

public class MyItemList
{
    private ObservableCollection<MyItemBase> myList
        = new ObservableCollection<MyItemBase>();

    public MyItemList()
    {
        myList.Add(new MyItemBase("Banana"));
        myList.Add(new MyItemBase("Apple"));
        myList.Add(new MyItemDerived("Orange", "Also a color"));
        myList.Add(new MyItemBase("Mango"));
    }

    public ObservableCollection<MyItemBase> MyList
    {
        get { return myList; }
    }
}

Here the view gets connected with the document:

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        myListView.DataContext = new MyItemList();
    }
}

And here is how it looks in action (quite bad, eh?):

References:

MDSN: ListView
MSDN: ListViewItem
MSDN: How to ListView

Codeproject: WPF custom ListBox with scrollbar on the background
SwitchOnTheCode: ListView tutorial with editable GridView

Blog: About ScrollViewer.CanContentScroll
Blog: Get rid of blue background 1
Blog: Get rid of blue background 2