WPF Korea +

'Attribute'에 해당되는 글 2건

2009/09/08 Custom Attribute MarkupExtenstion
2008/08/17 ContentProperty Attribute 사용하기

Custom Attribute MarkupExtenstion

안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴 내용은 임의로 제작한 Attribute를 UI에 Binding 하기 위한 MarkupExtension에 대해 소개해 드리겠습니다. 이 내용은 데브피아 WPF&Silverlight마을에서 이광현 (dololas)님께서 질문해주신 내용입니다. 간단하게 이번시간에 하고자 하는 내용을 그림으로 표현 하면 아래와 같습니다.

먼저 위 그림과 같이 Header부분에 제목, 감독, 출연배우라고 출력만 하면 되는 상황이라면 아래와 같이 직접 명시해줄 수 있을텐데요, 질문자 님께서 말씀 하신 내용은 명시적으로 Header값을 입력하지 않고, 지정한 Attribute에 따라 Header의 출력 내용을 결정 하고자 하셨으므로 이에 따른 해결 방법에 대해 알아보도록 하겠습니다.

이번 예제에 사용되는 Class와 Attribute의 구조는 다음과 같습니다.

일단 위와 같은 상황에서 가장먼저 떠오르는게 DataBinding이 지만, DataBinding은 Property와 Property간의 연결을 제공하기 때문에 Attribute와는 함께 사용하실 수 없습니다. 따라서 Attribute 값을 반환 하는 MarkupExtension을 구현하여 해결해야 합니다. 아래는 MarkupExtension 구현 부분 소스코드입니다.

MarkupExtension 파라미터로 입력받은 Type과 MemberPath정보를 기반으로, CustomAttribute의 값을 가져옵니다. 간단하죠? 실제 사용할때에는 아래와 같이 사용하시면 되겠습니다.

이상으로 이번시간 내용을 마치며, 기타 질문은 리플이나 이메일로 해주시면 답변 드리도록 하겠습니다. 아래는 이번시간에 사용된 전체소스코드입니다.

CustomAttributeExtension.zip

이올린에 북마크하기(0)

이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG Attribute, MarkupExtension, WPF

Trackback 0 Comment 0

ContentProperty Attribute 사용하기

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

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

public class WPFKorea

{

public string Master { get; set; }

}

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

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>

</Grid.ColumnDefinitions>

</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>

<!--

-->

</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>

</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에 버튼 객체가 추가된 것을 확인 하실 수 있습니다.