Vorgehensweise: Erstellen eines benutzerdefinierten Ansichtsmodus für eine ListView
In diesem Beispiel wird gezeigt, wie Sie einen benutzerdefinierten View-Modus für ein ListView-Steuerelement erstellen.
Beispiel
Sie müssen die klasse ViewBase verwenden, wenn Sie eine benutzerdefinierte Ansicht für das ListView-Steuerelement erstellen. Das folgende Beispiel zeigt einen Ansichtsmodus namens PlainView
, der von der ViewBase-Klasse abgeleitet ist.
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");
}
}
}
Public Class PlainView
Inherits ViewBase
Public Shared ReadOnly ItemContainerStyleProperty As DependencyProperty = ItemsControl.ItemContainerStyleProperty.AddOwner(GetType(PlainView))
Public Property ItemContainerStyle() As Style
Get
Return CType(GetValue(ItemContainerStyleProperty), Style)
End Get
Set(ByVal value As Style)
SetValue(ItemContainerStyleProperty, value)
End Set
End Property
Public Shared ReadOnly ItemTemplateProperty As DependencyProperty = ItemsControl.ItemTemplateProperty.AddOwner(GetType(PlainView))
Public Property ItemTemplate() As DataTemplate
Get
Return CType(GetValue(ItemTemplateProperty), DataTemplate)
End Get
Set(ByVal value As DataTemplate)
SetValue(ItemTemplateProperty, value)
End Set
End Property
Public Shared ReadOnly ItemWidthProperty As DependencyProperty = WrapPanel.ItemWidthProperty.AddOwner(GetType(PlainView))
Public Property ItemWidth() As Double
Get
Return CDbl(GetValue(ItemWidthProperty))
End Get
Set(ByVal value As Double)
SetValue(ItemWidthProperty, value)
End Set
End Property
Public Shared ReadOnly ItemHeightProperty As DependencyProperty = WrapPanel.ItemHeightProperty.AddOwner(GetType(PlainView))
Public Property ItemHeight() As Double
Get
Return CDbl(GetValue(ItemHeightProperty))
End Get
Set(ByVal value As Double)
SetValue(ItemHeightProperty, value)
End Set
End Property
Protected Overrides ReadOnly Property DefaultStyleKey() As Object
Get
Return New ComponentResourceKey(Me.GetType(), "myPlainViewDSK")
End Get
End Property
End Class
Verwenden Sie die Style-Klasse, um einen Stil auf die benutzerdefinierte Ansicht anzuwenden. Im folgenden Beispiel wird ein Style für den Ansichtsmodus PlainView
definiert. Im vorherigen 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 (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
Um das Layout von Daten in einem benutzerdefinierten Ansichtsmodus zu definieren, definieren Sie ein DataTemplate-Objekt. Im folgenden Beispiel wird eine DataTemplate definiert, die zum Anzeigen von Daten im Ansichtsmodus PlainView
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 eine ResourceKey für den Ansichtsmodus PlainView
definieren, der die im vorherigen Beispiel definierte DataTemplate verwendet.
<l:PlainView x:Key="tileView"
ItemTemplate="{StaticResource centralTile}"
ItemWidth="100"/>
Ein ListView-Steuerelement kann eine benutzerdefinierte Ansicht verwenden, indem Sie die View-Eigenschaft auf den Ressourcenschlüssel festlegen. Das folgende Beispiel zeigt, wie sie PlainView
als Ansichtsmodus für eine ListViewangeben.
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
'Set the ListView View property to the tileView custom view
lv.View = TryCast(lv.FindResource("tileView"), ViewBase)
Das vollständige Beispiel finden Sie unter ListView mit mehreren Ansichten (C#) oder ListView mit mehreren Ansichten (Visual Basic).
Siehe auch
.NET Desktop feedback