方法 : ListView のカスタム表示モードを作成する
この例では、ListView コントロールのカスタム View モードを作成する方法を示します。
使用例
ListView コントロールのカスタム ビューを作成する場合は、ViewBase クラスを使用する必要があります。 ViewBase クラスから派生した、PlainView と呼ばれる表示モードを次の例に示します。
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>
前の例で定義した DataTemplate を使用する PlainView 表示モードの 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 = TryCast(lv.FindResource("tileView"), ViewBase)
//Set the ListView View property to the tileView custom view
lv.View = lv.FindResource("tileView") as ViewBase;
サンプル全体については、複数のビューを持つ ListView のサンプルを参照してください。