[C#] WPF : 리소스 사전

안녕하세요!

이번 글에서는 WPF 프로젝트 내에 리소스 사전을 추가하여 버튼 스타일을 정의하고 MainWindow에서 사용하는 방법을 알아보도록 하겠습니다.

동일한 스타일의 컨트롤이 여러 개 필요할 때는 리소스 사전에 스타일을 정의하여 간단하게 같은 스타일의 컨트롤을 반복적으로 찍어낼 수 있습니다.

 

---

 

프로젝트 생성

WPF 프로젝트를 생성해 줍니다.

프로젝트 이름은 ResourceDictionary로 생성하였습니다.

 

프로젝트 생성

 

---

 

리소스 사전 추가

생성된 프로젝트에서 [솔루션탐색기] → [프로젝트 우클릭] → [추가] → [새항목] → [리소스 사전]을 통하여 "CustomButton.xaml"리소스 사전을 생성해 줍니다.

 

리소스 사전 생성

 

---

 

CustomButton.xaml 수정

생성된 리소스 사전을 다음과 같이 수정해 줍니다.

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--동그라미버튼-->
    <ControlTemplate x:Key="BlueRoundButton" TargetType="Button">
        <Grid>
            <Ellipse Width="100" Height="100">
                <Ellipse.Fill>
                    <SolidColorBrush Color="Blue">
                        
                    </SolidColorBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>
    </ControlTemplate>
    
</ResourceDictionary>

• 파란색 원 모양을 가진 간단한 버튼 스타일을 정의하였습니다.

 

---

 

리소스사전 정의

리소스 사전을 App 내에서 사용하기 위해 App.xaml에 리소스사전을 정의해 줍니다.

 

<Application x:Class="ResourceDictionary.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ResourceDictionary"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CustomButton.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

---

 

MainWindow디자인 수정

MainWindow.xaml에서 리소스 사전에 정의한 스타일을 사용하기 위해 버튼 추가해 줍니다.

 

<Window x:Class="ResourceDictionary.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:ResourceDictionary"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Template="{StaticResource BlueRoundButton}"
                Click="OnClickedBlueRoundButton">            
        </Button>
    </Grid>
</Window>

• Template="{StaticResource BlueRoundButton}"을 통해 리소스 사전에 정의한 BlueRoundButton을 사용합니다.
• 버튼의 기본기능을 확인하기 위해 클릭 이벤트를 추가해 주었습니다.

 

MainWindow 디자인

 

---

 

MainWindow비하인드코드 수정

MainWindow.xaml.cs 비하인드 코드에 버튼 클릭 이벤트 함수를 추가해 줍니다.

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ResourceDictionary
{
	/// <summary>
	/// Interaction logic for MainWindow.xaml
	/// </summary>
	public partial class MainWindow : Window
	{
		public MainWindow()
		{
			InitializeComponent();
		}

		private void OnClickedBlueRoundButton(object sender, RoutedEventArgs e)
		{
			MessageBox.Show("Custom Button!");
		}
	}
}

• 버튼 클릭 시 "Custom Button!"이라는 메시지박스를 출력합니다.

 

---

 

빌드

빌드 후 결과를 확인합니다.

파란색 원 클릭 시 "Custom Button!"메시지가 출력되는 것을 알 수 있습니다.

 

빌드 후 모습

 

---

 

이번 포스팅에서는 리소스 사전을 추가하여 컨트롤 스타일을 정의 후 사용하는 방법에 대해 알아보았습니다.

 

감사합니다!