TOC

This article is currently in the process of being translated into Korean (~97% done).

Styles:

Introduction to WPF styles

당신이 만약 web 환경에서 개발을 하다 왔다면 HTML and CSS을 사용하면서 당신은 XAML이 HTML과 매우 흡사하다고 느꼈을 것입니다. tags를 사용하고 당신은 당신의 application의 구조적인 layout을 정의합니다. 당신은 심지어 당신이 HTML tags의 style을 지역적으로 설정할 수 있는 것처럼 foreground, fontsize 등 같은 inline 속성들을 사용하여 요소가 특정 방식으로 보이게 만들 수 있습니다.

하지만 당신이 3개의 다른 TextBlock Control들에 같은 크기의 font 사이즈와 색깔을 적용하고 싶으면 어떻게 할까요? 당신은 원하는 속성들을 복사해 붙여넣을 수 있습니다. 하지만 3개의 control이 아닌 50개가 되고 여러 windows에서 필요로 하면 어떻게 될까요? 그리고 당신이 폰트 사이즈가 12가 아닌 14로 했어야 했다는 사실을 깨달으면요?

WPF는 HTML에 CSS가 있듯 styling을 도입했습니다. styles를 사용하여 당신은 속성들의 세트를 그룹화 할 수 있고 그것들을 특정 control들 혹은 특정 타입의 모든 컨트롤들에 적용할 수 있습니다. 그리고 CSS에서 처럼, style은 다른 style로부터 상속 받을 수 있습니다.

기본 style 예제

자세한 사항에 대해 더 자세히 말할 거지만 이번 소개 챕터에서는 당신에게 어떻게 styling을 사용하는지에 대해 매우 간단한 예제를 보여주고자 합니다.

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

StackPanel의 resources에 대해 Style을 정의합니다 . WPF에 TargetType 속성을 사용하여 범위(StackPanel) 내의 모든 TextBlock 컨트롤에 이 스타일이 적용되어야 한다고 알리고, 두 Setter 요소를 추가합니다. Setter 요소는 대상 컨트롤의 특정 속성(이 경우 ForegroundFontSize)을 설정하는 데 사용됩니다. Property는 WPF에 대상으로 지정하려는 속성을 알려주고 Value는 원하는 값을 정의합니다.

마지막 TextBlock이 회색이 아닌 파란색이란 걸 주목하세요. 저는 control이 지정된 style에서 style을 얻을 수 있다는 것을 보여주기 위해 그렇게 했습니다. 당신은 완전히 자유롭게 컨트롤을 지역적으로 override 할 수 있습니다. - control에 직접적으로 정의한 값들은 항상 style 값보다 우선 시 됩니다.

요약

WPF styles는 특정 외관을 매우 쉽게 만들 수 있게 해줍니다. 그리고 이걸 여러 control 등에 사용할 수 있습니다. 이번 첫 예제는 매우 지역적이었지만, 저는 다음 챕터에서 global한 style을 어떻게 만드는지 보여줄 것 입니다.


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!
Table of Contents