'Silverlight' 태그의 글 목록 (7 Page)

'Silverlight'에 해당되는 글 23건

2007.11.25 [무한도전] Silverlight 메뉴바 만들기 (5)
2007.11.24 [무한도전] Silverlight 메뉴바 만들기 (4) 2
2007.11.24 [무한도전] Silverlight 메뉴바 만들기 (3)

[무한도전] Silverlight 메뉴바 만들기 (5)

프로그래밍/05.Silverlight / 2007. 11. 25. 00:37

주의 : 해당 내용은 실버라이트 1.1버전을 내용을 작성된 내용입니다. 현재 나와 있는 버전과 차이가 있어 버그가 있을수 있습니다. 참고하세요!!

[무한도전] Silverlight 메뉴바 만들기 (5)

이번에는 Stroyboard를 사용해서 마우스가 Maine Menu에 올라왔을 SubMenu가 보여지도록 해보겠습니다.

아래 그림을 보면서 설명하도록 하겠습니다.

1. 그림

Blend 아래 보시면 "Objects and Timeline"이라는 텝이있는데, 거기서 {No Storyboard open}이라는 거 옆에 ">"이런게 있는 것을 보실수 있을 것입니다. 그 걸 클릭하시면 위 그림과 같은 창이 나타나는 데요..거기에서 "+"를 클릭하시면 아래와 같은 창이 나타나게 됩니다.

2. 그림

위 그림과 같은 창이 나타나면 Name 을 설정하고 OK를 클릭하면 마치 화면이 녹화 되듯이 빨간색으로 테두리가 감싸저있는 모습을 볼수 있을 겁니다. (아래 그림 참고)

3. 그림

마치 녹화가 되는 모습아닙니까..^^그리고 Blend 아래를 보시면 Timeline이 나타날것입니다. 아래그림과 같이 말이지요~^^

4. 그림

자~ 이제 어느정도 Storyboard 만들기가 갖추어 진것 같군요!
이제 본격적으로 만들어 보도록 하지요..ㅋ저는 1초동안에 SubMenu가 열리도록 할 것 입니다. 그럼 1초부분에는 stroy가 완성되어 있어야 겠네요!!그럼 일단 Timeline을 1초로 옮긴다음에 완성된 그림들 설정해 보도록 하겠습니다.

5.그림

위 그림처럼 변형이 될 객체를 클릭합니다. 그럼 Timeline부분에 Name이 선택이 되고요 그다음에 Timeline의 시간이 나타나있는 부분에 "+"를 클릭합니다 .그럼 해당 Name 키프레임이 생성이 됩니다. 그 다음에 객체를 변형 합니다. 저는 아래와 같이 해보았습니다.

6.그림

간단하게 Mainebar 객체의 높이를 늘렸습니다. 이렇게 하고 난 뒤에 Play 버톤을 클랙해 봅니다. 그럼 시간에 흐름에 따라 자연스럽게 변형되지 않습니까~^^ 신기하죠!이런식으로 해서 애니메이션을 만들면 됩니다.
제가 만든 Story를 보도록 하겠습니다.

7.그림

저는 0.3초에 Menu01과 txt_m1이 커지길 바래서 이렇게 Blend 오른쪽에 보시면 Transform 이라는 템이 있습니다 .거기에서 Scale를 선택한다음 X 를 1.25 Y 를 1.25로 설정했습니다 .이거이 무엇이냐시간의 흐름에 따라 크기를 커지게하는 것이지요!! 저는 그 다음에 0.5에 부분에서 다시 X 를 1 Y를 1로 설정했습니다 . 이렇게 한번만 하면 재미 없으니깐 0.7초에는 다시 1.25로 설정하고, 1초에는 1로 설정을 했습니다. 그렇게 하두 난뒤에 한번 Play를 해보세요~^^멋지지 않습니까..
이제는subMenu가 없어 졌다가 1초후에 나타나게 하면 되겠지요...^^ 대충 집작들 하셨으리라 생각 되는군요.아래 그림과 같이 SubMenu와 관련된 객체들을 Timelien을 1초로 옮기도록 합니다. 그리고 나서 키프레임을 찍도록 합니다.

8. 그림

위 그림과 같이 Opacity를 88%로 설정을 합니다(Opacity는 불투명도 입니다.)
그런다음에 SubMenu와 관련된 객체들을 0초로 옮기도록 합니다. 그리고 객체들을 뭉쳐두도록 합니다. 아래 그림을 참고 하세요!

9. 그림

이렇게 하고 난 뒤에 아래 그림과 같이 Opacity를 0 으로 설정합니다.

10.그림

