Chap2. WPF 기초3 Style

Chap3. Style

 이 번 장에서는 Style의 사용용법과 관련 속성들에 대해서 알아 보자.

페이지에 동일한 특성(Background, Foreground, VerticalAlignment 등) 버튼들이 많이 있

다고 생각 해보자. 각각 Property를 적용 해야 할까? Style은 이러한 공통적은 요소들을 정

의 해서 여러 엘리먼트에 공유해 사용 할 수 있다. 이는 MicroSoft 워드의 스타일 시트나 

HTML의 CSS와 목적과 기능이 동일 하다

[ Chap3. 그림 1]

               

[ Chap3. 그림2 ]

  

   Style은 System.Windows 에 정의 되어 있으며, System.Windows의 상위 클래스는

 Object 이다. Style에서 가장 중요한 프로퍼티는 Setters인데, SetterBase 객체의 컬렉션인

  SetterBaseCollection 타입의 프로퍼티이며, SetterBase는 Setter와 EventSetter가 상속

받는 추상 클래스이다. 이 객체를 setter라고 하는데 이 객체가 프로퍼티나 이벤트 핸들러를

 설정하기 때문이다.

Setter는 Style의 컨텐츠 프로퍼티이기 때문에 Setter와 EventSetter 엘리먼트는 Style 엘리

먼트의 자식이다. Style 정의의 내부에는 일반적으로 Setter객체가 EventSetter 객체보다 더 많이 쓰인다. 

이 Setter는 기본적으로 특정 프로퍼티와 값을 연결시며, Property와 Value라

는 2개의 중요한 퍼로퍼티가 있다.

1.     Xaml

[ Chap3 그림3]

1)      주요 속성

①     ‘<Window.Resources> </ Window.Resources>, <Grid.Resource></Grid.Resource>

-      해당 구역 내의 Resource 절 정의 Setter가 사용 되는 구역을 표기 한다.

②     <Style x:Key="btnDefault" TargetType="{x:Type Button}"> ‘’

-      x: Key  적용 되어 질 Element의 키워드로 사용된다.   

-      TargetType : 해당 엘리먼트(컨트롤) 명.

③     <Setter Property = "Background" Value="White"/>

-      Property : "Background“ : Target의 설정 할 Property명.

-      Value : "White" : Target의 설정 할 Property의 값.

④     <StackPanel Grid.Column="0" Style="{DynamicResource RedStyle}" >

-      Style : 설정 된 스타일을 해당 엘리먼트에 적용 한다.

-      DynamicResource : <확인 후 작성>

   

 Style을 설정 할 때, Key값(x:Key)에 대한 설정이 없으면 TargetType에 설정 된 Style이 적용 되지 않은 모든

 엘리먼트에 대한 값이 모두 적용 된다.

2)    적용 방식

[ Chap3 그림4 ]

[ Chap3 그림5 ]

 위 그림4는 그림5의 Xaml의 일부 이다. 해당 그림에서 하고 싶은 말은바로 동일 Key가 

Window, 그 하위 Panel Control에도 같은 값이 존재 할 때, ‘어떤 내용이 적용 되느냐’이다.

답은 Button이 속해 있는 구역이 가장 가까운 Style이 적용 된 것을 확인 할 수 있다. 다시 

말해 다른 닷넷 문법 처럼 부모와 자식에 동일한 값이 존재 할 때, 자식값을 가져오는 원리

랑 같다.

[ Chap3 그림6 ]

   만약 Application 기준에서 Style를 만들고 싶다면 어떻게 하면 될까? 그림6에서 보이는

 것 처럼 ‘Appication.xaml’에 Resource 절에 Style을 적용 하면 된다. 마찬가지로 

Application 에 적용 되어 있고, 그 하위 영역인 window 영역에 같은 명칭의 Key가 존재 한

다면 window에 존재하는 Style이 적용 된다. 다시 정리 하자면 Style의 적용 순서를 보면 우

선 엘리먼트 의 소속에서 가장 가까운 내용의 Style이 적용 되게 된다고 이해 하면 되겠다.

3)    Blend

이 번 장에서는 Blend 툴을 사용하여 Style을 구성 하는 방법을 알아 볼까 한다.

[ Chap3 그림7 ]

 Blend를 사용해서 그림7 처럼 만들어 보자. Page위에 Grid가 올려져 있고, 0번 Column,

StackPanel을 올려 놓고 그 위에 Button 5개를 정렬 했다.

[ Chap3 그림8]

①     그림8 화면처럼 상위 Menu에서 object, Edit style(스타일 편집), Empty 순으로 클릭하여 ‘Style Resource’ 창을 연다.

ü  복사본 선택시….

 Chap3 그림9]

②     사용 할 Key명과 정의 영역을 설정 한다.

 

[ Chap3 그림10 ]

③     그림 10에서 와 같이 우측 상단 메뉴 리소스탭에서 만들어 진 Style를 찾아 그림

 버튼 을 클릭 한다.

   

④     속성 탭에서 Style을 편집한다.

[ Chap3 그림11 ]

⑤     좌측 하단 매뉴에서 버튼을 클릭하면 화면에서 적용된 Style을 확인 할 수 있다.

[ Chap3 그림12 ]

⑥     우측 하단 메뉴 Style 창에서 Style을 적용 할 수 있다.