안녕하세요..^^ 이렇게 연휴가 또 훌~쩍 지나가버리네요..
연휴에는 기필코 공부를 열심히 하겠노라고..다짐을 해놓고서는..
한동안 집에 못갈것 같아서..가정의 달을 맞아 집에 다녀 오느라..한게 없네요..ㅠㅠ
하핫.. 잡담은 그만하고 강좌 시작하도록 하겠습니다. 지난번에 버튼 애니메이션까지 진행했는데요.
오늘은 그 애니메이션을 버튼의 스타일로 적용하도록 해볼께요.
자, 위와 같이 블렌드에서 스토리보드를 생성하여 애니메이션까지 적용해보았습니다.
제가 전에 툴박스 설명을 했을때 보셨겠지만 블렌드에서는 다양한 컨트롤을 제공합니다.
예전에는 지원되는 컨트롤이 많지 않았기 때문에 버튼과 같은 컨트롤도 사용자컨트롤로 만들어주어야 하는
불편함이 있었지만 이제는 미리 만들어져 있는 컨트롤에 스타일을 입히기만 하면 됩니다. ^^
버튼 컨트롤에는 기본적으로 Normal State(평소 상태), MouseOver State(올려진 상태),
Pressed State(눌려진 상태), Disabled State(활성화 상태) 이렇게 4개의 이벤트를 가지고 있습니다.
그중에 마우스가 오버되었을 경우를 예로 들어 만들어보도록 하겠습니다. 스타일은 리소스사전으로 따로
등록하여 적용하는 것이 좋지만, 리소스를 따로 생성하여 관리하는 부분은 차후에 진행하도록 하겠습니다.
오늘은 전역으로 리소스와 스타일을 정의하는 App.xaml 에 직접 적용하여 볼께요.
오른쪽에 보면 프로젝트 파일의 정보가 나타나있죠? 더블클릭합니다.
XAML 코드를 보면 다음과 같은데요. 이렇게 애플리케이션의 리소스를 써주는 곳에 버튼의 스타일을 정의할겁니다.
먼저 완성된 App.xaml의 소스 화면을 보면 다음과 같습니다.
처음부분은 버튼 컨트롤의 스타일을 정의하는데요. x:Key 이름을 Button_Style 이라고 지어줍니다. 여기서 x:Key 이름은 Page.xaml 파일에서 컨트롤에 리소스를 사용하여 스타일을 적용시킬 때 접근할 수 있는 이름입니다.
파란 네모영역 부분은 마우스 이벤트가 "MouseOver State"일 경우 보여질 스토리보드 부분이고,
빨간 네모영역 부분은 버튼 컨트롤의 디자인 부분입니다.
그럼 이제 애니메이션을 만들어 둔 bookmark.xaml의 XAML 소스에서 스토리보드와 디자인 소스를
가져온 후 위의 네모 영역에 맞추어 소스를 붙여 넣습니다.
제가 만든 bookmark.xaml의 소스는 다음과 같습니다. 아래 표시한 영역을 복사하여 넣는것이죠.
다 되셨나요? 그럼 이제 우리는 프로젝트가 실행되는 메인 페이지인 Page.xaml에 가서 버튼을 얹어 보도록
할께요. 프로젝트 파일 패널에 가서 Page.xaml 을 더블클릭합니다.
그러면 아래와 같은 아트보드 영역이 나타나는데요. 스티커 버튼의 반투명한 부분을 보기 위해서 검은 네모를
임시로 그려주도록 하겠습니다.
그 다음은 버튼 컨트롤을 하나 올려주고 이름은 MarkButton 이라고 지어줍니다.
그리고 XAML 뷰모드에서 다음과 같이 버튼 컨트롤의 스타일을 적용시켜줍니다.
다시 메인으로 돌아오면 버튼 컨트롤에 만들어둔 스타일이 적용되어 있는것을 확인할 수 있습니다.
(단, 처음 버튼 컨트롤을 생성한 크기와 적용시킨 스타일의 크기가 맞지 않을수 있으니 사이즈 조절을 해야합니다.)
여기까지가 디자이너분들이 할 수 있는 영역이라고 봅니다. 그런데 실행화면에서 확인을 하려면 어떻게
해야하느냐구요? 안타깝게도 확인을 하기 위해서는 CS 파일에서 페이지가 로드될 경우 이벤트 핸들러를
생성하여 실행시키게 하는 소스를 추가해 주어야 합니다. 비주얼 스튜디오를 깔으셨다면 이어서 ㄱㄱ싱 :)
Page.xaml.cs 파일에서 소스를 추가하기 위해 더블클릭하면 Visual Studio 로 이동하게 됩니다.
CS 파일을 보면 기본적인 코드는 생성 되어 있구요. 제가 빨간 네모 친 부분만 추가해서 넣어주면 됩니다.
자 이렇게 넣어주고.. 다시 블렌드로 가서 F5를 눌러주면 아래와 같이 실행됩니다.
이로써~ 버튼 컨트롤에 스타일을 적용하여 마우스 이벤트 주는법에 대해서 알아보았습니다.
좀 어려운가요? 하도 파일을 왔다리 갔다리 하다보니 좀 헷갈릴것 같기도 하네요 ^^;;
이와 같이 다른 디자인을 적용할 수도 있고, 마우스 이벤트 상태에 따른 스토리보드를 각각 추가하여
좀더 효과적인 버튼을 만들 수 있습니다. ^^ 내일은 비가 온다고 하니 우산 꼭 챙기세요~*