그럼 Play 했을때 없다가 1초후에 나타 나겠지요~^^ 한번 실행해 보세요~이런식으로 하면 여러가지 애니메이션을 만들수 있습니다. 제가 만들었던 애니메이션과 약간은 다른데....쯤쯤...이 다음 강좌부분에 제가 만든 소스도 올려드릴테니 참고하세요~^^;;
아무튼 위와 같은 방법을 해서 나머지 3개의 애니메이션도 각각에 알맞게 만들어 줍니다.
저는 Menu1_Story, Menu2_Story, Menu3,_Story, Menu4_Story 4개를 만들었습니다. 이렇게 만들어둔 Stroyboard를 비하인드 코드에서 실행하면 됩니다. 비하인드 코드부분은 이 다음 "[무한도전] Silverlight 메뉴바 만들기 (6)" 에서 자세하게 다루어 보도록 하겠습니다.

여기까지 읽어 주시고 따라해 주셔서 감사합니다~^^

Posted by happydong

, |

[무한도전] Silverlight 메뉴바 만들기 (4)

프로그래밍/05.Silverlight / 2007. 11. 24. 14:20

주의 : 해당 내용은 실버라이트 1.1버전을 내용을 작성된 내용입니다. 현재 나와 있는 버전과 차이가 있어 버그가 있을수 있습니다. 참고하세요!!

[무한도전] Silverlight 메뉴바 만들기 (4)

계속해서 내용을 이어가도록 하겟습니다. 이제 TextBlock를 이용해서 Menu라는 내용을 적어 보도록 하지요..아주 간단합니다. Blend를 이용하면 말이지요!^^;; 아래 그림을 보면서 따라해 보도록 하세요~^^

1. 그림

왼쪽에 보시면 "TextBlock"라는 메뉴가 있습니다. 마우스로 선택을 하시고...원하는 위치에 마우스로 글거주시면...(표현이 좀..그런가요..ㅋ)됩니다. 그리고 나서 바로 입력할 내용을 적으시면 되고, Text 내용을 변경하고 자하면 아래 그림을 참고해서 변경하시면 됩니다.

2. 그림

위 그림처럼 Text 라는 부분이 보이 실것입니다. 여기서 내용을 변경하면 되는 것이지요! 역시 제일 위 부분에 Name을 지정할 수 있습니다. 저는 txt_m4라고 했군요!^^ 만들어진 Textblock를 원하는 위치로 옮기면 되겠습니다.저는 이렇게 하나를 만들어서 Ctrl + C & V로 나머지 3개를 만든후 위치를 정렬했습니다~^^;;;아래 표는 각각의 Name과 Text를 제가 어떻게 설정했는지를 보여주는 표입니다.

Name	Text
txt_m1	Menu01
txt_m2	Menu02
txt_m3	Menu03
txt_m4	Menu04

오호~ 이렇게 하니깐 좀더 메뉴바 답지 않습니까..^^;;이제는 SubMenu를 만들어야 겠지요. 제가 따로 설명없이 그림만 보여주면 고대로 따라 만드실 수 있겠지요..^^꼭 제것과 똑같이 만드실 필요는 없습니다. 사람의 취향이 다르기 때문에...ㅋㅋ 아무튼 저는 아래 그림과 같이 SubMenu를 만들어 보았습니다.

3. 그림

한번에 만드실수 있겠지요!^^ 아래 SubMenu를 만들기 귀찮으신 분들은 아래 코드를 가져다가 붙어 넣으세요~^^;;; 코드가 좀 길죠~^^;;;

XAML Code

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

SubMenu들의 뒤에 있는 Rectangle의 Name은 SubMenuber01 입니다. 그리고 Textblock 뒤에 있는 Rectangle의 Name은 (왼쪽에서부터) submenu1, submenu2, submenu3 입니다. TextBlock은 아래 표를 참고 하시기 바랍니다.

Name	Text
txtsub1	subMenu01
txtsub2	subMenu02
txtsub3	subMenu03

자 이제는 마우스가 Maine Menu에 올라 왔을때 SubMenu들이 나타나게 해야 겠지요^^ 그 부분은 Storyboard를 이용해서 만들면 됩니다. Storyboard 는 [무한도전] Silverlight 메뉴바 만들기 (5) 에서 알아 보도록 하겠습니다. 지금까지 읽어 주셔서 감사 합니다.

Posted by happydong

, |

[무한도전] Silverlight 메뉴바 만들기 (3)

프로그래밍/05.Silverlight / 2007. 11. 24. 12:58

주의 : 해당 내용은 실버라이트 1.1버전을 내용을 작성된 내용입니다. 현재 나와 있는 버전과 차이가 있어 버그가 있을수 있습니다. 참고하세요!!

[무한도전] Silverlight 메뉴바 만들기 (3)

본격적으로 메뉴바를 만들어도록 하지요! 그림을 보시면서 잘 따라 오세요!! 저도 가끔은 실수 할 수 있으니깐 이상한 부분은 바로바로 지적해주세요~^^;;;

