블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



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

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


이제 마지막이 되겠군요! 코드비하인드에서는 어떻게 처리 했는지 알아 보도록 하겠습니다.
먼저 저는 아래 그림과 같이 크게 5가지로 설명하겠습니다.

사용자 삽입 이미지

1. 변수 선언 및 열거

코드는 아래와 같습니다.

Page.xaml.cs페이지 (변수 선언 및 열거)

 string URL = null;

 

enum SubMenu { Menu_1,Menu_2,Menu_3,Menu_4 }

 

SubMenu SM = SubMenu.Menu_1

 - URL 변수는 나중에 웹사이트 URL주소 값을 넣기위한 변수입니다.
 - SubMenu 열거형을 정의한것 입니다. 나중에  SubMenu 이벤트 조건에서 사용이 될 거예요! 그리고 초기화 "Menu_1"로 설정합니다.

2. Page_loader

코드는 아래와 같습니다.

Page.xaml.cs페이지 (Page_loaded)

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

InitializeComponent();

 

//Main_Menu 이벤트

txt_m1.MouseEnter += new MouseEventHandler(txt_m1_MouseEnter);

txt_m2.MouseEnter += new MouseEventHandler(txt_m2_MouseEnter);

txt_m3.MouseEnter += new MouseEventHandler(txt_m3_MouseEnter);

txt_m4.MouseEnter += new MouseEventHandler(txt_m4_MouseEnter);

 

//Sub_Menu 이벤트

txtsub1.MouseLeftButtonDown += new MouseEventHandler(txtsub1_MouseLeftButtonDown);

txtsub2.MouseLeftButtonDown += new MouseEventHandler(txtsub2_MouseLeftButtonDown);

txtsub3.MouseLeftButtonDown += new MouseEventHandler(txtsub3_MouseLeftButtonDown);

}


위 코드의 txt_m1,2,3,4MainMenuTextBlock 이벤트(onmouseover event와 같음)를 준 것입니다.마찬가지로 txtsub1,2,3 또한 TextBlock 이벤트(onmousedown event와 같음)를 준 것입니다.

3. Main_Menu 이벤트

코드는 아래와 같습니다.

Page.xaml.cs페이지(Main_Menu 이벤트)

//Maine 04

void txt_m4_MouseEnter(object sender, MouseEventArgs e)

{

SM = SubMenu.Menu_4;

 

Menu1_Story.Stop();

Menu2_Story.Stop();

Menu3_Story.Stop();

Menu4_Story.Begin();

 

SubText_Name("Google", "Yahoo", "MS");

}

//Maine 03

void txt_m3_MouseEnter(object sender, MouseEventArgs e)

{

SM = SubMenu.Menu_3;

 

Menu1_Story.Stop();

Menu2_Story.Stop();

Menu4_Story.Stop();

Menu3_Story.Begin();

 

SubText_Name("Hoons_NET", "Taeyo_NET", "Devpia");

}

//Maine 02

void txt_m2_MouseEnter(object sender, MouseEventArgs e)

{

SM = SubMenu.Menu_2;

 

Menu1_Story.Stop();

Menu3_Story.Stop();

Menu4_Story.Stop();

Menu2_Story.Begin();

 

SubText_Name("DW_blog1", "DW_blog2", "DW_Cyworld");

}

//Maine 01

void txt_m1_MouseEnter(object sender, MouseEventArgs e)

{

SM = SubMenu.Menu_1;

 

Menu2_Story.Stop();

Menu3_Story.Stop();

Menu4_Story.Stop();

Menu1_Story.Begin();

 

SubText_Name("NAVER", "DAUM", "NATE");

}

// SubMenu TextBlock Text 값지정

private void SubText_Name(string txt1, string txt2, string txt3)

{

txtsub1.Text = txt1;

txtsub2.Text = txt2;

txtsub3.Text = txt3;

}


