WPF2008/08/17 01:40

이번 시간에는 UserControl 구현 시 유용하게 사용될 수 있는 방법 중 하나인 ContentPropertyAttribute에 대해 소개해 드리겠습니다. XAML에서 말하는 ContentPropertyAttribute란 쉽게 말해 XAML로 기록 될 때 Content가 기록되는 속성이 무엇인지를 명시해 주는 Attribute로 코드를 보면서 계속 설명하겠습니다.

위와 같이 간단한 Class가 정의 되어 있다고 가정 했을 때 XAML에서 WPFKorea라는 객체를 생성하고 Master Property에 데이터를 쓰려면 어떻게 해야 할 가요?

public class WPFKorea

{

public string Master { get; set; }

}

가장 간단하게 생각할 수 있는 방법 중의 하나는 아래처럼 Property를 직접 명시해 주는 방법이 있겟죠?

<WPFKorea Master="KimDaeWook" />

Class 정의 부분에 아래와 같이 ContentProperty Attribute를 선언하여 사용하면 아래와 같이 구현 할 수도 있습니다.

[ContentProperty("Master")]

public class WPFKorea

{

public string Master { get; set; }

}

<w:WPFKorea>

KimDaeWook

</w:WPFKorea>

이해가 되셨나요? ContentPropertyAttribute는 XAML에서 Content속성으로 사용할 대표 속성을 명시해주는 역할을 합니다. ContentProperty Attribute에 대해 조금 더 살펴 보기 위해 아래와 같은 UserControl을 구현 했습니다.

<UserControl x:Class="ContentPropertySample.MultiStackPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.5*"/>

<ColumnDefinition Width="0.5*"/>

</Grid.ColumnDefinitions>

<StackPanel Background="Red" x:Name="Left" Grid.Column="0"/>

<StackPanel Background="Blue" x:Name="Right" Grid.Column="1"/>

</Grid>

</UserControl>

아래 그림과 같이 왼쪽은 빨간색, 오른쪽은 파란색 배경의 StatckPanel을 포함한 UserControl이 생성이 되겠죠?

사용자 삽입 이미지

실제 컨트롤을 사용 할 때는 아래 와 같이 namespace를 등록하고 객체를 생성해서 사용할 것입니다.

<Window x:Class="ContentPropertySample.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:w="clr-namespace:ContentPropertySample"

Title="Window1" Height="300" Width="300">

<w:MultiStackPanel>

<!--

<Button Height="40"/>

-->

</w:MultiStackPanel>

</Window>

그렇다면 문제! 위에 주석으로 처리된 Button을 풀면 어떻게 될 가요?

1. 아무런 변화 없다.
2. 빨간색 StackPanel에 등록된다.
3. 파란색 StackPanel에 등록된다.
4. 화면중앙에 버튼이 생긴다.



정답은 4번이죠? UserControl의 Content에 저장되어 있던 Grid가 Button으로 교체 되었기 때문입니다. 그렇다면 버튼을 왼쪽 StackPanel에 등록 하는 방법은? 아래와 같이 C#코드를 추가하고, XAML 코드를 작성하면 구현 할 수 있습니다.

public partial class MultiStackPanel : UserControl

{

public MultiStackPanel()

{

InitializeComponent();

}

public UIElementCollection LeftItem { get { return Left.Children; } }

}

<w:MultiStackPanel>

<w:MultiStackPanel.LeftItem>

<Button Height="40"/>

</w:MultiStackPanel.LeftItem>

</w:MultiStackPanel>

그럼 결과가 나오긴 나오는데 뭔가 찝찝하죠? 이럴 때 ContentProperty Attribute를 사용하면 간단하고 깔끔하게 해결 할 수 있습니다. C# 코드에 아래와 같이 ContentProperty Attribute를 추가하고 LeftItem Property로 설정합니다.

[ContentProperty("LeftItem")]

public partial class MultiStackPanel : UserControl

{

public MultiStackPanel()

{

InitializeComponent();

}

public UIElementCollection LeftItem { get { return Left.Children; } }

}

이제 다시 코드를 아래와 같이 원래대로 고쳐놓고 실행 시켜보면 아래 그림과 같이 왼쪽 StackPanel에 버튼 객체가 추가된 것을 확인 하실 수 있습니다.

사용자 삽입 이미지

<w:MultiStackPanel>

<Button Height="40"/>

</w:MultiStackPanel>

아래는 위 예제 전체 소스코드 파일입니다.

사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스