如何：建立 ListView 的自訂檢視模式

  • 發行項

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

範例

當您建立控制項的 ListView 自訂檢視時， ViewBase 必須使用 類別。 下列範例顯示衍生 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");
      }
  }
}

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

若要將樣式套用至自訂檢視，請使用 類別 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>

下列範例示範如何針對 PlainView 使用 DataTemplate 上一個範例中所定義 之 的檢視模式定義 ResourceKey 。

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

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

如需完整的範例，請參閱 具有多個檢視的 ListView （C#） 或 具有多個檢視的 ListView （Visual Basic）。

另請參閱