WPF 썸네일형 리스트형 7월14일 3주 [디자이너가 만드는 WPF 프로젝트 스터디] 자료 및 후기 이번주 화요일 3주차 스터디를 진행하였습니다. 이날 마치 하늘에 구멍이라도 났는지 비가 아침부터 저녁까지 퍼붓길래 과연 사람들이 이 빗속을 뚫고 오실까.. 하고 한분이라도 오시면 다행이라고 생각했는데 많은 분들이 참석해 주셔서 감사했습니다. 교대 ~ 포스코 건물까지 10분이면 가는 거리를 1시간 넘게 걸리더군요. 다행히 시간을 넘기지는 않았습니다만, 밖에서 기다리신 분들이 있으셔서 감사했습니다. :-) 3주차는 디자이너분들은 생소하실 레이아웃 패널에서 배웠습니다. 블랜드를 처음 배우면서 그리드와 캔버스 등, 쓰긴 쓰는데 제대로 알고쓰지 않아 아웃풋으로 볼때는 일그러지거나 위치가 다른곳에 있기도 했습니다. 그런데 레이아웃 패널을 제대로 알고 나니 다른 프로그램에서 경험하지 못한? 새로운 편리함을 알게 되었.. 더보기 7월7일 2주 [디자이너가 만드는 WPF 프로젝트 스터디] 자료 및 후기 2주 차 [WPF와 실버라이트 개념잡기] 라는 제목으로 비교적 기본적인 내용을 진행하였는데도 불구하고 많은 분들이 오셔서 감사할 따름입니다 ^^ 그래서 스터디 내내 흥분하며 진행을 해서 정보전달에 있어 자료 첨부와 더불어 약간의 글을 더 써보도록 합니다. 1. WPF와 실버라이트는 익스프레션 블랜드 라는 같은 프로그램을 사용하고 있음에도 불구하고 전혀 다른 작업방식과 아웃풋이 나옵니다. 그래서 처음 작업하실 때 내가 웹으로 구현할 것인지 윈도우상에서 구현할 것인지에 대해 먼저 생각해야 합니다. 프로젝트가 경량을 원하고 배포가 중요하면 실버라이트로 웹에서 구현하여 접근성이 쉽도록 만듭니다. 아니면 제한된 사용자가 정보를 다양하게, 많이 보여준다면 WPF로 exe파일을 설치하여 안정성있게 만들도록 합니다. .. 더보기 디자이너가 코드 하나 안쓰고 만드는 WPF 프로젝트 스터디 뭐 일은 많고, 스터디는 해야하는거고, 기타는 치고 싶고, 몸은 말을 듣지 않고 몸이 그나마 지금 말을 들을려고 하니 그나마 다행인거지요 OTL 더보기 [Expression Blend WPF강좌] Stack 패널을 이용하여 메뉴바 만들기 - 1 이번강좌는 Stack Panel을 이용하여 옆에서 슬라이드 되어 나오는 가로 메뉴를 만드는 것이다. 예전 강좌 때 [Grid]패널과 [Canvas]패널 강좌를 올렸었는데, 그때는 그것만 주구장창 썼기 때문에 다른 것은 Skip하고 지나갔었다. Stack 패널은 이런 아이콘을 가진 레이아웃 패널이다 이 패널의 특징은 이 패널(그룹)안으로 들어오는 모든 객체들은 전부 일렬로 정렬된다. 그래서 이 Stack Panel을 선택하고 속성창에서 Orientation 을 Vertical :세로 로 할지 Horizontal: 가로 로 할지 설정을 하면 객체들이 세로로 혹은 가로로 무조건 한줄로 정렬된다. 레이아웃 패널의 대략의 개념을 알고 싶으면 [Grid] 패널 강좌 때 설명을 간략히 했는데, 아직 레이아웃 패널의 .. 더보기 [Expression Blend WPF강좌] 버튼에 애니메이션을 적용해보자 예전 강의 때 버튼도 만들어 보았고, 애니메이션도 만들어 봤을 겁니다 :) 이 두개를 오늘 활용하는 의미로, 버튼에 + 애니메이션을 주어 기존에 마우스오버/마우스클릭 시 좀 더 효과적으로 보이도록 적용해 보도록 하겠습니다. 1) 먼저 각자의 취향대로 버튼을 만들어봅시다! (다들 없으시다면 저번 강의를 도움 삼아 만들어주시고요~) 저는 이렇게 간단하게 사각형 하나에 블링한 효과 하나 넣었습니다. :) 도구>버튼만들기>버튼 이름 지정하여 확인 눌러줍니다. 2) 버튼을 클릭했을 때나 롤 오버 했을 때 애니메이션이 나와야 하기 때문에 버튼 우클릭 > 컨트롤 구성요소 편집 > 템플릿 편집하여 버튼 안으로 들어갑니다. 버튼 안으로 들어가면 아까 만들었던 버튼들의 요소가 보입니다. 저는 사각형 두개가 보이네요 :) .. 더보기 [Expression Blend WPF강좌] zindex의 기능에 대하여 알아보자. 이번 시간에는 zindex에 대해서 알아보도록 하겠습니다. zindex란 뭘까요? 실버라이트에도 있고 WPF에도 이 기능이 있습니다. 아래 화면을 보시면 속성 > 레이아웃에서 쉽게 보실 수 있습니다. zindex는 화면에 보여지는 요소들, 객체들이 z축의 순서를 정해주도록 설정하는 기능입니다. x축은 왼/오른쪽, y축은 위/아래, z축은 멀고/가까움 이라고 보시면 됩니다. 미술시간에 꼭지점을 한 가운데 찍고 X자로 선을 그은다음 그 선 사이에 나무를 그려서 가로수길을 만든 일 혹시 기억 나시나요? 그것도 z축을 이용해서 나무의 멀고 가까움을 그린 것과 마찬가지입니다. Blend에서는 이 zindex에 숫자를 높게 설정해 줄 수록 레이어상으로는 가장 맨 밑에 깔려 있는 요소라 할지라도 맨 위에 올려져 있게.. 더보기 [Expression Blend WPF강좌] 윈도우 창 디자인 하기 - 1 첫 강의 때 말씀 드린듯이 블랜드에서 1) WPF응용프로그램 (exe) - 윈도우에서 실행 2) 실버라이트 응용프로그램 - 웹에서 실행 을 두가지로 나뉘는데요. 제가 여태까지 한 것은 WPF응용프로그램이라는 걸 아시죠? :) 기존의 윈도우 창은 이렇게 생겼는데요, 이번강좌에서는 윈도우 창을 자신이 원하는 모양대로 바꿔보도록 하겠습니다. :) 1) 파일 > 새 프로젝트 > WPF응용프로그램 선택 후 확인하여 새 윈도우 창을 만듭니다. 새 창에는 여태까지 자세하게 신경은 안썼지만, 윈도우로 열리는 창이기 때문에 오른쪽 상단에 자세히 보시면 밑의 그림과 같이 윈도우의 모양이 보입니다. 보이시나요? 먼저 윈도우를 디자인 하기 전에 이걸 없애야 하겠죠? :) 2) 레이어에서 제일 상위 레이어인 윈도우를 선택합니다.. 더보기 [Expression Blend WPF강좌] 주위를 뱅뱅도는 생쥐 애니메이션 만들기 :) 안녕하세요, 저번에 공 튀기는 예제로 키 프레임을 클릭하여 애니메이션을 주는 방법을 배웠습니다. 이번에는 사방으로 돌아다니는 쥐 애니메이션으로 패스(Path)를 따라서 움직이는 방법을 배우도록 하겠습니다. 1) 파일 > 새 프로젝트 > WPF(.exe)파일로 엽니다. 원을 하나 그려줍니다. 그리고 펜툴로 쥐의 꼬랑지를 쬐그맣게 그려줍니다. 원의 색을 바꿔주려면 오른쪽의 [속성]창에서 바꿔 주시는 건 아시죠? :) 그리고 원을 두개 그려서 쥐의 양쪽 눈을 만들어 줍니다. 2) 쥐의 귀는 사각형과 원을 포갠 뒤에 오른쪽클릭 > Combine > Subtract 를 누르면 남게 됩니다. 이때 두개를 동시선택하더라도 반드시 원을 클릭한 상태에서 실행하셔야 합니다. 그렇지 않으면 위의 그림과 같이 남는 경우가 되.. 더보기 [Expression Blend WPF강좌] 간단한 애니메이션 만들기- (2 스마일 공 튀기기) 이어서 애니메이션 진행하겠습니다. 저번 강좌에서 공이 어떻게 움직이는 지에 대한 애니메이션 강좌를 했는데요. 그것을 참고로 하여 공을 좀 더 수정해보겠습니다. 1) 애니메이션이 녹화되어 있는 상태에서 반드시 시작한다는 것을 잊지 마세요 :) 타임라인에 찍혀 있는 하얀 키를 클릭하면 옆의 속성 창이 바뀌는 것을 보실 수 있습니다. 옆의 창은 속성 및 가속/감속 같은 그래프가 있는데요. 바로 이 그래프를 이용해서 가/감속을 하게 됩니다. 공이 튀겨서 올라가는 1초/3초/5초의 키를 수정하게 될 건데요. 먼저 1초 키를 누른 상태에서, 그래프 오른쪽 맨 위에 있는 포인트를 다음그림과 같이 휘어줍니다. 공이 처음에 튀겨 올라갈 때는 속도가 빠르다가, 점점 올라가면서 속도가 느려지기 때문에 이런 그래프가 나오게 .. 더보기 [Expression Blend WPF강좌] 간단한 애니메이션 만들기- (1 스마일 공 튀기기) 전 강좌에서는 무비클립과 비슷한 역할을 하는 UserControl을 해보았고, 편리한 바인딩 기능이 있는 버튼까지 만들어 보았습니다 :-0 이번 강좌에서는 애니메이션에 대해서 다루어봅니다. 일단 전 강좌에서 유저컨트롤로 만들었던 스마일을 가져와서 스마일에 애니메이션을 넣어보겠습니다. (유저컨트롤로 만드는 방법은 이미 강좌로 올라와 있으니 확인하세요) 1) 자산라이브러리 > 사용자 지정 컨트롤 에서 자신이 만든 유저컨트롤을 화면으로 가져 옵니다. 그리고 사각형으로 바닥을 하나 그려서 레이어를 맨 위로 올려줍니다. (배경을 그리기 위한 작업) 그리고 스마일을 바닥위에 얹어줍니다. 2) 인터렉션 창에서 + 버튼을 클릭하면 [스토리보드 만들기] 라는 창이 뜹니다. 자신이 원하는 애니메이션의 이름을 쓰고 확인 버.. 더보기 이전 1 2 3 다음
