Gewusst wie: Erstellen eines benutzerdefinierten Ansichtsmodus für eine ListView
Aktualisiert: November 2007
Dieses Beispiel zeigt, wie Sie einen benutzerdefinierten View-Modus für ein ListView-Steuerelement erstellen.
Beispiel
Sie müssen die ViewBase-Klasse verwenden, wenn Sie eine benutzerdefinierte Ansicht für das ListView-Steuerelement erstellen. Das folgende Beispiel zeigt einen Ansichtsmodus mit dem Namen PlainView, der von der ViewBase-Klasse abgeleitet wurde.
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");
}
}
}
Mit der Style-Klasse können Sie der benutzerdefinierten Ansicht einen Stil hinzufügen. Im folgenden Beispiel wird ein Style für den PlainView-Ansichtsmodus festgelegt. Im vorigen Beispiel wird dieser Stil als Wert der DefaultStyleKey-Eigenschaft festgelegt, die für PlainView definiert ist.
<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>
Zum Festlegen des Datenlayouts in einem benutzerdefinierten Ansichtsmodus müssen Sie ein DataTemplate-Objekt definieren. Im folgenden Beispiel wird eine DataTemplate definiert, die zur Anzeige von Daten im PlainView-Ansichtsmodus verwendet werden kann.
<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>
Das folgende Beispiel zeigt, wie Sie einen ResourceKey für den PlainView-Ansichtsmodus definieren, der die im vorigen Beispiel definierte DataTemplate verwendet.
<l:PlainView x:Key="tileView"
ItemTemplate="{StaticResource centralTile}"
ItemWidth="100"/>
Ein ListView-Steuerelement kann eine benutzerdefinierte Ansicht verwenden, wenn Sie die View-Eigenschaft auf den Ressourcenschlüssel setzen. Das folgende Beispiel zeigt, wie Sie PlainView als Ansichtsmodus für eine ListView angeben.
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
Das vollständige Beispiel finden Sie unter Beispiel für eine ListView mit mehreren Ansichten.