[C#/WPF] Style 관리 (StaticResource)

이번에는 WPF Control을 사용할 때 Style을 적용하는 방법에 대하여 알아보도록 하겠습니다. Style 문법은 여러 가지 Control의 효과를 보여줄 수 있으며, 한 번 지정해 둔 Style을 입혀서 본인만의 Custom 컨트롤을 만들 수 있습니다. 이번에는 Label, TextBox, Button Control(컨트롤) Style을 적용하는 방법과 또한 이런 Resource들을 관리하는 방법에 대하여 알아보도록 하겠습니다.

---

C#/WPF Style 사용 및 Resource 관리

 

Style과 Resource

• Style이란 컨트롤의 속성값을 지정하여 자신만의 독특한 Custom 컨트롤을 사용할 수도 있습니다.
• Resource란 Style을 미리 정의해 두어, 같은 작업이 반복되는 Style에 적용하기 편하여, 재사용성이 좋으며 관리에 용이합니다.

 

1. Style 기본 문법

<Style TargetType="컨트롤" x:Key="사용할 키값">
	<Setter Property="속성" Value="값">
</Style>

 

Style의 기본 문법으로 컨트롤을 지정하고 실제로 사용할 Key값을 지정합니다. 이후 추가할 속성의 값을 정의하여 사용하는 것이 일반적입니다.

 

2. App.xaml의 Resource 작성 방법

프로젝트의 App.xaml에서 사용할 Style Resource를 작성하면, 해당 프로젝트의 어떤 영역에서도 정의된 Style을 적용하여 사용하실 수 있습니다.

1) Control  속성(Property)을 직접 지정하여 사용

기존 방식은 하나의 컨트롤에 속성값들을 지정하여 사용하는 방식이라 많은 컨트롤을 사용하게 되었을 경우 불편함을 느끼실 수 있습니다.

<!-- 컨트롤 속성값 직접 지정한 예제 -->
<Label Content="Test" Background="BlueViolet" Foreground="WhiteSmoke"
		FontSize="25" Width="230" Height="38"/>

 

위 예제에서 Label에 많은 속성들을 직접 지정한 경우입니다.

2) App.xaml 에서 Style을 Resource에 지정하여 사용

<Application x:Class="StyleResourceTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:StyleResourceTest"
             StartupUri="View/MainWindow.xaml">
	<!-- Style 정의 -->
	<Application.Resources>
    	<!-- Label -->
        <Style TargetType="Label" x:Key="LabelStyleDefault">
    		<Setter Property="Background" Value="BlueViolet"/>
    		<Setter Property="Foreground" Value="WhiteSmoke"/>
    		<Setter Property="FontSize" Value="25"/>
    		<Setter Property="Width" Value="230"/>
    		<Setter Property="Height" Value="38"/>
        </Style>
        
        <!-- TextBox -->
        <Style TargetType="TextBox" x:Key="TextBoxStyleDefault">
    		<Setter Property="FontSize" Value="18"/>
    		<Setter Property="FontWeight" Value="Bold"/>
    		<Setter Property="HorizontalAlignment" Value="Center"/>
    		<Setter Property="VerticalAlignment" Value="Center"/>
    		<Setter Property="HorizontalContentAlignment" Value="Center"/>
    		<Setter Property="VerticalContentAlignment" Value="Center"/>
		</Style>
        
        <!-- Button -->
        <Style TargetType="Button" x:Key="ButtonStyleDefault">
    		<Setter Property="FontSize" Value="25"/>
            <Setter Property="Visibility" Value="Visible"/>
		</Style>
    </Application.Resources>

 

App.xaml에서는 이번에 다뤄볼 Label, TextBox, Button Style을 미리 정의하였습니다. 이것으로 해당 프로젝트의 모든 곳에서 같은 컨트롤의 Style을 빠르고 간편하게 입힐 수 있습니다.

