Procedura: creare una modalità di visualizzazione personalizzata per un oggetto ListView

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
        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"); 
      }
  }

}

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 (ListView.View).ItemWidth,
                   RelativeSource={RelativeSource AncestorType=ListView}}"
                   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 = TryCast(lv.FindResource("tileView"), ViewBase)

//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 (la pagina potrebbe essere in inglese).

Vedere anche

Riferimenti

ListView

GridView

Concetti

Panoramica sul controllo ListView

Cenni preliminari su GridView

Altre risorse

Procedure relative al controllo ListView