C# - Custom Interface from Image

Question

I'm creating a WinForm program in C# and I want to customize its skin or interface using PNG or other image files. I'm not only concerned at the buttons but also its background, progress bar, and other few controls. I realize from most of my research that TransparentKey is used for an irregular shape form then panel supports PNG transparency.

My question: I was wondering if there's a better way, the actual and recommended way, to implement the custom interface for my program.

My current code uses the BackgroundImage property to replace the image. Yet I do believe this is not the way I should be implementing this.

Here's a piece my current code:

public List<Image> BaseImage = new List<Image>();
public List<Image> ClickedImage = new List<Image>();
public List<object> ControlAction = new List<object>();
public List<Image> HoverImage = new List<Image>();
private int counter = 0;

public Control CreatePanel(Image BaseImage, Image HoverImage, Image ClickedImage,
    string Name, int x, int y, ButtonAction action)
{
                this.BaseImage.Add(BaseImage);
                this.HoverImage.Add(HoverImage);
                this.ClickedImage.Add(ClickedImage);
                int width = BaseImage.Width;
                int height = BaseImage.Height;


                Actions Action = new Actions();
                EventHandler SelectedAction = null;

                switch (action)
                {
                    case ButtonAction.Cancel:
                        SelectedAction = Action.Cancel;
                        break;

                    case ButtonAction.Exit:
                        SelectedAction = Action.Exit;
                        break;

                    case ButtonAction.Minimize:
                        SelectedAction = Action.Minimize;
                        break;

                    case ButtonAction.Open:
                        SelectedAction = Action.Open;
                        break;

                    case ButtonAction.Pause:
                        SelectedAction = Action.Pause;
                        break;

                    case ButtonAction.Start:
                        SelectedAction = Action.Start;
                        break;
                }


                Simplify.Invoke(() =>
                {
                    this.newPanel.SuspendLayout();

                this.newPanel.Location = new System.Drawing.Point(x, y);
                this.newPanel.Name = Name;
                this.newPanel.TabIndex = counter;
                this.newPanel.Size = new System.Drawing.Size(width, height);
                this.newPanel.BackColor = Color.FromArgb(0, 255, 255, 255);
                this.newPanel.BackgroundImage = this.BaseImage[counter];

                this.newPanel.Click += new EventHandler(SelectedAction);
                this.newPanel.MouseEnter += new EventHandler(PanelHover);
                this.newPanel.MouseDown += new MouseEventHandler(PanelClicked);
                this.newPanel.MouseLeave += new EventHandler(PanelLeave);

                this.newPanel.ResumeLayout(false);
                    });

                ControlAction.Add(action);
                counter += 1;

    return newPanel;
}

private void PanelClicked(object sender, MouseEventArgs e)
{
                this.newPanel.SuspendLayout();
                this.newPanel.BackColor = Color.FromArgb(0, 255, 255, 255);
                this.newPanel.BackgroundImage = ClickedImage[newPanel.TabIndex];
                this.newPanel.Size = new Size(ClickedImage[newPanel.TabIndex].Width, ClickedImage[newPanel.TabIndex].Height);
                this.newPanel.ResumeLayout(false);
}

private void PanelHover(object sender, EventArgs e)
{
                    this.newPanel.SuspendLayout();
                    this.newPanel.BackColor = Color.FromArgb(0, 255, 255, 255);
                    this.newPanel.BackgroundImage = HoverImage[newPanel.TabIndex];
                    this.newPanel.Size = new Size(HoverImage[newPanel.TabIndex].Width, HoverImage[newPanel.TabIndex].Height);
                    this.newPanel.ResumeLayout(false);
}

private void PanelLeave(object sender, EventArgs e)
{
                    this.newPanel.SuspendLayout();
                    this.newPanel.BackColor = Color.FromArgb(0, 255, 255, 255);
                    this.newPanel.BackgroundImage = BaseImage[newPanel.TabIndex];
                    this.newPanel.Size = new Size(BaseImage[newPanel.TabIndex].Width, BaseImage[newPanel.TabIndex].Height);
                    this.newPanel.ResumeLayout(false);
}

My code above creates a Panel which functions as a button. Its action is taken from a class called Actions which basically just assign the method to be assigned when the user clicks it. I change the control state by replacing its BackgroundImage, at the same time changing its size to avoid getting cropped area.

Thanks in advance.

Additional Information - I'm using .NET Framework 2.0

Answer 1

My question: I was wondering if there's a better way, the actual and recommended way, to implement the custom interface for my program.

I would recommend using WPF (Windows presentation foundation). It offers highly customizable controls and also supports hardware accelerated graphics.

With winforms, you will get flickering screen, issues with resize and redraw which you will not face with wpf.