아래 그림들을 보면서 설명해드리도록 하겠습니다.

1)그림

그림에서 왼쪽메뉴부분에 보시면 "Rectangle"이라고 있습니다. 마우스로 선택을 하시고 원하시는 그림을 그리시면 됩니다. 저는 그림과 같은 형태를 만들어 보았습니다. 그림안에 색은 아래 그림처럼 오른쪽에 보시면 색을 선택할 수있는 빨래뜨가 있습니다.(빨래뜨는 포토샵에서 자주사용되는 용어죠)

(위그림은 그림 제일위에 Properties 를 마우스로 클릭하면 나타는 그림입니다.)

그림과 같이 색을 선택하시고 제일위에 보시면 Name이라고 했습니다. 우리가 흔히 사용하는 객체의 id를 쓰는 것이라고 생각하시면 될것 같군요! 저는 Mainebar 라고 했습니다.그림과 같이 만들어 보았다면 XAML 코드로는 어떻게 생성이 되었는지 아래 코드를 보도록 하겠습니다.

XAML Code

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:UntitledProject2="clr-namespace:UntitledProject2;assembly=ClientBin/UntitledProject2.dll"

Width="640" Height="480"

Background="White"

x:Class="UntitledProject2.Page;assembly=ClientBin/UntitledProject2.dll"

x:Name="Page"

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

위에서 그림을 그렸을 뿐인데..이렇게 XAML 코드가 생성이 되었습니다. 코드에서 Canvas는프로젝트가 생성이 될때 기본적으로 생성이된 부분이고요. Rectangle는 제가 그림을 그리면서 만들어진 코드입니다. 계속해서 Blend에서 나머지 작업들을 해보도록 하겠습니다.이제는 Maine Menu를 만들어 보도록 하겠습니다. 아래 그림을 보도록 하시지요^^

저는 아까와 같은 방법으로 해서 Maine Menu가 될 부분을 만들어 보았습니다. 역시 한번 만들어보니깐 두번째 만들기가 쉬어 지셨죠~^^ 저도 그렇습니다. 이런식으로 해서 저는 Maine Menu가 될 부분을 4개만들어 보았습니다. 하나를 만들었으니 Ctrl + C & V를 하면 되겠지요~^^;;

이렇게 복사한 것들을 원하는 위치에 정렬해서 두기란 쉽지 않죠. 모눈종이 처럼 눈금이 있다면 정말 정렬하는데 수월하지 않겠습니까!?^^ 위 그림에 빨간색부분을 마우스로 클릭만 해주시면 위 그림과 같이 나타나게 됩니다~^^ 세심한 작업하는데는 도움이 되겠네요~
(4개의 Rectangle은 각각 Name은 Menu01,Menu02,Menu03,Menu04로 했습니다.)

자~ 제가 만든 색부분이 조금 이상하지 않습니까!?^^;; 안쪽에는 약간 밝고,,양쪽끝 부분은 어둡고...별로 못느끼겠지요~^^;;;;;ㅋㅋ아무튼 이 부분이 어떻게 만들어졌는지 확이해 보도록 하겠습니다..모...별거 아닌데...ㅋㅋ아래그림을 보시면 아하~하실 겁니다.일단 색을 변경해주고하 하는 모양을 선택하시고요.

위 그림은 Solid color brush를 선택후 색을 선택한 그림입니다.

위 그림은 Gradient brush를 선택후 색을 선택한 그림입니다. 대충 감을 잡았을 것이라 생각이 되는 군요!! 그림 그대로 원하는 위치에 색만 바꾸고 싶으시다면 마우스로 원하는 위치를 선택하시고 원하는 색을 선택하시면 됩니다~^^ 아주 간단 하죠~^^ 이렇게 해서 저는 안쪽은 약간 밝게 모서리 쪽은 약간 어둡게 만든 것입니다. 한번해 보세요~^^;; 자~이제 어느정도 메뉴바 같은 모양이 나타나는 군요~~^^;; 혹시나 만들어 보고 싶은데...모르겠는 분들은 아래 소스를 붙어 넣기 하세요~^^

XAML Code

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

계속해서 TextBlock를 이용해서 Menu라는 글을 써보도록 하겠습니다. 아~하 이 다음([무한도전] Silverlight 메뉴바 만들기 (4) )에 다루도록 하겠습니다.^^ 여기까지 읽어주시고 봐주셔서 감사합니다.

Posted by happydong

, |

«이전 1 ··· 4 5 6 7 8 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'Silverlight'에 해당되는 글 23건

[무한도전] Silverlight 메뉴바 만들기 (5)

[무한도전] Silverlight 메뉴바 만들기 (4)

[무한도전] Silverlight 메뉴바 만들기 (3)

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바