HOW TO：建立 ListView 的自訂檢視模式

發行項
08/12/2011

本範例示範如何建立 ListView 控制項的自訂 View 模式。

範例

當您建立 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 類別。下列範例會定義 PlainView 檢視模式的 Style。在上一個範例中，這個樣式是設定成 PlainView 定義的 DefaultStyleKey 屬性值。

<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 物件。下列範例定義可用來在 PlainView 檢視模式中顯示資料的 DataTemplate。

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

下列範例示範如何定義 PlainView 檢視模式的 ResourceKey，而該檢視模式則使用上一個範例中定義的 DataTemplate。

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

如果您將 View 屬性設定為資源索引鍵，ListView 控制項就可以使用自訂檢視。下列範例示範如何指定 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 範例 (英文)。

請參閱

共用方式為

HOW TO：建立 ListView 的自訂檢視模式

範例

請參閱

參考

概念

其他資源

其他資源