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

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

Пример

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

Чтобы применить стиль к пользовательскому представлению, используйте 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 = lv.FindResource("tileView") as ViewBase;

Полный пример см. в разделе ListView с несколькими представлениями (C#) или ListView с помощью нескольких Views(Visual Basic).

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

Пример

См. также