언어: HTML | XAML

빠른 시작: 컨트롤 스타일 지정(XAML)

Applies to Windows and Windows Phone

XAML 프레임워크는 앱의 모양을 사용자 지정하는 여러 가지 방법을 제공합니다. 스타일을 사용하면 컨트롤 속성을 설정하고 이 설정을 재사용하여 여러 컨트롤에서 일관된 모양을 얻을 수 있습니다.

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

이 항목의 내용은 다음과 같습니다.

사전 요구 사항

컨트롤을 UI에 추가하고 속성을 설정하고 이벤트 처리기를 연결할 수 있다고 가정합니다. 컨트롤을 앱에 추가하는 방법에 대해서는 빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.

스타일 기본

스타일을 사용하여 시각적 속성 설정을 재사용 가능한 리소스로 추출합니다. 다음은 BorderBrush, BorderThicknessForeground 속성을 설정하는 스타일을 사용한 3개의 단추를 보여줍니다. 스타일을 적용하면 컨트롤마다 따로 이러한 속성을 설정할 필요가 없고, 컨트롤의 모양이 모두 동일해집니다.

스타일이 적용된 단추

컨트롤에 XAML(Extensible Application Markup Language)로 스타일을 인라인으로 정의하거나 재사용 가능한 리소스로 정의할 수 있습니다. 개별 페이지의 XAML 파일인 App.xaml 파일 또는 별도의 리소스 사전 XAML 파일에서 리소스를 정의합니다. 앱 간에 리소스 사전 XAML 파일을 공유할 수 있으며, 여러 리소스 사전을 하나의 앱으로 병합할 수 있습니다. 리소스가 정의되는 위치에 따라 리소스를 사용할 수 있는 범위가 결정됩니다. 페이지 수준별 리소스는 해당 리소스가 정의된 페이지에서만 사용할 수 있습니다. App.xaml과 페이지에 모두 동일한 키를 사용하여 리소스가 정의되어 있는 경우 페이지의 리소스는 App.xaml의 리소스보다 우선합니다. 리소스가 별도 리소스 사전 파일에서 정의된 경우 리소스 사전이 참조된 위치에 따라 범위가 결정됩니다.

Style 정의에서는 TargetType 특성과 하나 이상의 Setter 요소 컬렉션이 필요합니다. TargetType 특성은 스타일을 적용하는 FrameworkElement 형식을 지정하는 문자열입니다. TargetType 값은 참조되는 어셈블리에서 사용할 수 있는 사용자 지정 형식 또는 Windows 런타임에서 정의되는 FrameworkElement 파생 형식을 지정해야 합니다. 컨트롤에 스타일을 적용하려고 하는데 컨트롤의 형식이 적용하려는 스타일의 TargetType 특성과 일치하지 않으면 예외가 발생합니다.

Setter 요소에는 PropertyValue가 필요합니다. 이러한 속성 설정은 설정이 적용되는 컨트롤 속성과 해당 속성에 설정할 값을 지정합니다. 특성 또는 속성 요소 구문으로 Setter.Value를 설정할 수 있습니다. 다음 XAML은 이전 예제에서 사용한 스타일을 보여줍니다. 이 XAML에서 처음 두 Setter 요소는 특성 구문을 사용하지만, 마지막 SetterBorderBrush 속성에 대해 속성 요소 구문을 사용합니다. 예제는 x:Key 특성을 사용하지 않으므로 스타일이 단추에 암시적으로 적용됩니다. 스타일의 암시적 또는 명시적 적용은 다음 섹션에서 설명합니다.


<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
</Page.Resources>


암시적 또는 명시적 스타일 적용

스타일을 리소스로 정의할 경우 다음 두 가지 방법으로 스타일을 컨트롤에 적용할 수 있습니다.

스타일에 x:Key 특성이 포함된 경우, 컨트롤의 Style 속성을 키 입력 스타일로 설정하여 이 특성을 컨트롤에만 적용할 수 있습니다. 이와 달리, x:Key 특성이 없는 스타일은 이 경우 외에는 명시적 스타일 설정이 없는 대상 유형의 모든 컨트롤에 자동으로 적용됩니다.

다음은 암시적 및 명시적 스타일을 보여주는 두 개의 단추입니다.

