다음을 통해 공유


방법: 사용자 지정 이미지 단추 컨트롤 만들기

업데이트: 2007년 11월

이미지를 포함하는 단추를 만들려면 Windows Forms Control 클래스에서 파생되는 사용자 지정 컨트롤을 만들어야 합니다.

이미지를 포함하는 단추를 만들려면

  1. System.Windows.Forms.Control 클래스에서 파생되는 클래스를 만듭니다.

  2. 누름 상태 여부를 표시하는 단추 이미지에 대한 속성을 이 클래스에 정의합니다.

  3. Invalidate 메서드를 사용하여 단추가 클릭되면 폼을 다시 그리도록 설정합니다.

  4. OnPaint 메서드를 재정의하여 이미지를 포함하는 사용자 지정 컨트롤을 그립니다.

예제

이 예제에는 PictureButton 사용자 지정 컨트롤을 정의하는 클래스가 포함되어 있습니다. 이 클래스는 폼에 컨트롤 인스턴스를 만들고 컨트롤에서 사용하는 비트맵을 정의합니다.

Imports System
Imports System.Drawing
Imports System.Windows.Forms

Public Class PictureButtonDemo
    Inherits System.Windows.Forms.Form

    Friend WithEvents PictureButton1 As New PictureButton

    Public Sub New()

        ' Display the OK close button.
        Me.MinimizeBox = False
        Me.Text = "Picture Button Demo"

        ' Create an instance of the PictureButton custom control.
        With PictureButton1
            .Parent = Me
            .Bounds = New Rectangle(10, 30, 150, 30)
            .ForeColor = Color.White
            .BackgroundImageValue = MakeBitmap(Color.Blue, _
                PictureButton1.Width, PictureButton1.Height)
            .PressedImageValue = MakeBitmap(Color.LightBlue, _
                PictureButton1.Width, PictureButton1.Height)
            .Text = "Click Me"
        End With
    End Sub

    ' Clean up any resources being used.
    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
        MyBase.Dispose(disposing)
    End Sub

    ' Create a bitmap object and fill it with the specified color.   
    ' To make it look like a custom image, draw an ellipse in it.
    Function MakeBitmap(ByVal ButtonColor As Color, ByVal width As Integer, _
        ByVal height As Integer) As Bitmap

        Dim bmp As New Bitmap(width, height)
        Dim g As Graphics = Graphics.FromImage(bmp)
        g.FillRectangle(New SolidBrush(ButtonColor), 0, 0, bmp.Width, bmp.Height)
        g.DrawEllipse(New Pen(Color.LightGray), 3, 3, width - 6, height - 6)
        g.Dispose()

        Return bmp
    End Function

    Shared Sub Main()
        Application.Run(New PictureButtonDemo)
    End Sub

    ' Because PictureButton inherits from Control, 
    ' you can use the default Click event.
    Private Sub PictureButton1_Click(ByVal sender As Object, ByVal e As EventArgs) _
        Handles PictureButton1.Click

        'Add code here to respond to button click. 

    End Sub

End Class

'Button with an image custom control.
Public Class PictureButton
    Inherits Control

    Private backgroundImg As Image
    Private pressedImg As Image
    Private pressed As Boolean = False

    ' Property for the background image to be drawn behind the button text.
    Public Property BackgroundImageValue() As Image
        Get
            Return Me.backgroundImg
        End Get
        Set(ByVal Value As Image)
            Me.backgroundImg = Value
        End Set
    End Property

    ' Property for the background image to be drawn behind the button text when
    ' the button is pressed.
    Public Property PressedImageValue() As Image
        Get
            Return Me.pressedImg
        End Get
        Set(ByVal Value As Image)
            Me.pressedImg = Value
        End Set
    End Property

    ' When the mouse button is pressed, set the "pressed" flag to true
    ' and ivalidate the form to cause a repaint.  The .NET Compact Framework
    ' sets the mouse capture automatically.
    Protected Overrides Sub OnMouseDown(ByVal e As MouseEventArgs)
        Me.pressed = True
        Me.Invalidate()
        MyBase.OnMouseDown(e)
    End Sub

    ' When the mouse is released, reset the "pressed" flag
    ' and invalidate to redraw the button in the unpressed state.
    Protected Overrides Sub OnMouseUp(ByVal e As MouseEventArgs)
        Me.pressed = False
        Me.Invalidate()
        MyBase.OnMouseUp(e)
    End Sub 

    ' Override the OnPaint method to draw the background image and the text.
    Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
        If Me.pressed AndAlso (Me.pressedImg IsNot Nothing) Then
            e.Graphics.DrawImage(Me.pressedImg, 0, 0)
        Else
            e.Graphics.DrawImage(Me.backgroundImg, 0, 0)
        End If

        ' Draw the text if there is any.
        If Me.Text.Length > 0 Then
            Dim size As SizeF = e.Graphics.MeasureString(Me.Text, Me.Font)

            ' Center the text inside the client area of the PictureButton.
            e.Graphics.DrawString(Me.Text, Me.Font, New SolidBrush(Me.ForeColor), _
                (Me.ClientSize.Width - size.Width) / 2, _
                (Me.ClientSize.Height - size.Height) / 2)
        End If

        ' Draw a border around the outside of the   
        ' control to look like Pocket PC buttons.
        e.Graphics.DrawRectangle(New Pen(Color.Black), 0, 0, _
            Me.ClientSize.Width - 1, Me.ClientSize.Height - 1)

        MyBase.OnPaint(e)
    End Sub
