[CS][WPF] 기본으로 적용된 템플릿 재활용하기

네모난 버튼이 있을 때 이를 동그란 버튼으로 만들려고 한다.

Border를 감싸서 기존 Background를 삭제하는 방법도 있지만

 

또 다른 방법으로 

기본 버튼 컨트롤에 적용된 템플릿을 복사 후 템플릿을 다시 재정의하여 처리하는 방법이 있다.

요소에 기본적으로 적용된 템플릿 말고도 직접 xaml에 정의한 템플릿도 빠르게 복사 후 재정의하여 사용할 수 있다.

 

재정의는 기본 요소 및 컨트롤의 디자인적 측면의 모습이나, 정의된 템플릿을 변경하지 않고 필요한 부분만 수정할 수 있는 장점이 있다.

단점이라면 xaml코드가 많아지는 거라고 생각한다.

 

설명보단 그림과 함께 직접 해보는 것이 빠르니 행동으로 옮기자.

 

 

 

다음과 같은 프로그램이 있다.

프로그램 Page 영역에 아주 커다란 네모난 버튼이 있다.

이 버튼 모습에서 Border 부분만 Radius 값을 주고 싶다. (동그란 버튼으로 만들고 싶다는 의미)

 

XAML디자이너에서 Button 요소(템플릿 복사할 대상)에 마우스 우클릭 -> 템플릿 편집 -> 복사본 편집을 누른다.

 

ControlTemplate 이름을 정하고 확인을 누른다.

 

<Window.Resource> 영역에 다음과 같은 코드가 자동으로 추가되었다.

<ControlTemplate x:Key="ButtonBaseControlTemplate1" TargetType="{x:Type ButtonBase}">
	<Border x:Name="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}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
	</Border>
	<ControlTemplate.Triggers>
		<Trigger Property="Button.IsDefaulted" Value="True">
			<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
		</Trigger>
		<Trigger Property="IsMouseOver" Value="True">
			<Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
			<Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
		</Trigger>
		<Trigger Property="IsPressed" Value="True">
			<Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
			<Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
		</Trigger>
		<Trigger Property="ToggleButton.IsChecked" Value="True">
			<Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
			<Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
		</Trigger>
		<Trigger Property="IsEnabled" Value="False">
			<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
			<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
			<Setter Property="Foreground" Value="#FF838383"/>
		</Trigger>
	</ControlTemplate.Triggers>
</ControlTemplate>

 

자동으로 추가된 Border 태그에 CornerRadius 속성을 추가한다.

<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"
					CornerRadius="20"
					>

 

 

기존 버튼의 코드도 Template 속성이 자동으로 추가되었다.

<!-- 템플릿 복사 전 -->
<Button Content="Hello" />

<!-- 템플릿 복사 후 -->
<Button Content="Hello" Template="{DynamicResource ButtonBaseControlTemplate1}"/>

 

결과: