Compartilhar via


Como: Criar um Modo de Visualização Personalizado para um ListView

This example shows how to create a custom View mode for a ListView control.

Exemplo

You must use the ViewBase class when you create a custom view for the ListView control. The following example shows a view mode that is called PlainView, which is derived from the ViewBase class.

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

}

To apply a style to the custom view, use the Style class. The following example defines a Style for the PlainView view mode. In the previous example, this style is set as the value of the DefaultStyleKey property that is defined for 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>

To define the layout of data in a custom view mode, define a DataTemplate object. The following example defines a DataTemplate that can be used to display data in the PlainView view mode.

<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>

The following example shows how to define a ResourceKey for the PlainView view mode that uses the DataTemplate that is defined in the previous example.

<l:PlainView x:Key="tileView" 
             ItemTemplate="{StaticResource centralTile}" 
             ItemWidth="100"/>

A ListView control can use a custom view if you set the View property to the resource key. The following example shows how to specify PlainView as the view mode for a 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 obter o exemplo completo, consulte ListView com vários exemplos de modos de exibição.

Consulte também

Referência

ListView

GridView

Conceitos

Visão geral de ListView

GridView Overview

Outros recursos

ListView How-to Topics