[c# wpf] StaticResource란? (DynamicResource 비교)

wpf 공부를 하면서  아래와 같은 StaticResource 라고 적힌것을 보신적이 있으실텐데요.

 

 

이 친구의 정체가 무엇인지 알아보도록 하겠습니다. 

 

1. StaticResource 란?

1) background color 변경(기본)

 

 

 

위와 같은 버튼이 있습니다. 

우리는 이 버튼의 컬러를 Red로 바꾸고 싶은데요.

 

어떻게 할까요?

 

 

Background 속성에 Red컬러를 넣어주면됩니다.

 

우리가 아는 아주 기본적인 방법인데요. 이외에도 다른 방법이 있다는걸 아시나요?

 

 

2) background color 변경(with StaticResource)

(1) 먼저 기존에 작성했던 Background 컬러 부분을 지워줍니다.

 

 

(2) <Window.Resources> 태그를 만듭니다.

그리고 그 안에 SolidColorBrush 엘리먼트와 속성인 Color를 넣어줍니다.

 

 

(3) 이제 <Window.Resources>에서 정의한 컬러와 Button을 연결 시켜줘야 하는데요.

이때 사용하는것이 x:Key값입니다.

 

기존에 태그와 코드비하인드단(c# 코드)을 연결할때 x:Name을 사용했던것과 다른점이 주목할만한 점입니다.

 

x:Key 이름을 아래와 같이 SolidColorBrush 태그 안에 정의 해줍니다. 

 

 

버튼에는 해당 x:Key를 참조하는 방법으로 StaticResource 를 이용합니다. 

이번 포스팅에 주제이기도한 StaticResource 키워드가 드디어 등장했네요.

 

 

기본적인 형태는 {} 중괄호 형태를 기본으로 StaticResource를 적어주고 우리가 지정한 x:Key명인 RedColor를 적어주면 색 적용이 됩니다. 

 

여기까지 읽으신분은 그냥 기본 형태를 쓰면 될텐데 굳이 StaticResource 방법을 쓸 필요가 있나라는 생각이 드실겁니다. 

 

하지만 .Resources안에 해당 값을 키값으로 정의해두면, 마치 변수처럼 사용이 가능합니다.

즉 코드가 많아질때 그 빛을 발하게 되겠죠?

 

 

3) 꼭 Window.Resources형태로 적어야 하나?

 

 

해당부분에 Window라고 적힌것은 .Resources에서 정의한 키값이 Window태그 안에서만 동작한다는 말입니다. 

 

 

달리말하면 해당 윈도우파일을 넘어갈 경우에 해당 정의가 적용이 안된다는 말이죠.

그럼 더 나아가 전체 프로젝트 파일에 global하게 적용하려면 어떻게 할까요?

 

가장 큰 범위인 //App.xaml에 있는 Resources안에 정의 해주면 됩니다. 

 

뿐만 아니라 범위를 좁혀  특정 태그안에서만 동작하도록 할 수도 있습니다.

아래예시에는 Grid 태그 안에서만 작동하도록 적어보았습니다.

 

 

 

2. DynamicResource 란?

지금까지는 StaticResource에 대한 것이었다면 지금부터는 DynamicResource에 대해 알아보겠습니다.

 

이름에서도 느낄 수 있듯 StaticResource는 컴파일 전 미리 다 세팅을 해놓고 고정 출력을 한다면 Dynamicresource는 앱을 실행 후에 다이나믹하게 변경이 가능하다 정도의 느낌을 가지시면 충분합니다!

 

1) 사용방법

//MainWindow.xaml

(1) 기존에 작성한 Background를 지웁니다.

 

 

(2) 버튼 클릭 이벤트를 만들어줍니다.

 

 

//MainWindow.xaml.cs

 

 

여기서 this는 Window를 의미합니다. 

 

즉, 앞서 배운 StaticResources 관점으로 보자면 <Window.Resources> 태그가 this.Resources로 해석할 수 있습니다.

그리고 this.Resources["컬러바꾸기"] 에서 "컬러바꾸기"는 StaticResources 관점으로 보자면 x:Key값을 의미합니다.

 

xaml에서 컬러를 정의했던부분은 c#코드에서 new SolidColorBrush(Colors.Red) 형태로 적습니다.

그리고 그 값을  this.Resources["컬러바꾸기"]에 할당합니다.

 

다시 //MainWindow.xaml로 돌아와서 Background 속성부분에 앞서 정의했던 key값을 참조하는 형태로 코드를 적어줍니다.

 

이제 완성된 코드를 한번 실행볼까요?

 

 

처음에는 컬러가 변경되지 않지만 마우스 클릭을 하면  컬러가 바뀌는 Dynamic한 ui가 완성된걸 확인할 수 있습니다.