方法: ListView のカスタム表示モードを作成するHow to: Create a Custom View Mode for a ListView

この例は、カスタムを作成する方法を示しています。ViewのモードをListViewコントロール。This example shows how to create a custom View mode for a ListView control.

Example

使用する必要があります、ViewBaseクラス用のカスタム ビューを作成するときに、ListViewコントロール。You must use the ViewBase class when you create a custom view for the ListView control. 次の例では、呼び出される表示モードPlainViewから派生、ViewBaseクラス。The following example shows a view mode that is called PlainView, which is derived from the ViewBase 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"); 
        }
    }

  }
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クラス。To apply a style to the custom view, use the Style class. 次の例では、定義、StylePlainView表示モード。The following example defines a Style for the PlainView view mode. 前の例では、このスタイルが設定の値として、DefaultStyleKeyプロパティに対して定義されているPlainViewします。In the previous example, this style is set as the value of the DefaultStyleKey property that is defined for 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オブジェクト。To define the layout of data in a custom view mode, define a DataTemplate object. 次の例では、定義、DataTemplateデータを表示する使用できる、PlainView表示モード。The following example defines a DataTemplate that can be used to display data in the PlainView view mode.

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

次の例は、定義する方法を示します、ResourceKeyPlainView表示モードを使用する、DataTemplate前の例で定義されています。The following example shows how to define a ResourceKey for the PlainView view mode that uses the DataTemplate that is defined in the previous example.

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

AListView設定した場合、コントロールがカスタム ビューを使用できます、Viewプロパティをリソース キー。A ListView control can use a custom view if you set the View property to the resource key. 次の例は、指定する方法を示しますPlainViewの表示モードとして、ListViewします。The following example shows how to specify PlainView as the view mode for a 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#)または複数 Views(Visual Basic) で ListViewします。For the complete sample, see ListView with Multiple Views(C#) or ListView with Multiple Views(Visual Basic).

関連項目See also