End Class
using System;
using System.Drawing;
using System.Windows.Forms;

namespace PictureButton
{
    public class PictureButtonDemo : System.Windows.Forms.Form
    {
        int clickCount = 0;

        // Create a bitmap object and fill it with the specified color.   
        // To make it look like a custom image, draw an ellipse in it.
        Bitmap MakeBitmap(Color color, int width, int height)
        {
            Bitmap bmp = new Bitmap(width, height);
            Graphics g = Graphics.FromImage(bmp);
            g.FillRectangle(new SolidBrush(color), 0, 0, bmp.Width, bmp.Height);
            g.DrawEllipse(new Pen(Color.DarkGray), 3, 3, width - 6, height - 6);
            g.Dispose();

            return bmp;
        }

        // Create a new PictureButton control and hook up its properties.
        public PictureButtonDemo()
        {
            InitializeComponent();

            // Display the OK close button.
            this.MinimizeBox = false;

            PictureButton button = new PictureButton();
            button.Parent = this;
            button.Bounds = new Rectangle(10, 30, 150, 30);
            button.ForeColor = Color.White;
            button.BackgroundImage = MakeBitmap(Color.Blue, button.Width, button.Height);
            button.PressedImage = MakeBitmap(Color.LightBlue, button.Width, button.Height);
            button.Text = "click me";
            button.Click +=new EventHandler(button_Click);
        }

        protected override void Dispose( bool disposing )
        {
            base.Dispose( disposing );
        }

        private void InitializeComponent()
        {
            this.Text = "Picture Button Demo";
        }

        static void Main() 
        {
            Application.Run(new PictureButtonDemo());
        }

        // Since PictureButton inherits from Control, we can just use the default
        // Click event that Control supports.
        private void button_Click(object sender, EventArgs e)
        {
            this.Text = "Click Count = " + ++this.clickCount;
        }
    }

    // This code shows a simple way to have a 
    // button-like control that has a background image.
    public class PictureButton : Control
    {
        Image backgroundImage, pressedImage;
        bool pressed = false;

        // Property for the background image to be drawn behind the button text.
        public Image BackgroundImage
        {
            get
            {
                return this.backgroundImage;
            }
            set
            {
                this.backgroundImage = value;
            }
        }

        // Property for the background image to be drawn behind the button text when
        // the button is pressed.
        public Image PressedImage
        {
            get
            {
                return this.pressedImage;
            }
            set
            {
                this.pressedImage = value;
            }
        }

        // When the mouse button is pressed, set the "pressed" flag to true 
        // and invalidate the form to cause a repaint.  The .NET Compact Framework 
        // sets the mouse capture automatically.
        protected override void OnMouseDown(MouseEventArgs e)
        {
            this.pressed = true;
            this.Invalidate();
            base.OnMouseDown (e);
        }

        // When the mouse is released, reset the "pressed" flag 
        // and invalidate to redraw the button in the unpressed state.
        protected override void OnMouseUp(MouseEventArgs e)
        {
            this.pressed = false;
            this.Invalidate();
            base.OnMouseUp (e);
        }

        // Override the OnPaint method to draw the background image and the text.
        protected override void OnPaint(PaintEventArgs e)
        {
            if(this.pressed && this.pressedImage != null)
                e.Graphics.DrawImage(this.pressedImage, 0, 0);
            else
                e.Graphics.DrawImage(this.backgroundImage, 0, 0);

            // Draw the text if there is any.
            if(this.Text.Length > 0)
            {
                SizeF size = e.Graphics.MeasureString(this.Text, this.Font);

                // Center the text inside the client area of the PictureButton.
                e.Graphics.DrawString(this.Text,
                    this.Font,
                    new SolidBrush(this.ForeColor),
                    (this.ClientSize.Width - size.Width) / 2,
                    (this.ClientSize.Height - size.Height) / 2);
            }

            // Draw a border around the outside of the 
            // control to look like Pocket PC buttons.
            e.Graphics.DrawRectangle(new Pen(Color.Black), 0, 0, 
                this.ClientSize.Width - 1, this.ClientSize.Height - 1);

            base.OnPaint(e);
        }
    }
}

코드 컴파일

이 예제에는 다음과 같은 네임스페이스에 대한 참조가 필요합니다.

참고 항목

개념

사용자 지정 컨트롤 개발

기타 리소스

.NET Compact Framework의 Windows Forms 컨트롤