16. 윈도우 계산기 - 리소스
01. 목표
01.1 윈도우 계산기와, 진행중인 예제의 디자인 비교
01.2 색상코드
@웹 확장 프로그램 ColorPick Eyedropper 사용하면 색상을 쉽게 확인할 수 있습니다.
배경색
#FFF6F3ED기호 버튼 색
#FFFAF9F7숫자 버튼 색
White
02. (공통) 버튼 색 변경 방법 확인
02.1 등호 기호 배경색 변경
❶ 윈도우 계산기의 등호 아이콘은 배경색이 푸른색이다.
❷ 버튼 속성의 Brush 탭에서, Backgroud 속성의 ❸ 다섯번째 탭을 선택하면, 기존에 세팅된 색이 보인다.
❹ MenuHighlightBrushKey 색을 고르고 저장하면, 자동으로 XAML에 반영된다.
02.2 등호 기호 글자색 변경
❶ 윈도우 계산기의 등호 아이콘은 글자색이 하얀색이다.
❷ 버튼 속성의 Brush 탭에서, Foregroud 속성의 ❸ 두섯번째 탭을 선택하면, 색을 고를 수 있다.
❹ 하얀색(#FFFFFFFF) 색상코드를 입력하고 저장하면, 자동으로 XAML에 반영된다.
#FFFFFFFF는 16진수 2개씩 4쌍을 의미한다.
03. (공통) 버튼 색 변경 수동 적용과 문제점 확인
03.1 목표 색상 확인
@웹 확장 프로그램 ColorPick Eyedropper 사용하면 색상을 쉽게 확인할 수 있다.
기호 입력 버튼의 색상 코드는 FAF9F7 이다.
03.2 목표 색상으로 변경
❶ %(퍼센트)버튼의 속성(Property)창에서 ❷ 버튼 속성의 Brush 탭에서, Backgroud 속성의
❸ 두섯번째 탭을 선택하면, 기존에 설정된 색이 보인다.
❹ 색상코드 FAF9F7 입력하면,
❺ 자동으로 XAML에 버튼 컨트롤의 Backgroud 속성에 반영된다.
02.3 다른 버튼에 XAML 속성을 추가
Background="#FFFAF9F7"
02.4 문제점 확인
문제는 이 방법이 그다지 효율적이지 않다는 점이다.
만약 버튼이 100개라면, 모두 동일한 방법을 수동으로 적용하고
변경 사항이 있다면, 100개 모두 수동으로 찾아서 하나하나 고쳐야한다.
그리고, 글자색 등의 다양한 디자인을 적용해야 할때도 마찬가지다.
다양한 컨트롤의 다양한 속성값을 수동으로 적용하는 것은 효과적일 수 없다.
03. (공통) 정적 리소스(Static Resource)를 사용
03.1
<SolidColorBrush x:Key="operationButtonColor" Color="#FFFAF9F7"/>
<SolidColorBrush x:Key="numberButtonColor" Color="White"/>
03.2
03.3
Background="{StaticResource operationButtonColor}"
03.4
03.5
03.6 "숫자 버튼"과 "기호 버튼"에 정적 리소스를 적용한다.
03.7 문제점
정적 리소스 선언의 문제는, 선언된 해당 Window의 컨트롤만 적용 가능하다는 점이다.
다른 Window를 만들면 해당 정적 리소스를 사용하지 못한다.
04. (공통) 어플리케이션 리소스(Application-Wide Resource)를 사용
04.1
04.2 정적 리소스에서 정의한 속성값을 옮겨온다.
<SolidColorBrush x:Key="operationButtonColor" Color="#FFFAF9F7"/>
<SolidColorBrush x:Key="numberButtonColor" Color="White"/>
04.3 배경색 변경에 적용해보기
<SolidColorBrush x:Key="backgroundColor" Color="#FFF6F3ED"/>
Background="{StaticResource backgroundColor}"
05. 실행 결과 확인
