Part7. Using Control Templates to Customize a Control's Look and Feel

ü  Understand ControlTemplate

1.     템플릿을 활용하면 컨트롤의 전체 모양을 바꿀 수 있을 뿐만 아니라, 컨트롤의 컨텐트 영역만도 바꿀 수 있으며, 컨트롤이 가지고 있는 애니메이션 역시도 바꿀 수 있습니다

2.     대부분의 컨트롤들은 컨트롤 클래스를 상속하고 있는데, 템플릿은 이 컨트롤 클래스의 Template 속성을 사용하게 됩니다. 리소스 형태 또는 컨트롤에 속성 엘리먼트로 Template 속성 값을 설정하게 됩니다.

3.     템플릿 속성 지정 방법

-       컨트롤 속성 엘리먼트로 지정하는 방법

Code

<Grid x:Name="LayoutRoot" Background="White">     <Button x:Name="Button1" Width="100" Height="50" Content="버튼1" >         <Button.Template>             <ControlTemplate>                 <Grid>                     <!-- 중략 -->                 </Grid>             </ControlTemplate>         </Button.Template>     </Button> </Grid>

ð  가장 쉽고 명백하지만, 다른 컨트롤과 공유되지 않기 때문에 매우 제한된 경우에 주로 사용합니다.

-       컨트롤 템플릿 리소스로 값 설정하는 방법

Code

<Grid x:Name="LayoutRoot" Background="White">     <Grid.Resources>         <ControlTemplate x:Key="buttonTemplate">             <Grid>                 <!-- 중략 -->             </Grid>         </ControlTemplate>     </Grid.Resources>     <Button x:Name="Button1" Width="100" Height="50" Content="버튼1" Template="{StaticResource buttonTemplate}" ></Button> </Grid>

ð  템플릿을 리소스에서 정의하며, x:Key 속성을 설정하여 각 컨트롤들이 바인딩을 통해 값을 설정하게 됩니다.

-       스타일 리소스로 값 설정하는 방법(스타일의 Setter를 통해 템플릿 속성값을 변경)

Code

<Grid x:Name="LayoutRoot" Background="White">     <Grid.Resources>         <Style x:Key="buttonStyle" TargetType="Button">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="Button">                         <Grid>                             <!-- 중략 -->                         </Grid>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>     </Grid.Resources>     <Button x:Name="Button1" Width="100" Height="50" Content="버튼1" Style="{StaticResource buttonStyle}" ></Button> </Grid>

ð  가장 많이 쓰이는 방식으로, Setter를 통해 설정된 속성값에 템플릿을 정의하는데 바인딩 표현식을 사용할 수 있어, 유연하게 활용할 수 있습니다.

 

ü  Sample Code

1.     버튼 컨트롤 모양 바꾸기

-       템플릿에 그라디언트가 적용된 타원 버튼을 만들어보겠습니다.

Code

<UserControl x:Class="DemoSample4.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <Grid x:Name="LayoutRoot" Background="White">         <Grid.Resources>             <Style x:Key="buttonStyle" TargetType="Button">                 <Setter Property="Template">                     <Setter.Value>                         <ControlTemplate>                             <Grid>                                 <Ellipse>                                     <Ellipse.Fill>                                         <LinearGradientBrush EndPoint="0.5, 1" StartPoint="0.5, 0">                                             <GradientStop Color="#FF000000" Offset="1" />                                             <GradientStop Color="#FFFFFFFF" Offset="0" />                                         </LinearGradientBrush>                                     </Ellipse.Fill>                                 </Ellipse>                             </Grid>                         </ControlTemplate>                     </Setter.Value>                 </Setter>             </Style>         </Grid.Resources>                 <Button Width="100" Height="50" Content="버튼1" Style="{StaticResource buttonStyle}"></Button>     </Grid> </UserControl>

Result

Description

ð  버튼 컨트롤 모양을 바꾸는데는 성공하였지만, “버튼1”이라는 컨트롤의 텍스트 즉, 컨텐트 내용이 표시되지 않았습니다.

-       ContentPresenter을 통한 컨트롤의 컨텐트 영역을 표시합니다.

Code

<!-- 생략 --> <Grid.Resources>     <Style x:Key="buttonStyle" TargetType="Button">         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate>                     <Grid>                         <Ellipse>                             <Ellipse.Fill>                                 <LinearGradientBrush EndPoint="0.5, 1" StartPoint="0.5, 0">                                     <GradientStop Color="#FF000000" Offset="1" />                                     <GradientStop Color="#FFFFFFFF" Offset="0" />                                 </LinearGradientBrush>                             </Ellipse.Fill>                         </Ellipse>                         <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>                     </Grid>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style> </Grid.Resources> <!-- 생략 -->

Result

Description

ð  ContentPresenter의 컨텐트 속성을 이 템플릿이 설정된 컨트롤의 컨텐트 속성과 바인딩을 통해서 동일한 값을 설정할 수 있도록 선언하고 있습니다. (TemplateBinding 사용)