WPF 리소스 값 동적으로 변경하기: Change resource in the runtime

머리말

  WPF 프레임워크에서 프로그램을 개발하다 보면 사용자의 입력을 받아서 간단한 디자인 기능을 제공하는 경우가 발생한다. 다양한 방법으로 사용자 입력 값을 받아서 디자인을 변경할 수 있겠지만, 그중 프로그램의 테마를 미리 설계해 놓은 상태에서 동적으로 테마를 변경하는 방법은 본인이 선호하는 방법이 아니다. 사용자의 입력 값을 충실하게 반영하기 어렵기 때문에 자유도가 떨어진다. 본 포스팅에서는 WPF 프레임워크에서 사용자의 입력 값으로 디자인을 동적으로 변경하는 방법에 대해서 소개한다.

사용자 입력 값으로 리소스 속성을 동적으로 변경

  WPF는 디자인 영역과 기능 영역을 비교적 명확하게 구분할 수 있다. 그렇기 때문에 디자인을 위한 Resource를 별도로 정의한 뒤, 프로그램에 사용될 각 컴포넌트에 참조시킬 수 있다. 아래의 소스는 Resource를 정의해서 TreeView 컴포넌트를 디자인한 XAML 코드이다.

<Window x:Class="Wookoa.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:Wookoa"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Color x:Key="TreeViewBackgroundColor">Blue</Color>

        <Style x:Key="{x:Type TreeView}" TargetType="TreeView">
            <Setter Property="Width" Value="200" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeView">
                        <Border>
                            <Border.Background>
                                <SolidColorBrush Color="{DynamicResource TreeViewBackgroundColor}"/>
                            </Border.Background>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TreeView x:Name="TreeView_Wookoa"></TreeView>
    </Grid>
</Window>

  위의 코드를 간략히 설명하면, Resource는 색상 값을 정의한 영역과 TreeView 디자인을 정의한 영역으로 구성된다. 색상 값을 정의한 영역은 Color 속성으로 색상 값을 정의했고, TreeView 디자인을 정의한 영역은 Style 속성으로 디자인을 정의했다. TreeView 디자인 영역에서는 색상 값을 정의한 Color Key(TreeViewBackgroundColor)를 참조하고 있으며, TreeView 디자인 영역에서 정의된 디자인은 TreeView 컴포넌트가 랜더링 될 때 기본 값으로 사용된다.

  당연히 위 코드를 그대로 실행하면 파란색 배경의 TreeView 화면이 출력된다. 본 포스팅의 목적은 code behind 영역에서 사용자의 입력 값을 받아 TreeView 배경 색상을 변경하는 것이다. code behind 영역에서 Resource 영역에 접근이 가능해야 프로그램 사용자가 직접 디자인을 변경할 수 있기 때문이다. 본 포스팅에서는 code behind 언어를 C#을 사용했다.

  code behind 영역에서 이미 정의된 Resource 영역을 접근하고, 속성 값을 변경하는 방법은 아래의 코드와 같다. 아래의 코드를 추가한 뒤 프로그램을 실행하면 TreeView 배경색은 검은색으로 변경되어 프로그램이 실행된다. 코드를 조금 수정하면 사용자가 원하는 색상 값을 입력받아 동적으로 프로그램의 디자인을 변경할 수 있다.

using System.Windows;

namespace Wookoa
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 리소스사전(ResourceDictionary) 객체에 현재 프로그램의 리소스를 적재
            ResourceDictionary resources = this.Resources;

            // 현재 프로그램의 리소스 중에서 TreeViewBackgroundColor 리소스를 검색 후 색상 값을 재정의
            resources["TreeViewBackgroundColor"] = System.Windows.Media.Colors.Black;
        }
    }
}

꼬리말

  WPF 환경에서 조금이라도 익숙하다면 코드만 보고도 충분히 이해가 가능할 만큼 간단하다. 물론 Resource 정의를 사용하지 않고 동적으로 디자인을 변경할 수 있지만, 프로그램이 복잡해질수록 Resource 정의를 피하기는 쉽지 않다. 자신의 프로그램이 어느 정도 복잡성을 가진다면 Resource 정의를 통해 디자인하는 습관을 기르는 것이 좋을 것 같다. WPF 프레임워크에서 사용자의 입력을 받아 동적으로 디자인을 변경하는 방법에 대해 소개한 본 포스팅은 이로써 마무리를 짓도록 한다.