如何：为 ListView 创建自定义视图模式
更新：2007 年 11 月
本示例演示如何为 ListView 控件创建自定义 View 模式。
示例
当为 ListView 控件创建自定义视图时，必须使用 ViewBase 类。下面的示例演示了称为 PlainView 的视图模式，它是从 ViewBase 类派生的。
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");
}
}
}
若要向自定义视图应用样式，应使用 Style 类。下面的示例为 PlainView 视图模式定义 Style。在前面的示例中，此样式设置为 DefaultStyleKey 属性的值，该属性是为 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 ItemWidth,
RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
若要在自定义视图模式下定义数据的布局，应定义 DataTemplate 对象。下面的示例定义一个可用于在 PlainView 视图模式下显示数据的 DataTemplate。
<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>
下面的示例演示如何为使用在前面的示例中定义的 DataTemplate 的 PlainView 视图模式定义 ResourceKey。
<l:PlainView x:Key="tileView"
ItemTemplate="{StaticResource centralTile}"
ItemWidth="100"/>
如果您将 View 属性设置为该资源键，则 ListView 控件可以使用自定义视图。下面的示例演示如何将 PlainView 指定为 ListView 的视图模式。
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
有关完整示例，请参见 具有多个视图的 ListView 的示例。