본문 바로가기

Expression Blend

[Expression Blend 강좌] GridSplitter Customize - 2 이어서 진행하겠습니다. 잘 따라오셨나요? ^^; GridSplitter Customize - 1에서 첨부한 것을 실행해 보시면 화살표가 들어간 부분만 스플릿터가 작동되고 위나 아래쪽을 당겨보면 당겨지지 않는 것을 확인하실 수 있습니다. 왜냐하면 당길 수 있는 부분이 비어있기 때문입니다. 그리드로 감싸져 있는데 비어있냐는 말이 이해가 안 가시죠? 다시 얘기 하자면 그리드 안에 Fill로 채워진 부분이 화살표 모양밖에 없다는 얘기입니다. 나머지는 GridSplitter영역이긴 하지만 그 영역 안에는 아무것도 그려져 있지 않다는 것입니다. 다시 스플릿터 안으로 들어가서 색상을 주어 스플릿터 전체에 아무데나 마우스를 놓아도 작동될 수 있게 만들어 놓겠습니다.. 1) 스플릿트 안으로 다시 들어갑니다. 2) Gri.. 더보기
[Expression Blend 강좌] GridSplitter Customize - 1 안녕하세요, 이번시간에는 컨트롤 중에 GridSplitter에 대해 Customize를 해보도록 하겠습니다. GridSplitter의 역할은 Grid의 행 사이와 열 사이를 임의대로 사이즈를 줄이고 늘일 수 있도록 하는 컨트롤을 나타냅니다. 예를 들면 드림위버에서 프레임과 프레임의 사이즈를 줄이는 것 처럼 하는 역할입니다. 빨간색의 Splitter를 이용하여 왼쪽으로 옮겼을 때 빨간색의 Splitter를 이용하여 오른쪽으로 옮겼을 때 다음과 같은 모습입니다. 지금 보시는 것과 같이 빨간색 모양의 Splitter는 그냥 사각형 모양처럼 보이기 때문에 이것을 Editing하려 합니다. 1) 먼저 새 파일을 엽니다. 막 바로 연 Window1의 아트보드에서 기본적으로 Grid로 되어있는 LayoutRoot에 .. 더보기
[Expression Blend 3 강좌] 내멋대로 Expression Blend 3 Preview 안녕하세요- 얼마전에 Expression Blend 3가 나왔습니다. 저도 컴퓨터에 깔아보고 첫 화면을 띄운 순간, 블랜드 처음 시작할 때의 마음가짐으로 돌아가게 되었습니다. 이 많은 것중에 대체 뭘 띄우란 말인가 (뭉크의 절규처럼 소리지르며) 입니다. 프로그램이 업그레이드 되면서 편리한 부분도 많아지지만, [내가 이만큼 사용하게 만들어 놨으니 너도 이만큼 따라와야지] 하며 우리를 또 새로운 툴을 익히기 위해 고군분투 하지요-_-; 처음 화면은 이렇게 뜹니다. (뒤의 오렌지는 개인 바탕 화면이니 이해해 주시길) 아직 RC버전이기 때문에 (*수정) Trial Version 으로 엽니다; 두둥! File> New Project 를 클릭한 순간 블랜드 2에서의 익숙했던 화면이 나오지 않고 불편한 화면이 나오네.. 더보기
[Expression Blend 강좌] ComboBox Customize -2 이어서 강좌하겠습니다. 콤보박스를 클릭하고 롤오버 할때 반응을 보여주어야 내가 이 콤보박스를 클릭했는지 안했는지 눈으로 구분할 수 있겠지요? 속성 트리거로 녹화를 하여 바꾸어보도록 하겠습니다. 1) 위에 그림을 보시면 템플릿 복사하면서 시스템에서 남겨놓은 속성 트리거들이 보이실 겁니다. 아까 수정하기 전에는 번개 모양 즉, 녹화된 속성이 있었는데, 지금은 다 지워져서 번개모양도 지워졌습니다. 여기서 IsChecked를 선택하여 녹화버튼으로 만듭니다. 말 그래도 체크가 True되었을 때 바꾸겠다는 의미입니다. 저는 색상만 조금 바꾸어보도록 하겠습니다. 색상을 설정해 주었는데 색상이 안바뀌는 경우가 간혹 있습니다. 그래서 녹화가 안된건가 하고 생각하실 수 있는데, 빌드 (F5)를 누르셔서 실행해 보시면 녹화.. 더보기
[Expression Blend 강좌] ComboBox Customize - 1 안녕하세요 - 이번 시간에는 블랜드에서 기본적으로 제공하는 컨트롤 중에 콤보박스의 디자인을 변경해보도록 하겠습니다. WPF에서의 콤보박스와 실버라이트에서의 콤보박스의 비주얼 트리가 다르기 때문에 이 강좌를 배우시고 실버라이트 콤보박스를 변경하실 때는 이를 고려하시길 바랍니다. ^^ 밑에 캡쳐 이미지를 올려 비교하도록 했습니다. 확연히 차이가 나지요? 왜 이렇게 차이가 많이 나는지는 확실하게 말씀드릴 순 없겠지만, 아무래도 지원하는 방식이 다르기 때문에 (윈도우 시스템 리소스를 지원한다든지) 그런 것 같습니다. 그래서 WPF의 콤보박스를 디자인 해볼텐데요. 1) 먼저 파일 > 새 프로젝트 > WPF (exe)파일로 엽니다. 그리고 화면에 콤보박스를 하나 그려줍니다. 2) 그리셨으면 오른쪽 클릭 > 템플릿 .. 더보기
디자이너가 코드 하나 안쓰고 만드는 WPF 프로젝트 스터디 뭐 일은 많고, 스터디는 해야하는거고, 기타는 치고 싶고, 몸은 말을 듣지 않고 몸이 그나마 지금 말을 들을려고 하니 그나마 다행인거지요 OTL 더보기
[Expression Blend WPF강좌] Stack 패널을 이용하여 메뉴바 만들기 - 2 저번 강좌에서 메뉴를 구성하는 버튼을 만들었다면 이렇게 stack 패널로 묶은 버튼들을 애니메이션을 주어 더 효과적인 메뉴바를 만들어 보고자 합니다. 홈페이지들을 둘러보면 메뉴가 한쪽에 숨어있다가 마우스를 갖다대면 나타나는 메뉴들을 볼 수 있습니다. 1 - 숨어있는 버튼을 롤오버하면 나타나는 애니메이션 2 - 나타난 버튼을 롤아웃하면 다시 숨는 애니메이션 두개를 만들도록 합니다. 1) Stack Panel에 Background를 설정해줍니다. 그리고 애니메이션을 만들기 전에 먼저 메뉴들을 아트보드에서 아래의 그림처럼 뺍니다. 이렇게 되면 처음 실행했을 때 메뉴들이 보이지 않게 됩니다. 2) 메인화면에서 스토리 보드를 하나 만들어줍니다. 저는 스토리보드 이름을 btnEnter라고 하겠습니다. 녹화화면으로 .. 더보기
[Expression Blend WPF강좌] Stack 패널을 이용하여 메뉴바 만들기 - 1 이번강좌는 Stack Panel을 이용하여 옆에서 슬라이드 되어 나오는 가로 메뉴를 만드는 것이다. 예전 강좌 때 [Grid]패널과 [Canvas]패널 강좌를 올렸었는데, 그때는 그것만 주구장창 썼기 때문에 다른 것은 Skip하고 지나갔었다. Stack 패널은 이런 아이콘을 가진 레이아웃 패널이다 이 패널의 특징은 이 패널(그룹)안으로 들어오는 모든 객체들은 전부 일렬로 정렬된다. 그래서 이 Stack Panel을 선택하고 속성창에서 Orientation 을 Vertical :세로 로 할지 Horizontal: 가로 로 할지 설정을 하면 객체들이 세로로 혹은 가로로 무조건 한줄로 정렬된다. 레이아웃 패널의 대략의 개념을 알고 싶으면 [Grid] 패널 강좌 때 설명을 간략히 했는데, 아직 레이아웃 패널의 .. 더보기
[Expression Blend WPF강좌] 이 지긋지긋한 스타일과 템플릿의 차이 안녕하세요, 이번 시간에도 개념을 잡기 위한 강좌로 과연 [스타일]과 [템플릿]은 어떤 차이가 있는지에 대해 설명하는 시간을 갖도록 하겠습니다. 블랜드에서 배우면서 제일 오랫동안 머리싸매며 "대체 뭔가?" 라고 생각했던 것이 바로 스타일과 템플릿입니다. 작년 실버라이트 교육을 받은적이 있었는데, 그때 가르쳐준 강사분이 템플릿은 붕어빵이고, 스타일은 케잌에 데코레이션과 같은 이치라고 한 댓번은 말씀해주셨는데[...] 케잌과 붕어빵? 개발자가 생각할 때의 케잌과 디자이너인 제가 케잌을 생각했을 때의 그림은 완전히 달랐나봅니다. ㄱ-a 그때도 이해를 못하고 지나갔기 때문에 [...] 컨트롤 중에 버튼을 예로 하여 차이점을 비교했습니다. 스타일 템플릿 - 기존속성만 설정할 수 있다 Background, Fore.. 더보기
[Expression Blend WPF강좌] 기본 - 일러스트/포토샵과 블랜드의 호환 안녕하세요. 이번시간에는 디자이너분들이 자주쓰시는 일러스트와 포토샵, 그리고 블랜드가 어떻게 교류가 되고 어떻게 사용할지 상호 프로그램간의 호환성에 대한 기본적인 구조를 짚고 넘어가도록 하겠습니다. 일러스트에서 블랜드 프로그램으로 바로 갈 수 없기 때문에 Expression Design 이라는 일러스트와 성향이 매우 비슷한 툴을 거쳐서 가야 합니다. 아니면 블랜드에서 불러 들일 수 있는 Xaml 코드로 Export시킬 수 있는 플러그 인을 다운받아서 설치 해야 가능 합니다. 일러스트와 디자인의 툴 성향이 같기 때문에 가능하면 디자인 툴에서 작업하는 것이 좋습니다만, 대부분 디자이너들이 쓰시는 아이콘 같은 것이 일러스트에서 대부분 그리기 때문에 복사/붙여넣기로 일러스트>디자인으로 넘기셔도 상관은 없습니다... 더보기