암시적 및 명시적 스타일의 단추

이 예제에서는 첫 번째 스타일에 x:Key 특성이 있고 대상 유형은 Button입니다. 첫 번째 단추의 Style 속성이 이 키로 설정되므로 이 스타일이 명시적으로 적용됩니다. 두번째 단추는 대상 유형이 Button이고 스타일에 x:Key 특성이 없으므로 두 번째 스타일이 암시적으로 적용됩니다.


<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Foreground" Value="MediumOrchid" />
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
</Page.Resources>
<Grid x:Name="LayoutRoot">
    <Button Content="Button" Height="23" Width="75" Style="{StaticResource PurpleStyle}" />
    <Button Content="Button" Height="23" Width="75" />
</Grid>


파생 스타일 사용

스타일을 더 쉽게 유지 관리하고 스타일 재사용을 최적화하기 위해 다른 스타일에서 상속받는 스타일을 만들 수 있습니다. BasedOn 속성을 사용하여 상속받은 스타일을 만들 수 있습니다. 다른 스타일에서 상속받은 스타일은 동일한 유형의 컨트롤 또는 기본 스타일이 대상으로 하는 유형에서 파생된 컨트롤을 대상으로 지정해야 합니다. 예를 들어, 기본 스타일이 ContentControl을 대상으로 지정할 경우 이 스타일에 기반하는 파생 스타일은 ContentControl, 또는 ButtonScrollViewer과 같은 ContentControl에서 파생된 유형을 대상으로 지정할 수 있습니다. 파생 스타일에 값이 설정되어 있지 않으면 기본 스타일에서 상속받습니다. 기본 스타일의 값을 변경하면 파생 스타일이 이 값보다 우선합니다. 다음 예는 동일한 기본 스타일에서 상속받은 스타일이 적용된 ButtonCheckBox를 보여줍니다.

파생 스타일을 사용한 스타일 적용 단추

기본 스타일이 ContentControl을 대상으로 지정하고 HeightWidth 속성을 설정합니다. 이 스타일에 기반하는 스타일은 ContentControl에서 파생되는 CheckBoxButton를 대상으로 지정합니다. 파생 스타일은 BorderBrushForeground 속성에 대해 서로 다른 색상을 설정합니다.


<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="30" />
    </Style>
    <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
    <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<Grid Background="White">
    <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}"/>
</Grid>

스타일 작업을 쉽게 할 수 있는 도구 사용

스타일을 컨트롤에 적용하는 가장 빠른 방법은 Microsoft Visual Studio XAML 또는 디자인 화면에서 컨트롤을 마우스 오른쪽 단추로 클릭하고 스타일 편집 또는 템플릿 편집을 선택하는 것입니다(마우스 오른쪽 단추로 클릭하는 컨트롤에 따라 다름). 그런 다음 리소스 적용을 선택하여 기존 스타일을 적용하거나 빈 스타일 만들기를 선택하여 새로운 스타일을 정의할 수 있습니다. 빈 스타일을 만드는 경우 페이지, App.xaml 파일, 또는 별도의 리소스 사전에서 스타일을 정의할 수 있는 옵션이 제공됩니다.

Windows 런타임 기본 스타일 수정

가능한 경우 Windows 런타임 기본 XAML 리소스에서 가져온 스타일을 사용해야 합니다. 고유한 스타일을 지정해야 할 경우 가능하면 기본 스타일을 기반으로 스타일을 지정합니다(이전에 설명한 대로 파생 스타일을 사용하거나 원래 기본 스타일의 복사본을 편집하여).

Template 속성

스타일 setter는 ControlTemplate 속성에 사용할 수 있으며 사실 대부분의 일반적인 XAML 스타일과 앱의 XAML 리소스를 구성합니다. 이 스타일 setter는 빠른 시작: 컨트롤 템플릿에서 더 자세히 알아봅니다.

관련 항목

C#, C++ 또는 VB를 사용하여 앱을 만들기 위한 로드맵
컨트롤 및 콘텐츠 추가
빠른 시작: 컨트롤 템플릿
ResourceDictionary 및 XAML 리소스 참조
Style
Setter
x:Key 특성

 

 

표시:
© 2014 Microsoft