Практическое руководство. Создание пользовательского режима представления для ListView

В этом примере демонстрируется создание пользовательского режима View для элемента управления ListView.

Пример

При создании пользовательского представления для элемента управления ListView необходимо использовать класс ViewBase. В следующем примере показан режим представления с именем PlainView, который является производным от класса 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"); 
      }
  }

}

Чтобы применить стиль к пользовательскому представлению, используйте класс Style. В следующем примере определяется Style для режима представления PlainView. В предыдущем примере этот стиль задан как значение свойства DefaultStyleKey, которое определено для 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>

Чтобы определить макет данных в режиме представления, определите объект DataTemplate. В следующем примере определяется DataTemplate, который может использоваться для отображения данных в режиме представления 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>

В следующем примере показано определение ResourceKey для режима представления PlainView, который использует DataTemplate, определенный в предыдущем примере.

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

Элемент управления ListView может использовать пользовательское представление, если в качестве значения свойства View указан ключ ресурса. В следующем примере показано, как задать PlainView в качестве режима представления для 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;

Полный код примера см. в разделе Пример "ListView with Multiple Views".

См. также

Ссылки

ListView

GridView

Основные понятия

Общие сведения об элементе управления ListView

Общие сведения о GridView

Другие ресурсы

Практические руководства, посвященные ListView