XAML or HTML

019. 컨트롤템플릿(ControlTemplate) #2

XAML 뽀개기

이번 포스트에서는 템플릿 수정과 다양한 템플릿의 효율적인 사용방법에 대해 알아봅니다.

 

1
2
3
4
5
6
7
<HeaderedContentControl Header="재생" Grid.Column="1"
                        Style="{DynamicResource Style_HeaderedContentControl}">
    <StackPanel>
        <Button Content="시작"/>
        <Button Content="정지"/>
    </StackPanel>
</HeaderedContentControl>
cs


이전 포스트에서 Blend for VS의 [템플릿 편집 > 복사본 편집] 기능을 이용해 HeaderedContentControl의 기본 템플릿을 구했습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Style x:Key="Style_HeaderedContentControl" TargetType="{x:Type HeaderedContentControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type HeaderedContentControl}">
                <Border Background="WhiteSmoke" 
                        BorderBrush="DarkGray" 
                        BorderThickness="1" 
                        Margin="5">
                    <StackPanel Background="WhiteSmoke" 
                                Margin="5">
                        <ContentPresenter ContentSource="Header" 
                                          TextBlock.FontWeight="Bold" 
                                          Margin="0,0,0,5"/>
                        <ContentPresenter />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
cs

 

이전 포스트에서 작성했던 스타일링 작업의 XAML 코드를 참고해 템플릿을 수정했습니다. HeaderedContentControl의 구조와 외형을 변경하는 작업입니다.

 

1
2
3
4
5
6
7
<HeaderedContentControl Header="재생"
                        Style="{DynamicResource Style_HeaderedContentControl}">
    <StackPanel>
        <Button Content="시작"/>
        <Button Content="정지"/>
    </StackPanel>
</HeaderedContentControl>
cs

           

HeaderedContentControl에 스타일을 각각 선언할 수도 있지만 StackPanel 아래에 리소스로 스타일을 정의하면서 Key 이름을 생략하고 BasedOn 속성을 이용해 일괄적으로 하위 컨트롤에 영향을 미칠 수 있습니다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<StackPanel Grid.Column="1">
    <StackPanel.Resources>
        <Style TargetType="HeaderedContentControl"
               BasedOn="{StaticResource Style_HeaderedContentControl}"/>
    </StackPanel.Resources>
            
    <HeaderedContentControl Header="재생">
        <StackPanel>
            <Button Content="시작"/>
            <Button Content="정지"/>
        </StackPanel>
    </HeaderedContentControl>
    <HeaderedContentControl Header="트랙">
        <StackPanel>
            <Button Content="이전"/>
            <Button Content="다음"/>
        </StackPanel>
    </HeaderedContentControl>
    <HeaderedContentControl Header="소리">
        <StackPanel>
            <Button Content="작게"/>
            <Button Content="크게"/>
        </StackPanel>
    </HeaderedContentControl>
</StackPanel>
cs



좀 더 절약하고 깔끔한 코드를 얻게 되었습니다. 이전 포스트에서도 다룬 적이 있으니 참고하세요.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<StackPanel.Resources>
    <ControlTemplate x:Key="Template_HeaderedContentControl" 
                     TargetType="{x:Type HeaderedContentControl}">
        <Border Background="WhiteSmoke" 
                BorderBrush="DarkGray" 
                BorderThickness="1" 
                Margin="5">
            <StackPanel Background="WhiteSmoke" 
                        Margin="5">
                <ContentPresenter ContentSource="Header" 
                                  TextBlock.FontWeight="Bold" 
                                  Margin="0,0,0,5"/>
                <ContentPresenter />
            </StackPanel>
        </Border>
    </ControlTemplate>
</StackPanel.Resources>
cs


1
2
3
4
5
6
7
<HeaderedContentControl Header="재생"
                        Template="{DynamicResource Template_HeaderedContentControl}">
    <StackPanel>
        <Button Content="시작"/>
        <Button Content="정지"/>
    </StackPanel>
</HeaderedContentControl>
cs


 

꼭 스타일이 아니더라도 템플릿을 변경할 수 있습니다. 이 말인 즉슨 스타일의 ControlTemplate을 단독으로도 사용할 수 있다는 것입니다. 리소스로 정의해 사용하는 방법은 동일하기 때문에 Key 이름 선언이 필수입니다.

 

1
2
3
4
5
6
7
<!--HeaderedContentControl의 Content 템플릿-->
<DataTemplate x:Key="DataTemplate_Content">
    <StackPanel Orientation="Horizontal">
        <Button Content="이전" Width="50" Margin="0,0,5,0"/>
        <Button Content="다음" Width="50"/>
    </StackPanel>
</DataTemplate>
cs

 

1
2
3
4
5
6
7
8
<HeaderedContentControl Header="트랙"
                        Template="{DynamicResource Template_HeaderedContentControl}"
                        ContentTemplate="{DynamicResource DataTemplate_Content}">
    <!--<StackPanel>
        <Button Content="이전"/>    
        <Button Content="다음"/>        
    </StackPanel>-->
</HeaderedContentControl>
cs

 

 

Content만의 템플릿을 새로이 정의할 수도 있습니다. 이 템플릿은 DataTemplate이라고 합니다. DataTemplate은 이전 ControlTemplate의 하위 템플릿이라고 할 수 있습니다. DataTemplate은 다른 포스트에서 다시 살펴보겠습니다.

 

1
2
3
4
5
6
7
<!--HeaderedContentControl의 Header 템플릿-->
<DataTemplate x:Key="DataTemplate_Header">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="※" Margin="0,0,5,0" Foreground="Red"/>
        <TextBlock Text="{Binding }" Foreground="Red"/>
    </StackPanel>
</DataTemplate>
cs

 

1
2
3
4
5
6
7
8
<HeaderedContentControl Header="소리" 
                        Template="{DynamicResource Template_HeaderedContentControl}"
                        HeaderTemplate="{DynamicResource DataTemplate_Header}">
    <StackPanel>
        <Button Content="작게"/>
        <Button Content="크게"/>
    </StackPanel>
</HeaderedContentControl>
cs

 

 

앞서 본 Content의 템플릿과 동일한 방법으로 Header만의 템플릿을 새로이 정의할 수도 있습니다.

 

Template, ContentTemplate, HeaderTemplate은 모두 템플릿이라 할 수 있습니다. Template이 기본 골격(외형)이라면 ContentTemplate, HeaderTemplate은 그 아래 골격(외형)이라 할 수 있겠습니다. ContentPresenter의 Content 속성이 암시적 바인딩이 작용한 것과 같이 템플릿 속성도 암시적으로 바인딩됩니다.

 

지금까지 예로 든 템플릿 사용 방법들은 기본 골격은 같은데 특정 일부만 변경을 필요로 할 때 하위 템플릿을 새로이 정의해서 리소스(템플릿)를 효율적으로 사용 가능케 합니다.


관련 목차


018. 컨트롤템플릿(ControlTemplate) #1

019. 컨트롤템플릿(ControlTemplate) #2

저작자표시비영리변경금지

'XAML 뽀개기' 카테고리의 다른 글

021. 비헤이비어(CallMethodAction) #2  (0) 2018.02.20
020. 비헤이비어(Behavior) #1  (0) 2018.02.20
019. 컨트롤템플릿(ControlTemplate) #2  (0) 2018.02.12
018. 컨트롤템플릿(ControlTemplate) #1  (0) 2018.02.12
017. 두개의 콘텐츠 버튼(Two Contents Button) #3  (0) 2018.02.05
016. 두개의 콘텐츠 버튼(Two Contents Button) #2  (0) 2018.02.02
, , ,
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

비밀글