컨트롤 템플릿(Control Template)

컨트롤 템플릿

WPF에서 컨트롤 템플릿(Control Template)이란

기존의 Button 의 스타일을 override 하는 것입니다.

WPF에서 제공하는 Button 은 기본 템플릿을

바꾸고 싶을 때 혹은 바꿀 필요가 있을 때 적용합니다.

HTML에 비유하면 XAML이 HTML,

컨트롤 템플릿이 CSS인 관계와 비슷합니다.

이런 건 백날 말보다는 실습이 더 빠르니까

바로 예제를 보겠습니다.

버튼을 하나 만들어 보겠습니다.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Button Content="This is a button" Height="50" Width="100" Grid.Row="0">
        </Button>
        
    </Grid>

Grid 레이아웃(패널)에 평범한 버튼입니다.

이것은 WPF가 기본으로 제공하는 버튼인데

이 모양이 마음에 안들 수가 있습니다.

Web에서 CSS 파일을 이용해서 다양한 디자인의

버튼을 만드는 것 처럼 WPF에서도 만들 수 있습니다.

그 기능이 Control Template 입니다.

위에서 이야기한 것 처럼 HTML에 CSS와

비슷한 개념입니다. HTML을 모르면 어쩔 수 없는데

그래도 XAML보다 HTML이 대중적이니까요.

포스팅 시리즈에서 여러번 말하지만

XAML은 XML 형식으로 HTML보다

더 빡빡합니다. 글자 하나 소문자 대문자

하나 틀리면 바로 컴파일 오류가 나니

조금 더 주의하도록 합니다.

다음 코드는 버튼 1개에 대해서

커스텀 템플릿을 적용하는데 약간 복잡합니다.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Button Content="This is a button" Height="70" Width="150" Grid.Row="0">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Fill="GreenYellow"/>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontSize="15"></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

    </Grid>

먼저 Button.Template 에서 WPF에게

이 버튼은 템플릿을 사용한다고 알립니다.

그 다음 ControlTemplate을 적용하는데요.

Target Type이 Button 객체임을 알립니다.

ControlTemplate은 Button, Label, List 등

컨트롤의 종류에 따라 차이가 있으니까

지금 Control을 적용하려는 Target이 무엇인가?

알려줘야 하는 부분이고요.

Button 내부에 Grid 패널을 넣습니다.

Grid 패널로 버튼의 스타일을 정의합니다.

StackPanel 등 다른 패널도 넣을 수 있는데

Grid 패널이 Ellipse(타원) 등 shape를

사용하니까 아무래도 괜찮습니다.

마지막으로 ContentPresenter 는 Button의

Content 즉 텍스트를 나타내는 태그입니다.

여기에 Content의 배치 속성을 넣습니다.

여기까지가 버튼 1개에 적용한 컨트롤 템플릿입니다.

버튼을 두개 만들면 아래처럼 됩니다.

두번째 버튼은 원래 WPF의 기본인

템플릿으로 돌아옵니다.

그렇다면 버튼 전체에 적용하고 싶을 때는?

<Window.Resources> 태그를 사용합니다.

이것을 정교하게 적용하는 테크닉을 담으려면

이 포스팅 하나에 담기는 너무 많은 내용이구요.

여러번 실습해보며 규칙을 찾는게 좋습니다.

뭐랄까 XAML도 HTML/CSS처럼 실전의 영역(?)

디자인 논리가 많이 좌우하는 것 같고요.

프로그래밍의 알고리즘을 추구하는 프로그래머라면

흥미가 떨어질 수도 있습니다.

프론트엔트 분야가 괜히 나온 것은 아닐 겁니다.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="360" Width="540">

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Fill="SkyBlue"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontFamily="Cambria" TextElement.FontSize="15"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Content="This is a button" Height="50" Width="150" Grid.Row="0">
        </Button>
        <Button Content="Second Button" Height="50" Width="150" Grid.Row="1">
        </Button>
    </Grid>
</Window>