C# – YouTube Dashboard Concept for Mac

YouTube Dashboard Concept for Mac implemented in C# by C# Ui Academy. In this demo we will use Guna Ui Framework but you can use any framework with ellipse control or can design your own custom tools for that.

Tools Required:

1. Visual Studio 2010 or latest version.
2. Guna Ui Framework. Get the latest version from their official Website.
3. Icons 8 Desktop Application (Optional) for icons. Download it from Here.

Steps to Follow:

1. Open visual studio and create a new Windows forms application project.
2. Go to the design view of your form Press F4 key to open properties box.
3. Change the AutoScaleMode to None and FormBorderStyle property to None.
4. Change the background colour property to White.
5. Now go to the ToolBox and scroll down to bottom or right click and select Add Tab and name the tab ‘Guna Tools‘.
6. Go to the folder from Windows explorer where your Guna2.DLL file is downloaded.
7. Drag the DLL file and drop it into your ToolBox.
8. Add two panel controls and Dock one to the left and other to Fill.
9. Now add a GunaCustomGradientPanel and go to properties and change the border radius to 18. Change the Fill Color properties to your choice. for this example we’ve used (53,41,123).
10. Add GunaElipse control and go to properties and change TargetControl to name of your form. also change the border radius property to 30.
11. Now add a GunaButton control from toolbox and change the following properties, Border Color: 53,41,123; FillColor: 53,41,123; Checked: True; BorderRadius: 24; Size: 60,65; ButtonMode: RadioButton.
12. Change the image of Button and also set the checked properties. Set the BackColor to Transparent and place this button in Gradient Panel.
13. Add a picture box and place it on right side of panel, this will add a round outer edges to the button. You’ll find the image in the Resources Folder in the Source Code.
14. Select the Buttons and goto onCheckedChange event and add the following Code:

public Form1()
        {
            InitializeComponent();
            UC_Dashboard uC_ = new UC_Dashboard();
            addUserControl(uC_);
        }

        private void moveImageBox(object sender)
        {
            Guna2Button b = (Guna2Button)sender;
            imgSlide.Location = new Point(b.Location.X + 24, b.Location.Y - 25);
            imgSlide.SendToBack();

            
        }


        private void addUserControl(UserControl uc)
        {
            panelContainer.Controls.Clear();
            uc.Dock = DockStyle.Fill;
            uc.BringToFront();
            panelContainer.Controls.Add(uc);
        }
        private void guna2Button1_CheckedChanged(object sender, EventArgs e)
        {
          
            moveImageBox(sender);
          
        }

        private void guna2Button1_Click(object sender, EventArgs e)
        {
            UC_Dashboard uC_ = new UC_Dashboard();
            addUserControl(uC_);
        }

Video Tutorial:

Source Code: