How to: Create a Custom View Mode for a ListView
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.
For the complete sample, see ListView with Multiple Views Sample.
