Procedura: creare una modalità di visualizzazione personalizzata per un oggetto ListView
Aggiornamento: novembre 2007
In questo esempio viene illustrata la creazione di una modalità View personalizzata per un controllo ListView.
Esempio
Quando si crea una visualizzazione personalizzata per il controllo ListView è necessario utilizzare la classe ViewBase. Nell'esempio seguente viene mostrata una modalità di visualizzazione denominata PlainView, derivata dalla 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");
}
}
}
Per applicare uno stile alla visualizzazione personalizzata, utilizzare la classe Style. Nell'esempio seguente viene definito un oggetto Style per la modalità di visualizzazione PlainView. Nell'esempio precedente, questo stile è impostato come valore della proprietà DefaultStyleKey definita per 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>
Per definire il layout di dati in una modalità di visualizzazione personalizzata, definire un oggetto DataTemplate. Nell'esempio seguente viene definito un oggetto DataTemplate che può essere utilizzato per visualizzare i dati nella modalità di visualizzazione 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>
Nell'esempio seguente viene illustrato come definire un oggetto ResourceKey per la modalità di visualizzazione PlainView che utilizza l'oggetto DataTemplate definito nell'esempio precedente.
<l:PlainView x:Key="tileView"
ItemTemplate="{StaticResource centralTile}"
ItemWidth="100"/>
Un controllo ListView può utilizzare una visualizzazione personalizzata se la proprietà View viene impostata sulla chiave di risorsa. Nell'esempio seguente viene illustrato come specificare PlainView come modalità di visualizzazione per un oggetto ListView.
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
Per l'esempio completo, vedere Esempio di ListView con più visualizzazioni.
Vedere anche
Concetti
Panoramica sul controllo ListView