Cómo: Crear un modo de vista personalizado para un control ListView
En este ejemplo se muestra cómo crear un modo de View personalizado para un control ListView.
Ejemplo
Debe utilizar la clase ViewBase al crear una vista personalizada para el control ListView. En el ejemplo siguiente se muestra un modo de vista que se denomina PlainView, derivado de la clase ViewBase.
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
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");
}
}
}
Para aplicar un estilo a la vista personalizada, utilice la clase Style. En el ejemplo siguiente se define un estilo (Style) para el modo de vista PlainView. En el ejemplo anterior, este estilo se establece como el valor de la propiedad DefaultStyleKey que se define para 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>
Para definir el diseño de los datos en un modo de vista personalizado, defina un objeto DataTemplate. En el ejemplo siguiente se define un objeto DataTemplate que se puede utilizar para mostrar datos en el modo de vista PlainView.
<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>
En el ejemplo siguiente se muestra cómo definir una clave de recurso (ResourceKey) para el modo de vista PlainView que utiliza el objeto DataTemplate definido en el ejemplo anterior.
<l:PlainView x:Key="tileView"
ItemTemplate="{StaticResource centralTile}"
ItemWidth="100"/>
Un control ListView puede utilizar una vista personalizada si se establece la propiedad View en la clave de recurso. En el ejemplo siguiente se muestra cómo especificar PlainView como el modo de vista para ListView.
'Set the ListView View property to the tileView custom view
lv.View = TryCast(lv.FindResource("tileView"), ViewBase)
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
Para obtener el ejemplo completo, vea ListView with Multiple Views Sample.
Vea también
Referencia
Conceptos
Información general sobre ListView
Información general sobre GridView