방법: 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"/>
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 with Multiple Views 샘플을 참조하십시오.