XAML or HTML

015. 두개의 콘텐츠 버튼(Two Contents Button) #1

XAML 뽀개기


위와 같이 2개의 Content가 사용되는 버튼 컨트롤은 실제 프로젝트에서 흔히 사용됩니다. 기본으로 제공되는 버튼 컨트롤은 Content 속성이 하나 밖에 제공되지 않지만 Object 타입이기 때문에 아래와 같은 방법으로 흔히 표현할 수 있습니다.


1
2
3
4
5
6
7
8
<Button>
    <Button.Content>
        <StackPanel Margin="5">
            <TextBlock Text="Menu01" FontWeight="Bold"/>
            <TextBlock Text="Lorem Ipsum is simply" TextWrapping="Wrap"/>
        </StackPanel>
    </Button.Content>
</Button>
cs


1
2
3
4
5
6
<Button>
    <StackPanel Margin="5">
        <TextBlock Text="Menu01" FontWeight="Bold"/>
        <TextBlock Text="Lorem Ipsum is simply" TextWrapping="Wrap"/>
    </StackPanel>
</Button>
cs


가장 간단한 방법은 위와 같지 않을까 생각됩니다. 하지만 버튼 컨트롤 자체의 Style과 Template에 영향을 받을 수 없는 한계가 있습니다. 물론 TextBlock 자체에 Style를 입힐 수는 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<Button Content="Menu01">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    SnapsToDevicePixels="True">
                <ContentPresenter x:Name="contentPresenter" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" 
                    ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                    Focusable="False" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Margin="{TemplateBinding Padding}" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>
cs


기본으로 제공되는 버튼의 템플릿은 위와 같습니다. 약간 복잡해 보입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Button Content="Menu02" Grid.Column="1">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}">
                <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="5">
                    <ContentPresenter Content="{TemplateBinding Content}"/>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>
cs


이번 포스트 주제에만 집중할 수 있도록 예제 코드를 간략히 수정했습니다. 2개의 콘텐츠를 세로로 정렬하기 위해 StackPanel로 ContentPresenter를 감싸주었습니다.


Content="{TemplateBinding Content}" 코드도 생략할 수있습니다. ContentPresenter의 Content는 암시적으로 바인딩되기 때문에 가능합니다. 이 예제에서는 일부러 생락하지 않습니다. ContentTemplate과 ContentPresenter는 다른 포스트에서 다룰 예정입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Button Content="Menu02" Tag="Lorem Ipsum is simply" Grid.Column="1">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}">
                <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="5">
                    <ContentPresenter Content="{TemplateBinding Content}"/>
                    <TextBlock Text="{TemplateBinding Tag}" TextWrapping="Wrap"/>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>
cs


위 코드는 FrameworkElement를 상속 받은 모든 컨트롤들이 공통적으로 가지고 있는 Tag 속성을 이용하는 예제 코드입니다. 두번째 Content를 추가하기 위해 ContentPresenter를 하나 더 추가해도 되지만 TextWrapping 속성을 이용해 줄내림 효과를 바로 얻기 위해 TextBlock 컨트롤을 추가했습니다. 그런 후 Tag 속성과 TextBlock 컨트롤의 Text 속성을 TemplateBinding 문법을 이용해 결합했습니다.



이런 간단한 방법으로도 2개의 컨텐츠를 표현할 수 있습니다. 하지만 Tag 속성은 의미적(Semantic)으로 적합하지 않고 일부 개발하는 과정에서 다른 용도로 사용될 수 있는 가능성이 있으므로 이렇게 사용하는 것은 프로토타입니나 샘플 코드에서나 적합할 것입니다.


샘플 코드 : https://github.com/CharlesKwon/XamlSimplified


관련 목차


015. 두개의 컨텐츠 버튼(Two contents button) #1

016. 두개의 컨텐츠 버튼(Two contents button) #2

017. 두개의 컨텐츠 버튼(Two contents button) #3

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

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

017. 두개의 콘텐츠 버튼(Two Contents Button) #3  (0) 2018.02.05
016. 두개의 콘텐츠 버튼(Two Contents Button) #2  (0) 2018.02.02
015. 두개의 콘텐츠 버튼(Two Contents Button) #1  (0) 2018.01.31
014. 결합 속성(Attached property)  (0) 2018.01.28
013. 속성 상속(Resolved Dynamically)  (0) 2018.01.24
012. 컨버터(Value Converter)  (0) 2018.01.22
, , , , , ,
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

비밀글