How to: Create a Custom View Mode for a ListView


This example shows how to create a custom View mode for a ListView control.

You must use the ViewBase class when you create a custom view for the ListView control. The following example shows a view mode that is called PlainView, which is derived from the ViewBase class.

    public class PlainView : ViewBase

      public static readonly DependencyProperty 
        ItemContainerStyleProperty =

      public Style ItemContainerStyle
          get { return (Style)GetValue(ItemContainerStyleProperty); }
          set { SetValue(ItemContainerStyleProperty, value); }

      public static readonly DependencyProperty ItemTemplateProperty =

      public DataTemplate ItemTemplate
          get { return (DataTemplate)GetValue(ItemTemplateProperty); }
          set { SetValue(ItemTemplateProperty, value); }

      public static readonly DependencyProperty ItemWidthProperty =

      public double ItemWidth
          get { return (double)GetValue(ItemWidthProperty); }           
          set { SetValue(ItemWidthProperty, value); }

      public static readonly DependencyProperty ItemHeightProperty =

      public double ItemHeight
          get { return (double)GetValue(ItemHeightProperty); }
          set { SetValue(ItemHeightProperty, value); }

      protected override object DefaultStyleKey
            return new ComponentResourceKey(GetType(), "myPlainViewDSK"); 


To apply a style to the custom view, use the Style class. The following example defines a Style for the PlainView view mode. In the previous example, this style is set as the value of the DefaultStyleKey property that is defined for PlainView.

  <Style x:Key="{ComponentResourceKey 
        TypeInTargetAssembly={x:Type l:PlainView},
         TargetType="{x:Type ListView}" 
         BasedOn="{StaticResource {x:Type ListBox}}"
    <Setter Property="HorizontalContentAlignment"
    <Setter Property="ItemContainerStyle" 
            Value="{Binding (ListView.View).ItemContainerStyle,
            RelativeSource={RelativeSource Self}}"/>
    <Setter Property="ItemTemplate" 
            Value="{Binding (ListView.View).ItemTemplate,
            RelativeSource={RelativeSource Self}}"/>
    <Setter Property="ItemsPanel">
          <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                     ItemWidth="{Binding (ListView.View).ItemWidth,
                     RelativeSource={RelativeSource AncestorType=ListView}}"
                     MinWidth="{Binding (ListView.View).ItemWidth,
                     RelativeSource={RelativeSource AncestorType=ListView}}"
                     ItemHeight="{Binding (ListView.View).ItemHeight,
                     RelativeSource={RelativeSource AncestorType=ListView}}"/>

To define the layout of data in a custom view mode, define a DataTemplate object. The following example defines a DataTemplate that can be used to display data in the PlainView view mode.

      <DataTemplate x:Key="centralTile">
        <StackPanel Height="100" Width="90">
          <Grid Width="70" Height="70" HorizontalAlignment="Center">
            <Image Source="{Binding XPath=@Image}" Margin="6,6,6,9"/>
          <TextBlock Text="{Binding XPath=@Name}" FontSize="13" 
                     HorizontalAlignment="Center" Margin="0,0,0,1" />
          <TextBlock Text="{Binding XPath=@Type}" FontSize="9" 
                     HorizontalAlignment="Center" Margin="0,0,0,1" />

The following example shows how to define a ResourceKey for the PlainView view mode that uses the DataTemplate that is defined in the previous example.

      <l:PlainView x:Key="tileView" 
                   ItemTemplate="{StaticResource centralTile}" 

A ListView control can use a custom view if you set the View property to the resource key. The following example shows how to specify PlainView as the view mode for a ListView.

                //Set the ListView View property to the tileView custom view
                lv.View = lv.FindResource("tileView") as ViewBase;

For the complete sample, see ListView with Multiple Views Sample.

How-to Topics
ListView Overview
GridView Overview