This documentation is archived and is not being maintained.

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 ItemWidth,
                   RelativeSource={RelativeSource Self}}"
                   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.

See Also