WPF_Style(최주원).pptx
WPF_Style.zip
WPF 스타일은 근본적으로 element에 적용되는 property의 집합입니다.
XAML에서 동일한 property를 가진 element를 여러 개 생성할 때 스타일을 사용합니다.
왼쪽 아래 그림과 같이 버튼들에 같은 스타일로 property를 설정하면 버튼 하나하나 설정할 필요 없이
한번에 모두 적용 할 수 있습니다.
WPF 스타일 속성으로는 정의를 따라가보면 아래 사진과 같이 6가지 속성이 나옵니다.
BasedOn은 기존 스타일을 바탕으로 새로운 스타일을 만들 수 있게 해주고
IsSealed는 스타일이 읽기전용이고 변경될 수 없는지 여부를 나타내는 값을 가져옵니다.
Resources는 다수의 element와 control 사이에서 스타일이 공유되도록 기본적으로 사용하며 스타일 범위 내에서 사용할 수 있는 리소스의 컬렉션을 가져오거나 설정합니다.
Setters에서는 Setter 객체의 컬렉션을 가져와 속성 값을 정의합니다.
TargetType 은 스타일이 적용될 대상을 설정하고
Triggers 객체의 컬렉션을 가져와 설정하고 스타일 내에 다양한 이벤트 조건을 정의 가능합니다.
여기서 가장 중요한 속성은 Setters라는 속성입니다.
Setters는 Property나 EventHandler를 설정하는데
Setter의 구성속성인 Property와 Value 두 속성 중 하나를 설정하지 않거나 두 속성을 모두 설정하지 않으면 예외가 됩니다.
또한 Setter 컬렉션에 Property 속성 값이 같은 setter가 둘 이상이 있으면 마지막에 선언된 setter를 사용합니다
<실습>
TextBlock을 하나 만들어볼께요 속성값을 직접 명시하여 Background, Foreground 색상과 HorizontalAlignment 값을 지정합니다.
이번에는 TextBlock의 서브 요소를 이용하여 하나 더 만들어볼께요 TextBlock의 Style. Style의 Setter 속성값으로 위와 같이도 사용가능합니다.
XAML코드의 빨간색으로 블럭한 부분을 주석처리해주시고 비하인드코드로 작성해보겠습니다. 이에 앞서 비하인드코드에서 해당 TextBlock의 이름을 알아야하기 때문에 xaml코드의 TextBlock의 x:Name = textblock1 로 선언합니다.
비하인드코드로 돌아와 1개의 Style과 Style에 들어갈 3개의 Setter 속성값을 생성해주시고 지정한 속성의 Setter를 Style에 등록시켜줍니다. 다음 해당 TextBlock의 스타일을 변경시켜주면 됩니다.
본격적으로 Style을 생성해볼께요. WPF에서는 응용프로그램의 Style을 지정할수 있게하기위해서는 Resources를 먼저 선언해주어야 합니다. 첫번째 Style의 key값은 MyStyle1로 정하고 Setter값으로는 위와 같이 설정할게요.
두번째 Style은 MyStyle2를 key값으로 하고 조금전에 만든 MyStyle1을 기반으로 하여 Setter값으로 Foreground만 Cyan으로 지정하겠습니다. BasedOn속성을 이용하여 Background과 HorizontalAlignment 값은 MyStyle1의 값을 가져오고 Foreground만 변경하였습니다.
두개의 TextBlock을 생성하여 확인해보겠습니다.
다음은 Button을 Click 하였을때 TextBlock의 Style을 변경시켜보겠습니다. TextBlock을 하나 생성해주시고 이벤트처리는 비하인드코드에서 하기때문에 x:Name값을 지정해줍니다.
Button 을 생성할 떄 Click속성을 입력하시면 [새 이벤트 처리기 생성] 이란 툴팁이 나올 것입니다. 바로 엔터쳐주시면 아래와 같이 비하인드코드에 이벤트처리기 함수가 생성됩니다.
버튼 클릭시 아까 Name값으로 지정한 SetText의 스타일이 null일 시 Style을 MyStyle2로 변경하고 아닐 시에는 다시 null값으로 변경하겠습니다. 여기서 생성한 Style은 Resource Dictionary에 저장되기에 Resources["keyName"] 으로 Style을 참조하여 줍니다.
변경 버튼을 클릭시 Style이 변경되는 것을 보실수 있습니다.
마지막으로 Style의 속성인 Trigger를 사용해보겠습니다. Style을 새로 하나 생성해주시고 TargetType을 Button으로 설정하면 Button에 대한 Style을 지정해주겠다는 속성입니다. 기본 속성값으로 Background의 색상을 지정해주시고 Triggers의 Trigger 속성값으로 "IsMouseOver" 마우스를 올려두었을때 값으로 "true" 라면 Setter 의 Background를 색상을 변경해보겠습니다.
마우스를 버튼에 올려두면 위와 같이 색상이 변경됩니다.