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 =
        ItemsControl.ItemContainerStyleProperty.AddOwner(typeof(PlainView));

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

      public static readonly DependencyProperty ItemTemplateProperty =
          ItemsControl.ItemTemplateProperty.AddOwner(typeof(PlainView));

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

      public static readonly DependencyProperty ItemWidthProperty =
          WrapPanel.ItemWidthProperty.AddOwner(typeof(PlainView));

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

  
      public static readonly DependencyProperty ItemHeightProperty =
          WrapPanel.ItemHeightProperty.AddOwner(typeof(PlainView));

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

  
      protected override object DefaultStyleKey
      {
          get 
          { 
            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},
        ResourceId=myPlainViewDSK}" 
         TargetType="{x:Type ListView}" 
         BasedOn="{StaticResource {x:Type ListBox}}"
         >
    <Setter Property="HorizontalContentAlignment"
            Value="Center"/>
    <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">
      <Setter.Value>
        <ItemsPanelTemplate>
          <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                     RelativeSource={RelativeSource 
                                     AncestorType=ScrollContentPresenter}}"
                     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}}"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
  </Style>

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"/>
          </Grid>
          <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" />
        </StackPanel>
      </DataTemplate>

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}" 
                   ItemWidth="100"/>

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.

ListView
GridView
How-to Topics
ListView Overview
GridView Overview

Show: