Como: Criar um Modo de Visualização Personalizado para um ListView
Este exemplo mostra como criar um modo de View personalizado para um controle ListView.
Exemplo
Você deve usar a classe ViewBase Ao criar um modo de exibição personalizado para o controle ListView. O exemplo a seguir mostra um modo de exibição denominado PlainView, que é derivado da classe 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");
}
}
}
Para aplicar um estilo ao modo de exibição personalizado, use a classe Style. O exemplo a seguir define um Style para o modo de exibição PlainView. No exemplo anterior, esse estilo é definido como o valor da propriedade DefaultStyleKey que está definido 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 ItemWidth,
RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
Para definir o layout dos dados em um modo de exibição personalizado, defina um objeto DataTemplate. O exemplo a seguir define um DataTemplate que pode ser usado para exibir dados no modo de exibição 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>
O exemplo a seguir mostra como definir um ResourceKey para o modo de exibição PlainView que usa o DataTemplate que está definido no exemplo anterior.
<l:PlainView x:Key="tileView"
ItemTemplate="{StaticResource centralTile}"
ItemWidth="100"/>
Um controle ListView pode usar um modo de exibição personalizado se você definir a propriedade View como a chave de recurso. O exemplo a seguir mostra como especificar PlainView como modo de exibição para um ListView.
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
For the complete sample, see Exibição em Lista com Múltiplo exibições exemplo.