[c# wpf] Control Template 란? / 사용방법 (with Style)

 

 

이 글을 읽기 전 선수 지식 포스팅

• [c# wpf] Style 태그 사용 방법
• [c# wpf] Style 상속 방법(with BasedOn)
• [c# wpf] StaticResource란? (DynamicResource 비교)

 

 

왼쪽 그림은 우리가 아는 기본적인 버튼에 빨간 배경색을 칠한 형태입니다. 

 

 

그런데 우리가 여기서 하고 싶은 것은 <Ellipse> 태그를 이용해 타원형 형태로 버튼을 바꿔주는 것입니다.

 

이때 사용하는 것이 바로 ControlTemplate 입니다.

 

1. Control Template 사용 방법

1) Button.Template로 감싸기

 

 

Button 의 모양을 수정 해줄 것임으로 <Button.Template> 형태의 태그를 먼저 넣어줍니다.

 

2) <ControlTemplate> 태그 감싸기

다음으로 <ControlTemplate> 태그를 넣어 줍니다.

 

 

이 안에 우리가 원하는 형태의 도형을 넣어주게 될텐데요.

앞서 말씀드린대로 타원형을 넣고 싶기 때문에 Ellipse 태그를 넣어줍니다.

 

 

지금 까지 적은 코드를 이용해 출력을 해보겠습니다.

Output:

 

 

그런데 기존 버튼의 컬러인 Red는 사라져버렸네요. 뿐만 아니라 Content의 적혀있던 글자도 없어졌습니다.

 

이게 바로 Control Template의 기본 개념으로

기존에 있던 default template를 덮어쓰게 됩니다.

 

지금부터는 사라져버린 Content의 내용을 다시 보이게 하고 싶습니다.

 

이때 사용하는 것이 <ContentPresenter>입니다.

태그 이름에서도 느낄 수 있듯이 Content를 Present 해주는 기능을 하는 친구인데요.

 

3) <ContentTemplate> 사용

 

 

먼저 <ControlTemplate>를 <ContorlTemplate> 안에 넣어줍니다.

그런데 <Ellipse> 와 <ContentPresenter> 두개 태그가 나란히 오니 에러가 납니다.

 

해당 부분을 <Grid>로 감싸서 에러를 해결해줍니다.

 

 

그리고 다시 실행해보겠습니다.

Output:

 

 

하지만 여전히 글자가 나오지 않습니다. 

 

왜냐하면 ControlTemplate는 아직 어느 곳의 Content를 가져올지 모르기 때문입니다.

 

아래와같이 TargetType 의 value로 Button을 넣어줌으로써  ControlTemplate는 Button 태그의 Content를 바라보게 됩니다.

 

 

Output:

 

 

Content 내용이 잘 출력되는 것을 볼 수 있습니다.

하지만 추가적으로 정렬을 할필요가 있는데요.

 

 

이때 주의 할점은 <ContentPresenter>에 해당 값이 출력되는 것임으로, <ContentPresenter> 에서 정렬 속성을 지정해야 합니다. 

 

Output:

 

 

ControlTemplate는 Style과도 자주 사용되는데요.

(Style 사용법에 대해서 모르시는 분은 해당 포스팅을 읽고 와주시기 바랍니다.

 

2. ControlTemplate 사용(with Style)

1) <Window.Resources> 태그를 구성 후 Style의 Target을 Button으로 지정합니다.

 

2) <Setter> Property의 Value로 Template를 적어줍니다.

 

 

일반적인 방법으로 아래와 같이 Value를 넣는 방법은 많이 익숙하실텐데요.

 

 

우리 코드에서는 Value로 들어갈 값이 태그들이기 때문에 아래와 같은 방식으로 Value를 정의 해줍니다.

 

 

3) <Setter.Value>에 ControlTemplate 태그 값 넣기

기존에 작성했던 <ControlTemplate> 복사해서 <Setter.Value>안에 넣어줍니다.

 

 

그리고 Button 태그 안에 <ControlTemplate>을 넣기 위해 사용했던 <ButtonTemplate>를 지워주면

 

 

아래와 같이 정상적으로 출력이 됩니다.

Output:

 

 

4) Style 태그에서 x:Key 이용하기

TargetType="Button"이라고만 적어도 문제가 없지만, 만약 Button이 많아질 경우 하나하나를 커스터마이징 하고 싶다면 x:Key를 사용해야 합니다.

 

저는 x:Key명으로 "btn1"이라고 지정을 해보았구요.

 

 

<Style> 태그와 <Button>태그를 연결하기 위해,

 Style={StaticResource btn1}를 Button 태그의 속성으로 넣어주었습니다.

 

 

Output:

 

 

정상적으로 출력되는 걸 알 수있습니다.

(해당 부분이 이해가 안되시는 분은 앞에 적어 놓은 선수지식 포스팅을 읽고 오시기 바랍니다.)

 

 

+ 보너스

추가적으로 Style 태그없이 .Resources 안에 다이렉트로 <ControlTemplate>가 들어가는 경우도 있습니다.

 

 

이럴때는 아래와 같은 방식으로 연결을 시키니 참고 바랍니다.