빠른 시작: 컨트롤 템플릿(XAML)

Applies to Windows and Windows Phone

XAML 프레임워크에서 컨트롤의 시각적 구조와 동작을 사용자 지정하려면 컨트롤 템플릿을 만듭니다. 컨트롤에는 Background, ForegroundFontFamily 등 다양한 속성이 있으며, 이러한 속성을 설정하여 컨트롤 모양의 다양한 측면을 지정할 수 있습니다. 하지만 이러한 속성을 설정하여 수행할 수 있는 변경은 제한되어 있습니다. ControlTemplate 클래스를 사용하여 추가 사용자 지정을 제공하는 템플릿을 만들 수 있습니다. 여기서는 CheckBox 컨트롤의 모양을 사용자 지정하기 위해 ControlTemplate을 만드는 방법을 보여 줍니다.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

컨트롤 템플릿 사용자 지정 예

기본적으로 CheckBox 컨트롤은 콘텐츠(문자열 또는 CheckBox 옆의 개체)를 선택 상자의 오른쪽에 놓습니다. 이는 CheckBox의 시각적 구조입니다. 기본적으로 확인 표시는 사용자가 CheckBox를 선택했음을 나타냅니다. 이 동작은 CheckBox의 시각적 동작입니다. CheckBoxControlTemplate을 만들어 이러한 특성을 변경할 수 있습니다. 예를 들어 확인란의 콘텐츠를 선택 상자 아래에 놓고 X를 사용하여 사용자가 확인란을 선택했음을 표시하려 한다고 가정해 봅시다. CheckBoxControlTemplate에서 이러한 특성을 지정할 수 있습니다.

다음은 Unchecked, CheckedIndeterminate 상태로 표시된 기본 ControlTemplate을 사용한 CheckBox입니다.

기본 CheckBox 템플릿

컨트롤이 있는 템플릿을 사용자 지정하려면 ControlTemplate을 컨트롤의 Template 속성으로 지정합니다. 다음은 CheckBoxTemplate1이라는 ControlTemplate을 사용한 CheckBox입니다. 다음 섹션에서는 ControlTemplate용 XAML(Extensible Application Markup Language)을 보여 줍니다.


<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

다음은 템플릿을 적용한 후 이 CheckBoxUnchecked, CheckedIndeterminate 상태로 나타나는 모양입니다.

CheckBox 템플릿 사용자 지정

컨트롤의 시각적 구조 지정

ControlTemplate을 만들 때 FrameworkElement 개체를 조합하여 단일 컨트롤을 구축합니다. ControlTemplate은 루트 요소로 오직 하나의 FrameworkElement만 사용해야 합니다. 루트 요소는 일반적으로 다른 FrameworkElement 개체를 포함합니다. 개체의 조합은 컨트롤의 시각적 구조를 구성합니다.

다음 XAML은 컨트롤의 콘텐츠가 선택 상자 아래에 있도록 지정하는 CheckBoxControlTemplate을 만듭니다. 루트 요소는 Border입니다. 이 예에서는 Path를 지정하여 사용자가 CheckBox를 선택했음을 나타내는 X를 만들고 확정되지 않은 상태를 나타내는 Ellipse를 만듭니다. OpacityPathEllipse 양쪽 모두에서 0으로 설정되어 있으므로 기본적으로 어느 쪽에도 나타나지 않습니다.


<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" 
                       Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"  
                       Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
                       UseLayoutRounding="False" Height="21" Width="21"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph" 
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z" 
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" 
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
             <Rectangle x:Name="IndeterminateGlyph" 
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
                     Height="9" Width="9" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="1" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>


컨트롤의 시각적 동작 지정

시각적 동작은 특정 상태의 컨트롤 모양을 지정합니다. CheckBox 컨트롤에는 Checked, Unchecked, Indeterminate의 3가지 표시 상태가 있습니다. IsChecked 속성의 값은 CheckBox의 상태를 결정하고 그 상태는 확인란 상자에 나타나는 모양을 결정합니다.