코드가 길어 보이지만 알고 보면 별거 없습니다. 일단 마우스가 해당객체의 위에 올라왔을 때 이벤트를 발생시키 겠지요. 그럼 해당 이벤트는 먼제 SM(열거형)값을 정의해 줍니다. 그래야 SubMenu에서 링크를 알맞게 걸수 있기때문입니다. 그부분은 차후에 다시 설명하겠습니다. 아무튼 정의해 줍니다. 그리고 나서 우리가 만들었던 4개의 StroyBoard중에서 해당 객체에 관련된 내용을 제외한 나머지 3개는 Stop()메소드로 지정합니다. 그렇게 하지않으면 StroyBoard가 몇개씩 겹치겠지요~^^;;그러면 안되잖아요.그리고 나서 SubText_Name 메소드를 호출합니다. SubText_Name은 인자값 3개를 받습니다. 인자값으로는 SubMenu의 이름이 되겠지요~! SubText_Name 메소드 코드를 보시면 "아하~"하실 겁니다~!!^^;;

4. Sub_Menu 이벤트

코드는 아래와 같습니다. 

 Page.xaml.cs페이지(Sub_Menu 이벤트)

 //sub 01

void txtsub1_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

if (SM == SubMenu.Menu_1)

URL = "http://www.naver.com";

else if (SM == SubMenu.Menu_2)

URL = "http://blog.naver.con/kdw8751";

else if (SM == SubMenu.Menu_3)

URL = "http://www.hoons.kr";

else if (SM == SubMenu.Menu_4)

URL = "http://www.google.co.kr";

 

Link();

}

//sub 02

void txtsub2_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

if (SM == SubMenu.Menu_1)

URL = "http://www.daum.net";

else if (SM == SubMenu.Menu_2)

URL = "http://drum-83.tistory.com";

else if (SM == SubMenu.Menu_3)

URL = "http://taeyo.net";

else if (SM == SubMenu.Menu_4)

URL = "http://kr.yahoo.com";

 

Link();

}

//sub 03

void txtsub3_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

if (SM == SubMenu.Menu_1)

URL = "http://www.nate.com";

else if (SM == SubMenu.Menu_2)

URL = "http://www.cyworld.com/ww7747";

else if (SM == SubMenu.Menu_3)

URL = "http://www.devpia.com";

else if (SM == SubMenu.Menu_4)

URL = "http://www.microsoft.com/korea";

Link();

}

위 코드는 사용자가 해당 SubMenu를 클릭했을때 해당 URL 값을 지정하는 것입니다.그리고 여기서 조건은MainMenu1온것인지..2에서 온것인지..3에서 온것인지 확인 하는 조건이죠. 해당 URL값을 지정했다면 Link()메소드를 호출하게 되는 겁니다.

5. 링크 연결

코드는 아래와 같습니다.

Page.xaml.cs페이지(링크 연결)

 using System.Windows.Browser;

...

private void Link()

{

HtmlPage.Navigate(URL, "test");

}


위 코드는 아주 간단합니다. 링크를 연결해 주는것 일뿐이죠.HtmlPage.Navigate 함수를 쓰기 위해서는 using System.Windows.Browser; 를 선언해 주어야 합니다.

지금까지 간단한 메뉴바를 만들어 보았습니다. 혹시 잘안되시는 분들을 위해 제 소스를 올려놓겠습니다. 제가 처음으로 실버라이트를 이용해서 만들어본 프로젝트라 정말 뿌듯합니다^^; 다음에는 더욱더 멋진 걸 만들어서 올리도록 하겠습니다. ^^

Posted by happydong
, |



ㅁ GDI+ 브러시 다루기

 - 채워진 모양, 이미지 또는 텍스트 같은 그래픽의 영역을 채우는데 사용.

※ 브러시(Brush)의 종류

 클래스

 설명

 SolidBrush  가장 간단한 형식의 브러시로 단색으로 그림
 HatchBrush  SolidBrush와 비슷하지만 단색 대신 미리 설정된 다양한 패턴 중에서 선택하여 그릴 수있음
 TextureBrush  이미지와 같은 질감을 사용하여 그림
 LinearGradienBrush  그라데이션에 따라 혼합된 두 가지 색으로 그림
 PathGradienBrush  개발자가 정의한 고유한 경로에 따라 혼합된 색의 복합 그라데이션을 사용하여 그림

 ▶ SolidBrush

   ☞ SolidBrush는 단색의 기본적인 브러시로 특정 색깔을 이용해서 선 사이의 공간이 이미지 혹은 다양한 형태의 도형의 내부를 채울 때 사용한다.

///////// 예제 코드//////////////////////////////////////////////////////////////////////

Graphics graphics = this.CreateGraphics();

//this.CreateGraphics(): 해당컨트롤에대한Graphics를만든다.

SolidBrush sbrush = new SolidBrush(Color.Red);

graphics.FillRectangle(sbrush, 0, 0, 100, 100);

 

/*오버로드3번째인자값내용들

첫번째: 채우기의특징을결정하는브러시입니다

두번째: 채울사각형을나타내는Rectangle구조체입니다

세번째: 채울사각형의왼쪽위모퉁이에대한Y좌표입니다

네번째: 채울사각형의너비입니다

다섯번째: 채울사격형의높이입니다.*/

/////////////////////////////////////////////////////////////////////////////////////////

 ▶ HatchBrush

   ☞ System.Drawing.Drawing2D 네임스페이스 내에 포함되어 있는 HatchBrush는 HatchStyle 열거형에 있는 값 중 하나로 표현된 다양한 형태를 이용하여 특정 부분을 채울 때 사용한다.

 ※ 대표적인 Hatch 무늬값

 열거형 값

 설명 

 BackwardDiagonal 오른쪽 위에서 왼쪽 아래로 사선이 그어진 형태의 브러시
 Cross  수직선과 수평선의 겹친 바둑판 형태의 선이 그어진 브러시
 ForwardDiagonal   왼쪽 위에서 오른쪽 아래로 사선이 그어진 형태의 브러시
 Horizontal  수평선이 그어진 브러시
 Vertical  수직선이 그어진 브러시

///////// 예제 코드/////////////////////////////////////////////////////////////////////

using System.Drawing.Drawing2D;

Graphics graphics = this.CreateGraphics();

HatchBrush hbrush = new HatchBrush(HatchStyle.Cross, Color.Red, Color.Blue);

