'2007/11/24 글 목록

'2007/11/24'에 해당되는 글 3건

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

[무한도전] 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

, |

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

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

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

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

이제 슬슬 하나 만들어 볼까요..^^
VS2008에서 실버라이트 프로젝트를 생성합니다.(한글버전)파일 >>새로만들기 >>프로젝트 선택합니다. 그럼 아래 그림과 같이 나타나실거예요. 그럼 왼쪽에 Silverlight 선택하고 Silverlight Project 선택을 하고 원하는 프로젝트 이름을 작성합니다. 저는 "MenubarTest" 라고 했습니다.

이렇게 프로젝트를 생성하면 아래그림과 같이 프로젝트파일들이 생성이 됩니다.

그럼 이제 프로젝트를 생성했으니 Expression Blend에서 한번 프로젝트를 열어 보도록 하겠습니다.자~Blend를 실행하면 아래 그림과 같이 나타납니다. Projects >> Open Project... 를 클릭해서 프로젝트가 생성된 위치에서 프로젝트를 선택합니다.

프로젝트를 선택을 해서 실행을 하게되면 아래와 같은 그림이 나타날것입니다.

이제는 대충 모양을 만들어 봐야겠지요. 그 내용은 [무한도전] Silverlight 메뉴바 만들기 (3)에서 다루도록 하겠습니다. 여기까지 읽어 주셔서 감사합니다~^^

Posted by happydong

, |

«이전 1 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'2007/11/24'에 해당되는 글 3건

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

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

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

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바