[Expression Blend] Introducing the xaml

 

이 분이 SketchFlow 강좌를 하신 분인데 오래전부터 Expression Blend에 대한 강의를 해오셨더군요. 사실 원래 있던 곳의 동영상 링크가 깨져있어서 이번 기회에 제 블로그에 다시 포스팅을 해보고자 합니다. 물론 이 동영상은 Expression Blend 2를 기반으로 되어 있지만 Expression Blend 4에서도 쓸 수 있을만한 자료라 여겨지네요.

 

사실 xaml은 Extensible Application Markup Language 의 약자로서 MS에서 만든 언어입니다. 실버라이트와 WPF에 대응해서 뭔가 시각적으로 표현하는데 있어서 도움을 주는 걸로 간단히 아실 수 있습니다. 제가 블로그에서 다루는 거의 모든 파트( 윈도우폰, 키넥트, 윈도우8, 블랜드..) 에서는 이 xaml이란 요소가 빠질 수 없는 겁니다. 이게 있어서 일단 아이콘의 배치라던가 시각적으로 표현이 가능하니까요.

 

 아무튼 동영상을 토대로 진행해보겠습니다. Expression Blend를 열고 New Project를 선택합니다. 그럼 Silverlight로 할건지 WPF로 할건지( 혹은 WP7 SDK를 까신 분이라면 Windows phone 분야도 있을겁니다.) 여기서 WPF를 선택하고 WPF Application으로 xamlTest라는 프로젝트를 생성합니다. 그러면 다음과 같이 창이 배치가 됩니다.

 

 

가운데 있는 하얀창이 바로 MainWindow 인데 간단하게 말하자면 우리가 코드로써 뭔가를 그릴 도화지입니다. Expression Blend는 Assets에 있는 아이템을 이 MainWindow에 삽입함으로써 자동으로 그 요소에 해당하는 xaml 코드를 작성해줍니다. 즉 디자인적 감각이 있는 사람이 굳이 코드를 다룰 줄 몰라도 이 개발툴은 그런 걸 코드로 바꿔준다는 것이지요. 그런데 너무 횡합니다. 뭔가 창의 배치를 다르게 하고자합니다. 무엇보다도 블랜드에서는 다뤄야 할 요소가 많기 때문에 적어도 해당 요소에 대한 속성을 다룰 무언가가 필요합니다. 그걸 제어할 수 있는 곳이 바로 상단 메뉴의 Window 란 항목입니다.

 

 

여기서는 현재 창에 무얼 배치할 건지를 결정할 수 있습니다. 그런데 사실은 해당 모니터에 맞게 배치가 된 템플릿이 있습니다. 바로 지금 마우스에서 가리키는 WorkSpace라는 거죠. 두가지 항목, Design과 Animation으로 나눠져있고, 현재 지금과 같은 창 배치는 바로 Protyping으로 되어 있습니다. 이걸 Design으로 맞추면 창배치가 다음과 같이 바뀝니다.

 

 

바로 이 폼이 디자인을 하기에 좋은 창배치입니다. 이전 화면과 비교했을때 달라진 것은 좌측 하단에 Object and Timeline이 생기고 우측에 Properties 항목이 생긴겁니다. Animation 항목으로 바꾸면 Animation에 맞는 창배치가 됩니다. 물론 개인 취향에 맞게 창배치를 할 수 있습니다. 위의 Window 메뉴속에 자신이 원하는 항목을 켜놓고 Save as New WorkSpace를 선택하면 자신에 맞는 배치가 저장이 되는 것이죠.

 자 이제 MainWindow에 요소를 삽입해보겠습니다. 그전에 여기서 창배치를 조금더 바꾸고자 합니다. 지금 흰 화면이 열려있는 창이 바로 Design View 상태입니다. 그런데 재미있는 건 개발자가 보기엔 이 창은 바로 코드로 구성되어있다는 것이지요. 바로 앞에서 소개해드린 xaml 코드로 말입니다. 그걸 확인해보기 위해서는 창 우측 상단에 있는 Split 아이콘을 선택해줍니다.

 

 

