WebBrowser 컨트롤 사용법[0]

이번에는 WebBrowser 컨트롤을 이용해서 나만의 웹 브라우저를 만들어보겠습니다.

 

이번 포스팅에서는 UI 구성에 대해서 자세히 다루어 보고 다음 포스팅은 기능 구현에 중점을 두고 정리해보도록 하겠습니다.

 

우리가 만들어볼 WebBrowser는 크롬 브라우저나 엣지 브라우저처럼 상단에 주소창을 입력하고 이전 페이지, 다음 페이지 등 몇 가지 내비게이션 버튼을 추가하여 나만의 웹브라우저를 완성해 보는 것입니다.

 

UI는 아래와 같이 구성해 줍니다.

상단에 내비게이션 툴바가 있고 나머지는 webBrowser 컨트롤로 채워주었습니다.

 

그럼 실제 브라우저 구현을 위해 솔루션을 만들어보겠습니다.

솔루션은 MyWebBrowser입니다.

먼저 WinForm에 다음과 같이 컨트롤들을 구성합니다.

도구상자에서 ToolStrip 컨트롤을 가장 상단에 배치해줍니다.

다음은 웹 화면을 띄워줄 WebBrowser 컨트롤을 하단에 배치시켜 줍니다. ToolStrip 컨트롤의 Dock 속성은 Top으로 맞춰주고 WebBrowser Dock 속성은 Fill로 맞춰주면 간단히 브라우저 화면을 구성할 수 있습니다.

 

다음은 ToolStrip 바에 버튼을 차례로 삽입해 줍니다.

ToolStrip바에서 아래와 같이 콤보 버튼을 클릭해 주면 ToolStrip 바에 삽입할 수 있는 컨트롤들이 나타나며, 여기에서는 내비게이션용 버튼 4개, 입력 주소창으로 사용할 TextBox 1개, 실행 버튼 1개를 차례로 넣어줍니다.

다음으로 삽입한 버튼에 이미지를 넣어줍니다.

이미지는 속성에서 아래와 같이 오른쪽 끝의 [...] 아이콘을 클릭해주면 이미지를 가져올 수 있는 창이 열립니다.

 

이미지를 가져올 수 있는 창이 아래와 같이 열리면 가져오기 버튼을 클릭하고 필요한 이미지를 선택해 줍니다.

여기에서는 미리 준비해 둔 화살표 이미지와 실행 이미지, 중지 이미지, 리플래쉬 이미지 등을 삽입해 주었습니다.

완성된 툴바의 형태는 아래와 같습니다.

이제 어느 정도 UI 형태가 완성되었습니다.

 

이제 기능을 수행할 함수 처리기를 등록할 차례입니다.

위의 ToolStrip의 각 버튼을 각각 더블클릭해 주면 자동으로 버튼 처리기 함수가 생성됩니다.

// 페이지 뒤로 가기
private void toolStripButton1_Click(object sender, EventArgs e)
{
}
// 페이지 앞으로 가기
private void toolStripButton2_Click(object sender, EventArgs e)
{
}
// 페이지 이동
private void toolStripButton3_Click(object sender, EventArgs e)
{
}
// 페이지 새로고침
private void toolStripButton4_Click(object sender, EventArgs e)
{
}
// 페이지 정지
private void toolStripButton5_Click(object sender, EventArgs e)
{
}

 

여기까지 UI 구성 및 버튼 처리기 등록에 대해서 알아보았습니다.

다음 포스팅에서는 등록한 버튼 처리기에 기능을 넣고 몇 가지 이벤트 처리기를 추가하여 기능을 구현해보도록 하겠습니다.

감사합니다.