우리가 컨트롤을 만들다 보면.. 가끔은 (아니 사실 거의 매번) UI control을 custom해주어야 한다.
WPF에서는 커스텀 컨트롤을 하는 방법은 크게 두가지가 있다.
하나는 MFC시절부터 사용하던 역사적인 방법인(...) 기본 컨트롤을 상속받아서 만드는 방법이 있을 것이다.
이 방법은 입력에 따른 별도의 처리가 필요한 경우라면 사용을 고려하는 것이 좋다. (반드시라고 하기에는 좀 어려운 것이.. event handling을 통한 처리라는 방법도 있으니까. 물론, 이벤트 핸들링이 공통적으로 사용된다면? 고민해볼만 한 방법이 된다.)
우선 그 방법은 다음에 포스팅하도록 하고.. 오늘은 DataTemplate를 이용한 custom control을 만드는 방법에 대해 끄적인다.
DataTemplate는 데이터를 어떠한 템플릿 형태로 표시하기 위해서라고 생각하면 될듯.. 예를들어서 사용자 목록을 표시한다고 해보자.
사람에 따라 왼쪽 스타일을 선호하는 사람이 있고, 오른쪽을 선호하는 사람이 있다. 나의 경우 오른쪽처럼 표시하는 것을 좋아하니까 목록을 저런 형태로 표시하기 위해 DataTemplate로 해결하고자 한다.
Object Source는 List<UserInfo> myUserInfo; << 이거라고 가정하자. UserInfo는 아래와 같다.
public class UserInfo{
public string userName{get;set;}
public string userId{get; set;}
public string userTel{get;set;}
}그러면 이제 저 객체를 나만의 방식으로 표현할 데이터템플릿이 필요하겠지?
<ListBox ItemsSource="{Binding Path=myItemList}">
<ListBox.ItemTemplate>
<DataTemplate x:Key="myPHonebookCard">
<Border CornerRadius="5,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinitions Height="Auto" />
<RowDefinitions Height="5" />
<RowDefinitions Height="Auto" />
<RowDefinitions Height="5" />
<RowDefinitions Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Img src="peopleicon.jpg" Grid.Row="0" Grid.RowSpan="5" Grid.Column="0" >
//필요 시, Trigger를 이용하여 image를 바꿀 수 있다. img가 아닌 path등으로
//Vector를 사용할 수 있다.
</Img>
<Label Grid.Column="2" Grid.Row="0" Content="이름" />
<Label Grid.Column="2" Grid.Row="2" Content="ID" />
<Label Grid.Column="2" Grid.Row="4" Content="Tel" />
<Text Grid.Column="4" Grid.Row="0" Text="{Binding Path=userName}" />
<Text Grid.Column="4" Grid.Row="2" Text="{Binding Path=userId}" />
<Text Grid.Column="4" Grid.Row="4" Text="{Binding Path=userTel}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>위와 같이 DataTemplate를 작성하면, UserInfo를 이미지처럼 namecard형태로 표시하는 것이 가능하다.
그리고, DataTemplate는 Resource로 뽑아내서 재활용이 가능하다.
저기에 붙는 객체들 타입은, 추상화 시켜서 사용해도 좋고.. 그러면 재사용에 유리하지 뭐 :)
댓글