그러면 창 배치가 또 바뀝니다.

 

 

밑에 보이시나요? 이게 바로 xaml 코드입니다. 지금 한것이 바로 Design View와 Code View를 동시에 볼 수 있는 Split Mode입니다. 물론 하나만 볼 수 있습니다. 바로 그 위 아이콘들은 선택해보시면 화면이 바뀝니다.

 자 좌측에 보면 Toolbox가 있습니다. 여기서 중간에 네모모양 도형이 있습니다. 그걸 마우스로 꾹 누르면 다음과 같이 메뉴가 생성됩니다.

 

 

여기서 Ellipse를 선택하고 MainWindow에 하나 그려봅니다.

 

 

Code View 상에도 Ellipse가 생성된 것을 확인할 수 있습니다. 바로 저런 원 모양이 밑의 코드처럼 나타난다는 것이지요.

 참 그리고 다음 동작을 하기에 앞서서 지금의 LayoutRoot로 지정된 grid를 Canvas로 바꾸는 작업을 하겠습니다. 간단합니다. Object and Timeline에서 마우스 우클릭을 한 후 다음과 같이 선택해주면 됩니다.

 

 

그러면 xaml 코드상에도 처음에 Grid라고 되어 있던 부분이 canvas로 바뀌는 것을 확인할 수 있습니다. Canvas와 Grid의 차이를 아시고 싶은 분이라면 링크를 확인하시면 좋을거 같네요.

 

 

지금 보시면 알겠지만 각각의 도형에대한 속성이 이 코드로 나타납니다. 이 말은 즉 이 수치를 바꾸면 그 값이 바로 디자인뷰상으로 적용이 된다는 것입니다.

 다름 개체도 넣어보겠습니다. 아까 했던 것처럼 Rectangle을 선택한 후 ellipse를 덮게끔 배치합니다.

 

 

화면상으로는 ellipse가 나타나지 않지만 분명 코드상에는 Ellipse가 존재합니다. 한번 네모의 배경색을 바꿔보겠습니다. 디자인뷰상에서 네모를 선택하면 네모에 대한 properties가 좌측에 뜹니다. 거기서 색상을 조절하면 xaml상에서도 fill 항목이 수정되면서 색이 바뀝니다.

 

 

이번에는 네모를 선택한 상태에서 v키를 누릅니다. 그러면 네모의 테두리에 뭐가 생깁니다.

 

 

저기있는 원을 잡고 늘리면 어떻게 될까요?

 

 

이렇게 모서리에 곡률이 생깁니다. 역시 xaml 코드상에도 RadiusX, radiusY라는 이름으로 값이 생성됩니다.

 아까 만들었던 원을 다시 나타나게 해봅시다. 물론 object and timeline에서 순서를 바꿔도 됩니다. 이건 일종의 Stack 구조라고 보시면 됩니다. 요소가 놓인 순서대로 눈에 보이는 것이죠. xaml 코드 상에서 보면 ellipse가 rectangle 앞에 배치되어 있습니다. 이것의 순서를 바꿔보면 다음과 같이 출력됩니다.

 

 

그냥 층층이 쌓이는 형식이라고 보시면 됩니다. 이걸 여러개 복사를 하려면 alt 키를 누른 상태에서 드래그하면 됩니다. 다음과같이 만들어볼까요?

 

 

복사시 라인이 정렬되기 때문에 복사도 깔끔하게 할 수 있습니다. 네모도 하나 삽입해봅니다.

 

 

재미있는건 이렇게 생성한 Rectangle이 이전에 만든 Rectangle의 성향을 가져온다는 겁니다. 딱히 Radius를 지정하지 않았지만 위와 같이 생성합니다. 물론 마음에 안드신다면 그 부분을 빼버리거나 아까와 반대로 하시면 되겠지요.

 다음으로 해볼것은 grouping입니다. 개체가 따로따로 노는 것은 분명 비효율적인 일입니다. 이걸 하나의 개체 형식으로 다루려면 디자인뷰상에서 요소들을 전체 선택하거나 object and timeline에서 LayoutRoot 아래에 있는 모든 요소를 전부 선택해줍니다. 그후에 마우스 우클릭후 Group into를 선택해봅니다. 예제처럼 Canvas로 바꾸면 이 모든 것이 Canvas라는 요소안에 전부 포함됩니다.

 

 

