[WPF] Style

WPF 스타일 및 템플릿은 개발자와 디자이너가 멋진 시각 효과를 만들고 제품의 모양을 만드는 데
사용할 수 있는 기능 집합(스타일, 템플릿, 트리거 및 스토리보드)을 가리킵니다.

Style은 시각적 속성 설정을 재사용 가능한 리소스로 추출합니다.
암시적 또는 명시적 스타일 적용이 가능하며,
파생스타일을 사용할 수도 있습니다.


두 개의 TextBlock의 공통속성들을 Style로 간편하게 적용해보겠습니다.

공통속성들을 Style로 만든 모습.

    <Window.Resources>
        <Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </Window.Resources>


    <Grid>
        <TextBlock Text="WPF" Style="{DynamicResource TextBlockStyle1}" />
        <TextBlock  Text="Style, CotrolTemplate" Margin="0,26,0,0" Style="{DynamicResource TextBlockStyle1}" FontSize="14"  />
    </Grid>

암시적 또는 명시적 Style 적용
Style을 Resource로 정의할 경우 다음 두 가지 방법으로 스타일을 컨트롤에 적용할 수 있습니다.
-암시적 적용 - Style에 대하여 TargetType만 지정합니다. 이 경우, 명시하지 않은 같은 TargetType 모두에게 적용됩니다.
​-명시적 적용 - Style에 대해 TargetType 및 x:Key 특성을 지정한 다음 명시적 키를 사용하는 StaticResource 참조로 대상 컨트롤의 Style 속성을 설정합니다.

Style에 TargetType만 지정하여 모든 TextBlock에 암시적 스타일을 적용 한 모습.

Style="{x:Null}" 을 사용하여, 암시적 스타일을 거부하는 모습

파생스타일은 스타일 재사용을 최적화하기 위해 BasedOn 속성을 사용하여, 

다른 스타일에서 상속받는 스타일을 만들 수 있습니다.
- 공통적인 건 상속받고, 다른 부분만 설정하여 최적화합니다.

    <Window.Resources>
        <Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>

        <Style x:Key="TextBlockStyle2" BasedOn="{StaticResource TextBlockStyle1}" TargetType="{x:Type TextBlock}">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Margin" Value="0,26,0,0"/>
        </Style>
    </Window.Resources>

    <Grid>
        <TextBlock Text="WPF" Style="{DynamicResource TextBlockStyle1}" />
        <TextBlock  Text="Style, CotrolTemplate" Style="{DynamicResource TextBlockStyle2}"  />
    </Grid>

스타일 편집하는 방법은
뷰화면에서 편집할 컨트롤 우클릭으로 하는 방법
레이어에서 편집할 컨트롤 우클릭으로 하는 방법(왼쪽)
상단개체 메뉴를 이용하는 방법(오른쪽) 세가지가 있습니다.

현재 항목 편집은 스타일이 적용된 상태에서만 활성화되며​,
​복사본 편집은 Blend에서 기본 적용돼 있는 스타일을 복사편집하는 것이구요,
빈 항목 만들기는 새로이 만들겠다는 뜻입니다.

Style.zip