방법: ListView의 사용자 지정 뷰 모드 만들기

  • 아티클

이 예제에서는 ListView 컨트롤에 대한 사용자 지정 View 모드를 만드는 방법을 보여 줍니다.

예제

ListView 컨트롤에 대한 사용자 지정 뷰를 만들 때 ViewBase 클래스를 사용해야 합니다. 다음 예제에서는 ViewBase 클래스에서 파생된 PlainView라는 뷰 모드를 보여 줍니다.

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 클래스를 사용합니다. 다음 예제에서는 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 컨트롤에서 사용자 지정 뷰를 사용할 수 있습니다. 다음 예제에서는 ListView에 대한 뷰 모드로 PlainView를 지정하는 방법을 보여 줍니다.

//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)를 참조하세요.

참고 항목