아래 표에 IsChecked의 가능한 값, CheckBox의 해당 상태 및 CheckBox의 모양이 나와 있습니다.

IsCheckedCheckBox 상태CheckBox 모양
trueChecked"X" 포함
falseUnchecked비어 있음
nullIndeterminate직사각형 포함

 

VisualState 개체를 사용하여 특정 상태일 때 나타나는 컨트롤의 모양을 지정합니다. VisualState에는 ControlTemplate에 있는 요소의 모양을 변경하는 Storyboard가 있습니다. 컨트롤이 VisualState.Name 속성이 지정한 상태가 되면 Storyboard가 시작됩니다. 컨트롤이 상태에서 나가면 Storyboard가 중단됩니다. VisualState 개체를 VisualStateGroup 개체에 추가합니다. VisualStateGroup 개체를 ControlTemplate의 루트 FrameworkElement에 설정한 VisualStateManager.VisualStateGroups 연결된 속성에 추가합니다.

이 XAML은 Checked, UncheckedIndeterminate 상태의 VisualState 개체를 보여줍니다. 이 예제에서는 BorderControlTemplate의 루트 요소인 VisualStateManager.VisualStateGroups 연결 속성을 설정합니다. Checked VisualStateCheckGlyph라는 PathOpacity를 1로 지정합니다(이전 예제에 나와 있음). Indeterminate VisualStateIndeterminateGlyph라는 EllipseOpacity를 1로 지정합니다. Unchecked VisualState에는 Storyboard가 없으므로 CheckBox가 기본 모양으로 돌아갑니다.


<ControlTemplate TargetType="CheckBox" x:Key="CheckBoxTemplate1">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="CheckGlyph"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="IndeterminateGlyph"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" 
                       Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"  
                       Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"  
                       UseLayoutRounding="False" Height="21" Width="21"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph" 
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z" 
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" 
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Rectangle x:Name="IndeterminateGlyph" 
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
                     Height="9" Width="9" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="1" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

VisualState 개체가 작동하는 방식을 더 잘 이해하려면, CheckBoxUnchecked 상태에서 Checked 상태로 변할 때, Indeterminate 상태로 변한 후 Unchecked 상태로 다시 돌아올 때 어떤 현상이 일어나는지 살펴보세요. 다음은 전환에 대한 내용입니다.

상태 전환발생하는 동작전환이 완료된 후 CheckBox 모양
Unchecked에서 CheckedCheckedVisualStateStoryboard가 시작되므로 CheckGlyphOpacity는 1입니다. X가 표시됩니다.
Checked에서 IndeterminateIndeterminateVisualStateStoryboard가 시작되므로 IndeterminateGlyphOpacity는 1입니다. CheckedVisualStateStoryboard가 종료되므로 CheckGlyphOpacity는 0입니다. 원이 표시됩니다.
Indeterminate에서 UncheckedIndeterminateVisualStateStoryboard가 종료되므로 IndeterminateGlyphOpacity는 0입니다. 아무것도 표시되지 않습니다.

 

컨트롤의 시각적 상태를 만드는 방법 및 특히 Storyboard 클래스 및 애니메이션 형식을 사용하는 방법에 대한 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.

테마 작업을 쉽게 할 수 있는 도구 사용

테마를 컨트롤에 적용하는 가장 빠른 방법은 Microsoft Visual Studio XAML 또는 디자인 화면에서 컨트롤을 마우스 오른쪽 단추로 클릭하고 테마 편집 또는 스타일 편집을 선택하는 것입니다(마우스 오른쪽 단추로 클릭하는 컨트롤에 따라 다름). 그런 다음 리소스 적용을 선택하여 기존 테마를 적용하거나 빈 테마 만들기를 선택하여 새로운 테마를 정의할 수 있습니다.

컨트롤 및 접근성

