본문 바로가기
Education/Bit 18th

[Windows Mobile] 초보용팁 - 사용자 정의 컨트롤로 이미지 버튼 만들기

by ★용호★ 2009. 12. 6.

개발환경
Visual Studio 2008
C#


이번 시간에는 일반 버튼을 대신해 이미지 버튼을 사용하는 법을 알아보겠습니다.

디자인을 중시하는 시대에 일반 버튼만 사용한다면 사용자로부터 식상하다는 느낌을 줄 수도 있을 것입니다.
?

.Net CF의 버튼 컨트롤에는 백그라운드를 지정할 속성이 없기 때문에
사용자 정의 컨트롤을 이용해서 제작합니다.

System.Windows.FormsControl 을 상속받아 Opaint 메소드를 오버라이드 하는 방식으로 제작하겠습니다.


우선 버튼으로 사용할 이미지가 필요할 것입니다.

포토샵 등으로 스스로 제작할 수도 있겠지만
시간이 없는 분들은 아래 링크로 가면 무료 버튼 이미지들을 다운 받을 수 있습니다.

무료이지만 다양한 이미지들을 제공하므로 간단한 프로그램에는 유용하게 쓰일 수 있을 것입니다.

http://www.axialis.com/objects/ 









Visual Sutudio로 돌아와서
사용자 정의 클래스를 작성 합니다.

System.Windows.Forms.Control 을 상속받아 OnPaint 메소드를 재정의 합니다.

   public class ImageButton : System.Windows.Forms.Control
        {
            Image image;

            public Image BackImage
            {
                get
                {
                    return this.image;
                }

                set
                {
                    this.image = value;
                }

            }

           
            protected override void OnPaint(PaintEventArgs e)
            {
                if (image != null)
                {
                    e.Graphics.DrawImage(image, 0, 0);
               }

                base.OnPaint(e);
            }

        }



폼의 생성자 함수를 정의 합니다.

이미지 파일 2개를 이용해서 버튼을 구현 하겠습니다.
버튼에 들어갈 이미지의 경로와  폼에서의 위치, 크기, 클릭시의 이벤트 핸들러 등을 지정해 줍니다.

테스트를 위해 에뮬레이터의 Temp 폴더에 미리 적당한 크기의 이미지 파일을 복사해 두었습니다.

실제 개발시에는 이미지파일을 첨부해서 빌드하면 되겠죠.


  public Form1()
        {
            InitializeComponent();

            Bitmap bitmap = new Bitmap(@"\Temp\Sample.png");
            Bitmap bitmap2 = new Bitmap(@"\Temp\Trash.png");

            ImageButton ibutton = new ImageButton();
            ibutton.Parent = this;
            ibutton.Bounds = new Rectangle(60,150,128,128);

           
            ibutton.BackImage = bitmap;

            ibutton.Click += new EventHandler(ibutton_click);

           
            ImageButton ibutton2 = new ImageButton();

            ibutton2.Parent = this;
            ibutton2.Bounds = new Rectangle(200, 150, 128, 128);

           
            ibutton2.BackImage = bitmap2;

            ibutton2.Click += new EventHandler(ibutton_click);

        }




마지막으로 클릭 이벤트를 정의 합니다.

        private void ibutton_click(object sender, EventArgs e)
        {
            MessageBox.Show("이미지 버튼 클릭");
        }

        private void button1_Click(object sender, EventArgs e)
        {
            MessageBox.Show("일반 버튼 클릭");
        }



테스트 화면 입니다.

에뮬레이터에서 봐도 버튼 이미지의 디자인이 상당히 차이가 납니다.





간단한 테스트긴 하지만 잘 작동 하는걸 볼 수 있습니다.

댓글