[WPF] 스타일(Style)에 대해 더 살펴보기

반복되는 스타일에 대해서 매번 코드를 넣는 것은 비효율적이다.

따라서 이것을 어떻게 처리하는지에 대해 살펴보자

 

2020/10/03 - [개발] - [WPF] 다양한 템플릿 유형에 대해 살펴보자

[WPF] 다양한 템플릿 유형에 대해 살펴보자

기존 버튼에 스타일을 변경했던 코드를 활용한다.

앞에서 언급했듯이 이 방법뿐 아니라 다양하게 응용할 수 있다.

 

    <Window.Resources>
        <Style x:Key="redRoundButtonStyle"
               TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="100"
                                     Height="100">
                                <Ellipse.Fill>
                                    <SolidColorBrush Color="Red"></SolidColorBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource redRoundButtonStyle}"
                Content="버튼스타일"></Button>
    </Grid>

 

이렇게 처리하면 해당 윈도우에서 버튼을 사용하는 곳에서 Style="{StaticResource redRoundButtonStyle}"을 넣어주면 된다. 그런데 매번 이렇게 넣지 않고, 이 프로그램 전체 윈도우에서 이 스타일을 사용하고 싶을 때는 어떻게 해야 할까.

답은 바로~~~오~~

 

 

 

 

App.xaml을 사용한다. 아래와 같이 생겼다. <Application.Resources> ?? 어디선가 많이 본 형태다.

바로 저기에 스타일을 넣는 것이다.

 

<Application x:Class="WPFStyleSample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPFStyleSample"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         //여기라구
    </Application.Resources>
</Application>

 

버튼은 그대로 mainwindows.xaml에 두고, 스타일만 옮겨와서 코드를 넣어보자

 

    <Application.Resources>
        <Style x:Key="redRoundButtonStyle"
               TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="100"
                                     Height="100">
                                <Ellipse.Fill>
                                    <SolidColorBrush Color="Red"></SolidColorBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

크~으. 실행해도 똑같이 나옴

 

 

자. 이번에는 그럼 나는 그냥 button Style="어쩌고 저쩌고" 쓰는 것도 귀찮아.

어차피 버튼은 다 똑! 모양으로 할 거야~ 라면,

App.xaml에 선언한 Button 스타일의 x:Key="redRoundButtonStyle" 이것만 쏘옥 아래처럼 빼고 (한입에...)

 

 

 

 

 

    <Application.Resources>
        <Style TargetType="Button"> //x:key 어디가찌!
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="100"
                                     Height="100">
                                <Ellipse.Fill>
                                    <SolidColorBrush Color="Red"></SolidColorBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

 

하... 이번엔 게 먹고 싶다. 대용으로 집에 있는 맛살로 대체한다.

김대용아 우리 다음 모임은 게 먹으러 간다.

 

 

 

 

MainWindows.xaml에 있는 Button에서도 단순히 아래처럼만 하면. 

 

    <Grid>
        <Button Content="버튼스타일"></Button>
    </Grid>

 

 

 

이제 모든 버튼은 빨간 동그라미 버튼으로 바뀐다.

그렇다면, 여기서 궁금하지? 그럼 일부 몇 개는 다른 형태로 보이고 싶은데 어떻게 해야 하나?

그건. 별들에게 물어봐~ (아재요~~)

 

 

 

 

이건 생각해볼 기회를 주겠어!

 

자, 좀 더 잘하고 싶다? 그렇다면

컨트롤이 버튼만 있는 건 아니니 컨트롤의 스타일을 저런 식으로 App.xaml에 추가하면 지저분해질 거다

 

아래처럼 Themes 폴더를 프로젝트에 추가하고, 컨트롤 별로 스타일 파일을 만든다.

 

 

 

 

각 파일은 어떻게 생겼냐면,

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:FMIMS.Themes">
    <Style x:Key="LinkButton" TargetType="Button">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Foreground" Value="{StaticResource LinkButtonForeground}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <TextBlock><ContentPresenter/></TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Foreground" Value="{StaticResource LinkButtonForegroundHighlighted}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

중요한 포인트는 <ResourceDictionary>로 묶어있다는 것

 

이 파일을 만들 때는 Visual Studio에서 설루션 탐색기-> 프로젝트-> 오른쪽 클릭 -> 추가 -> 새 항목 -> 리소스 사전으로 만들면 된다.

 

 

여기서 끝이 아니고 이 <ResourceDictionary>를 App.xaml의 리소스에 Merge를 해줘야 한다.

 

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/ButtonStyles.xaml"/>
                <ResourceDictionary Source="Themes/TabControlStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

 

이런 식으로 쭈~욱 추가할 수 있다.

지금은 새벽 1시를 달리고 있어 치즈 듬뿍 피자 먹고 싶다 얘기는 하지 않겠다.

끝~