[C# 윈폼] C# 윈폼 Custom으로 그라데이션버튼 (GradientButton) 컨트롤 만들기

안녕하세요.

 

오늘은 C# 윈폼에서 사용자가 직접 Custom으로 그라데이션 효과를 입힐 수 있는 버튼 컨트롤 즉, GradientButton 컨트롤을 만드는 방법에 대해서 알려 드리려고 합니다.

 

바로 예제 프로그램을 통해서 어떻게 GradientButton 컨트롤을 만드는지 알려 드리도록 하겠습니다.

 

먼저, 빈 윈폼 프로젝트를 생성해 주시기 바랍니다.

 

빈 윈폼 프로젝트 생성

그럼 이제 해당 프로젝트에 GradientButton 클래스를 생성해서 해당 클래스의 코드를 작성해 보도록 하겠습니다.

 

GradientButton.cs 클래스 생성 및 예제코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;   namespace CustomGradientButtonTest {     public class GradientButton : Button     {         private Brush gradientBrush;           public GradientButton()         {             handlerGradientChanged = new EventHandler(GradientChanged);             ResizeRedraw = true;         }           private EventHandler handlerGradientChanged;           // encapsulated data         private List<Color> m_clrColors = new List<Color>();         private int m_nTransparency = 64;         private float m_fAngle = 0.0f;           // The properties         // transparency value for the button gradiants         public int Transparency         {             get             {                 return m_nTransparency;             }             set             {                 m_nTransparency = value;                 Invalidate();             }         }           // angle for the gradiant from the x-axis         public float Angle         {             get             {                 return m_fAngle;             }             set             {                 m_fAngle = value;                 Invalidate();             }         }           [DesignerSerializationVisibility(DesignerSerializationVisibility.Content),         EditorAttribute("typeof(CollectionEditor)", "typeof(System.Drawing.Design.UITypeEditor)")]         public List<Color> Colors         {             get             {                 return m_clrColors;             }           }           protected override void OnPaint(PaintEventArgs pe)         {             base.OnPaint(pe);               if (m_clrColors.Count > 1)             {                 float percentage = Convert.ToSingle(ClientRectangle.Width - 2) *  (1.0f / Convert.ToSingle(m_clrColors.Count - 1));                 Brush b;                 RectangleF rectF;                 Color c1;                 Color c2;                   rectF = new RectangleF(new PointF(0.0f, 1.0f),  new SizeF(percentage, ClientRectangle.Height - 2));                 for (int i = 0; i < m_clrColors.Count - 1; i++)                 {                     c1 = Color.FromArgb(m_nTransparency, m_clrColors[i]);                     c2 = Color.FromArgb(m_nTransparency, m_clrColors[i + 1]);                       b =  new System.Drawing.Drawing2D.LinearGradientBrush(rectF, c1, c2, m_fAngle);                     pe.Graphics.FillRectangle(b, rectF);                     rectF.Offset(percentage, 0);                     b.Dispose();                 }             }         }           private void GradientChanged(object sender, EventArgs e)         {             if (gradientBrush != null) gradientBrush.Dispose();             gradientBrush = null;             Invalidate();         }     } }   Colored by Color Scripter

cs

 

위와 같이 GradientButton.cs 의 내용을 다 작성하였다면 프로젝트 한번 전체 빌드를 해 주시기 바랍니다.

 

그러면 다음과 같이 도구상자에 “GradientButton” 컨트롤이 생성된 것을 확인하실 수 있습니다.

 

 

그럼 이제 해당 GradientButton 컨트롤을 처음에 만들었던 윈폼에 배치해 주시기 바랍니다.

 

그리고 버튼 속성에서 Colors 배열을 선택해서 그라데이션 입힐 색상을 아래와 같이 선택해 주시기 바랍니다.

 

그라데이션 컬러 선택

위와 같이 설정을 하시게 되면, Button 컨트롤이 아래와 같이 그라데이션 효과가 적용된 것을 확인하실 수 있습니다.

 

실행 결과

 

이로써, 오늘은 GradientButton 컨트롤을 사용자가 직접 Custom하여 만들어 보는 방법에 대해서 알아 보았습니다.

 

감사합니다.^^