Cómo: Crear un modo de vista personalizado para un control ListView

  • Artículo

En este ejemplo se muestra cómo crear un modo View personalizado para un control ListView.

Ejemplo

Debe usar la clase ViewBase al crear una vista personalizada para el control ListView. En el ejemplo siguiente se muestra un modo de vista denominado PlainView que se deriva de la clase 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");
      }
  }
}

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

Para aplicar un estilo a la vista personalizada, use la clase Style. En el ejemplo siguiente se define Style para el modo de vista PlainView. En el ejemplo anterior, este estilo se establece como el valor de la propiedad DefaultStyleKey definida para 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>

Para definir el diseño de los datos en un modo de vista personalizado, defina un objeto DataTemplate. En el ejemplo siguiente se define DataTemplate que se puede usar para mostrar datos en el modo de vista 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>

En el ejemplo siguiente se muestra cómo definir ResourceKey para el modo de vista PlainView que usa DataTemplate que se define en el ejemplo anterior.

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

Un control ListView puede usar una vista personalizada si establece la propiedad View en la clave de recurso. En el ejemplo siguiente se muestra cómo especificar PlainView como modo de vista para ListView.

//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;

'Set the ListView View property to the tileView custom view
lv.View = TryCast(lv.FindResource("tileView"), ViewBase)

Para ver el ejemplo completo, consulte Ejemplo de ListView con varias vistas (C#) o Ejemplo de ListView con varias vistas (Visual Basic).

Vea también