누차 말씀드렸지만 지금 하는 모든 것들은 즉각즉각 xaml 코드상에 나타납니다.

 

 

이제 요소도 한꺼번에 옮길 수 있습니다. 이렇게 된것의 이름을 바꿔보겠습니다. VideoPlayer라고 해볼까요?

 

 

자 이렇게 바꾸면 object에 바꾼 결과가 xaml 상에도 x:Name이란 이름으로 변경됩니다. 이제 cs코드상에서 이 이름을 호출하면 여기에 대한 속성도 코드상으로 제어할 수 있게 됩니다. 이제 애니메이션을 줘보겠습니다. 우선 이 모든 화면이 돌아가는 걸 구현해보렵니다. 우선은 창배치를 Animation으로 바꿉니다.

 

 

창이 또 바뀌었습니다. 여기서 애니메이션을 주기위해서는 하나의 프로젝트를 생성해야 합니다. 블랜드에서는 이를 StroyBoard라고 하지요. 이를 추가하려면 Object And Timeline에 있는 + 버튼을 누르면 됩니다.

 

 

이렇게 스토리보드를 생성하면 새로운 창이 또 생성됩니다 바로 이게 Timeline이겠지요.

 

 

우리가 줄려는 효과는 2초동안 위의 VideoPlayer가 돌아가는 겁니다. 그러기 위해서는 2초때의 결과를 만들어야 되는데 우선 위와 같이 2초의 timeline을 선택하면 선이 그어집니다. 이때 결과물을 만들면 됩니다. 그럼 디자인뷰상으로 그룹화를 했으니까 한번 돌려봅니다.

 

 

xaml 코드 상으로도 renderRotation이 생성됩니다. 이렇게 애니메이션이 만들어졌습니다. 이게 무슨 애니메이션이라고요?

한번 확인해보기 위해서는 재생 버튼을 눌러주면 됩니다. 결과는 다음과 같습니다.

 

 

애니메이션이 이렇게 깔끔하게 됩니다. xaml상에서는 다음과 같이 구현되어 있습니다.

 

 

어마어마 합니다. 이 모든 코드를 Expression Blend는 자동으로 짜줍니다. 단순히 클릭 몇번만 하면 말이지요.

 그런데 개발하다보면 분명 이벤트도 넣어야 하고 코드로 뭔가를 다뤄야 할때가 생깁니다. 이때는 Visual Studio를 사용하는게 좋겠지요. 해당 프로젝트를 선택하면 그런 항목이 있습니다.

 

 

우선 블랜드에서 프로젝트를 저장하고 이걸 Visual Studio로 열면 됩니다.

 

 

이런 그래픽 랜더링은 Visual Studio만 가지고는 못하겠지요. 그래서 VS와 EB가 협업에 있어서 가장 유용한 툴이라고 할 수 있겠습니다. 물론 윈도우 8 개발에서도 이런식으로 쓸 수 있지만 지금 나와있는 Consumer Preview에선 호환성이 많이(?) 좋지 않네요. 더 유용한 건 이렇게 Visual Studio상에서 수정한 내용을 블랜드에서도 가져올 수 있다는 거지요. 한번 지금의 MainWindow의 Background를 수정해보겠습니다. xaml상에서 LayoutRoot에 다음의 속성을 삽입하면 됩니다.

 

 

색이 바뀌었습니다. 이걸 VS 상에서 저장하고 다시 블랜드로 돌아가면 경고창이 뜹니다.

 

 

외부에서 수정됬으니 적용시키겠냐는 건데 예를 누르면 블랜드상에서도 회색 바탕이 나오게 됩니다.

 

 

어떤가요? 생각보다 간단하면서도 강력한 툴이 바로 이 블랜드라고 할수 있습니다.