컨트롤에 대한 새 템플릿을 만들 때 컨트롤의 동작 및 시각적 모양을 변경하는 것 외에 컨트롤이 접근성 프레임워크에 표시되는 방법도 변경할 수 있습니다. Windows 런타임은 접근성을 위한 Microsoft UI 자동화 프레임워크를 지원합니다. 모든 기본 컨트롤과 해당 템플릿은 컨트롤의 용도 및 기능에 적합한 일반 UI 자동화 컨트롤 유형 및 패턴을 지원합니다. 이러한 컨트롤 유형 및 패턴은 보조 기술 등의 UI 자동화 클라이언트에 의해 해석되며 이를 통해 액세스 가능한 더 큰 앱 UI의 일부로 컨트롤에 액세스할 수 있습니다.

기본 컨트롤 논리를 구분하고 또한 UI 자동화의 일부 아키텍처 요구 사항을 충족시키기 위해 컨트롤 클래스에는 별도의 클래스인 자동화 피어에 대한 접근성 지원이 포함되어 있습니다. 보조 기술이 단추의 작업을 호출하도록 하는 등의 기능이 가능하도록 자동화 피어는 일부 명명된 부분이 템플릿에 있을 것으로 기대하므로 때때로 컨트롤 템플릿과 상호 작용합니다.

완전히 새로운 사용자 지정 컨트롤을 만들 때 경우에 따라 이 컨트롤과 함께 새 자동화 피어를 만들 수도 있습니다. 자세한 내용은 사용자 지정 자동화 피어를 참조하세요.

컨트롤의 기본 템플릿에 대한 자세한 정보

컨트롤 및 콘텐츠 추가의 다양한 항목을 살펴보면 기존 Windows 런타임 컨트롤의 기본 컨트롤 템플릿을 문서화하는 항목이 있습니다. 예를 들어 앱 바 추가 아래의 하위 항목으로 AppBar 스타일 및 템플릿이라는 항목이 있습니다.

Windows 런타임 컨트롤의 스타일과 템플릿을 문서화하는 항목은 앞에서 설명한 테마 편집 또는 스타일 편집 기술을 사용한 경우 표시되는 것과 동일한 시작 XAML의 일부를 보여 줍니다. 각 항목은 시각적 상태의 이름, 사용된 테마 리소스 및 템플릿이 포함된 스타일의 전체 XAML을 나열합니다. 템플릿 수정을 이미 시작했으며 원본 템플릿의 모양을 확인하거나 새 템플릿에 명명된 필수 시각적 상태가 모두 있는지 확인하려는 경우 이러한 항목은 유용한 지침이 될 수 있습니다.

컨트롤 템플릿의 테마 리소스

XAML 예제의 일부 속성에서 ThemeResource 태그 확장을 사용하는 리소스 참조를 확인했을 수 있습니다. 이 기술은 단일 컨트롤 템플릿이 현재 활성화된 테마에 따라 값이 달라질 수 있는 리소스를 사용할 수 있도록 합니다. 테마의 주요 목적은 사용자가 시스템 전체에 어둡거나 밝거나 고대비 테마를 적용할 것인지 선택할 수 있게 하는 것이므로 이 기술은 특히 브러시와 색에 중요합니다. XAML 리소스 시스템을 사용하는 앱은 앱 UI의 테마 선택 항목이 사용자 시스템의 테마 선택을 반영하도록 해당 테마에 적합한 리소스 집합을 사용할 수 있습니다.

컨트롤 및 콘텐츠 추가의 다른 항목은 기존 Windows 런타임 컨트롤의 기본 컨트롤 템플릿을 문서화하기 위한 것입니다. 따라서 항목에는 기본 템플릿에 사용되는 테마 리소스(주로 브러시)가 나열되고 각 테마 아래에 해당 값이 표시됩니다. XAML 테마 리소스 참조에도 테마 리소스의 전체 집합이 문서화되어 있습니다.

관련 항목

C#, C++ 또는 VB를 사용하여 앱을 만들기 위한 로드맵
빠른 시작: 컨트롤 스타일 지정
컨트롤 및 콘텐츠 추가
ResourceDictionary 및 XAML 리소스 참조
Control.Template

 

 

표시:
© 2015 Microsoft