<!-- Resource를 사용한 예제 -->
<Label Content="Test" Style="{StaticResource LabelStyleDefault}"/>

 

위 예제는 리소스에서 정의된 Key값을 활용하여 Style을 바로 컨트롤에 입히는 방식입니다. 소스도 간결해지며, 같은 작업이 많이 들어가는 부분에서 사용하기 편리하다는 것을 한눈에 파악하실 수 있습니다.

 

App.xaml의 Resource에 정의된 Label Style이 적용된 예제

3. 개별 View단에서 Resource 작성 방법

App.xaml 이외에도 View에 따라 각가의 Resource를 정의할 수 있습니다. 이때, App.xaml보다 현재 View단의 Resource Key값이 있을 경우 View단의 Resource를 먼저 참조합니다.

 

1) 각 View단에서 Resource 정의하는 방법

<!-- App.xaml -->
<Application x:Class="StyleResourceTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:StyleResourceTest"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
    	... 이곳에 Style 정의
    </Application.Resources>

<!-- Window(창) -->
<Window x:Class="StyleResourceTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StyleResourceTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
    	... 이곳에 Style 정의
    </Window.Resources>

<!-- Page(페이지) -->
<Page x:Class="StyleResourceTest.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:StyleResourceTest"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Page1">
    <Page.Resources>
        ... 이곳에 Style 정의
    </Page.Resources>

<!-- UserControl(사용자 정의 컨트롤) -->
<UserControl x:Class="StyleResourceTest.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:StyleResourceTest"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
    	... 이곳에 Style 정의
    </UserControl.Resources>

 

2) UserControl(사용자 지정 컨트롤)에서 Button만 Resource를 개별로 정의한 예제

<UserControl.Resources>
    <!-- Button -->
    <Style TargetType="Button" x:Key="ButtonStyleDefault">
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Black"/>
    </Style>
</UserControl.Resources>

<StackPanel>
    <Label Content="Label 예제" Style="{StaticResource LabelStyleDefault}"/>
    <TextBox Text="Text 예제" Style="{StaticResource TextBoxStyleDefault}"/>
    <Button Content="Button 예제" Style="{StaticResource ButtonStyleDefault}"/>
</StackPanel>

 

위 코드는 Label과 TextBox는 App.xaml에 정의되어 있는 Resource를 참조하고, Button의 경우 UserControl에 개별로 지정해 놓은 Resource를 가져오는 예제를 보여주는 예제입니다.

App.xaml과 Key값이 같지만, 해당 View단의 Resource를 가져오는 것을 확인하실 수 있습니다.

 

UserControl에 정의된 Button Style Resource를 따로 참조하는 예제

 

또한, 기존 Resource가 정의되어 있더라도, 해당 컨트롤(Control)에서 속성값을 변경하거나 추가하게 되면 각 컨트롤에 정의된 속성이 우선적으로 적용됩니다.

<UserControl.Resources>
    <!-- Button -->
    <Style TargetType="Button" x:Key="ButtonStyleDefault">
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Black"/>
    </Style>
</UserControl.Resources>

<StackPanel>
    <Label Content="Label 예제" Style="{StaticResource LabelStyleDefault}"/>
    <TextBox Text="Text 예제" Style="{StaticResource TextBoxStyleDefault}"/>
    <Button Content="Button 예제" Margin="50" Background="Blue" Style="{StaticResource ButtonStyleDefault}"/>
</StackPanel>

 

Control 속성 우선 적용

 

이상으로 화면을 구성하는 Control의 Style을 적용하는 방법과 자주 사용되는 Style을 Resource로 정의하여 관리하는 방법에 대하여 알아보았습니다. 찾아주셔서 감사합니다.

---

도움 될만한 글

[C#/WPF] ComboBox(콤보박스) 생성 및 사용 방법

[WPF/C#] 그림자 효과 입체감 주기 - ShadowDepth, BlurRadius

[C#/WPF] XAML에서 특수 문자 사용하는 방법