/* HatchBrush의 특징 중에 하나는 위와 같이 두개의 색을 쌍으로 사용하는 것이다.(앞의 것은 전경색,뒤에 것은 배경색으로 사용)

graphics.FillRectangle(hbrush, 0, 0, 100, 100);

/////////////////////////////////////////////////////////////////////////////////////////

 ▶ TextureBrush

   ☞ TextureBrush는 패턴으로 이미지를 사용한다. 비트맥 이미지에 브러시를 사용하여 채우기 (Fill) 작업을 할때 사용하는 것이다.

///////// 예제 코드/////////////////////////////////////////////////////////////////////

TextureBrush BGTextureBrush = new TextureBrush("bgimage.bmp");

TextureBrush TXTTextureBrush = new TextureBrush("txtimage.bmp");

Graphics g = this.CreateGraphics();

Rectangle r = new Rectangle(10, 10, 150, 150);

Font font = new Font("Arial", 60, FontStyle.Bold | FontStyle.Italic);

 

g.FillRectangle(BGTextureBrush, r);

g.DrawString("Hello world~", font, TXTTextureBrush, r);

/////////////////////////////////////////////////////////////////////////////////////////

 ▶ LinearGradientBrush

   ☞ 그라데이션 효과를 나타내기 위해 두가지 색을 부드럽게 혼합하여 모양을 채울때 LinearGradienBrush를 사용한다.

※ LinearGradientBrush 열거형

 열거형 값

 설명

 BackwardDiagonal   오른쪽 위에서 왼쪽 아래로 그라데이션 효과를 준다.
 ForwardDiagonal  왼쪽 위에서 오른쪽 아래로 그라데이션 효과를 준다.
 Horizontal  수평으로 그라데이션 효과를 준다.
 Vertical  수직으로 그라데이션 효과를 준다.


///////// 예제 코드/////////////////////////////////////////////////////////////////////

using System.Drawing.Drawing2D;

Graphics graphics = this.CreateGraphics();

LinearGradientBrush lgbrush = new LinearGradientBrush(ClientRectangle, Color.Red, Color.Yellow, LinearGradientMode.Vertical);

graphics.FillRectangle(lgbrush, 10, 10, 200, 200);

/////////////////////////////////////////////////////////////////////////////////////////

★ 그라데이션 ★--------------------------------------------------- 그라데이션이란 그래픽의 기법으로 한 색상에서 다른 색상으로 또는 어두운 데
에서 밝은 값으로, 거친 질감에서 매끈한 질감으로 등과 같이 점진적으로 변화하
는 것을 말한다.
-----------------------------------------------------------------

- 참고 서적 : C# 게임 프로그래밍 -

Posted by happydong
, |



ㅁ 펜 다루기


 선을 그리거나 모양의 윤곽을 그리고 기타 기하학적 표시를 렌더링(Rendering)하는데 사용한다.

아래 코드는 펜 객체 사용예제이다.
////////////////////////////////////////////////////////////////////////////////

Pen pen = new Pen(Color.Black);

Pen pen = new Pen(Color.Black, 10);

////////////////////////////////////////////////////////////////////////////////

위 코드는 펜촉의 너비와 처음 색상을 정해주는 코드이다.

Pen의 대부분 기능은 지원하는 속성에 따라 다양한 설정이 가능하다. (아래표 참고)

 속성

 설명

 Alignment  Pen 개체의 맞춤을 가져오거나 설정한다(PenAlignment 열거형).
 Brush  Pen 개체의 특성을 결정하는 Brush 개체를 가져오거나 설정한다.
 Color  Pen 개체의 색을 가져오거나 설정한다.
 CompoundArray  복합 펜을 지정하는 배열 값을 가져오거나 설정한다. 복합 펜은 평행선과 공백으로 이루어진 복합 선을 그린다.
 CustomEndCap  Pen 개체를 사용하여 그리는 선의 끝에 사용할 사용자 정의 캡을 가져오거나 설정한다.
 CustomStartCap  Pen 개체를 사용하여 그리는 선의 시작에서 사용할 사용자 정의 캡을 가져오거나 설정한다.
 DashCap  Pen 개체를 사용하여 그리는 파선을 구성하는 대시의 끝에 사용되는 캡 스타일을 가져오거나 설정한다.
 DashOffset  선의 시작에서 대시 패턴의 시작까지의 거리를 가져오거나 설정한다.
 DashPattern  사용자 정의 대사와 공백의 배열을 가져오거나 설정한다.
 DashStyle  Pen 개체를 사용하여 그리는 파선에 사용될 스타일을 가져오거나 설정한다.
 LineJoin  Pen 개체를 사용하여 그리는 두 개의 연속선의 끝에 사용되는 결합 스타일을 가져오거나 설정한다.
 PenType  Pen 개체를 사용하여 그려지는 선의 스타일을 가져온다.
 StartCap  Pen 개체를 사용하여 그리는 선의 시작에 사용되는 캡 스타일을 가져오거나 설정한다.
 EndCap  Pen 개체를 사용하여 그리는 선의 끝에 사용되는 캡 스타일을 가져오거나 설정한다.
 Width  Pen 개체의 너비를 가져오거나 설정한다.


- 참고 서적 : C# 게임 프로그래밍 -

Posted by happydong
, |