C# – Outlook Dashboard Concept

Outlook 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 (0, 118, 212).
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 select the right panel and set the padding property to left to Zero (0) and 6 for other ends.
10. Now add a GunaButton control from toolbox and change the following properties, FillColor: 0, 118, 212; Checked: True; BorderRadius: 22; Size: 149, 43; ButtonMode: RadioButton.
11. Change the image of Button and also set the checked properties. Set the BackColor to Transparent and place this button in left panel.
12. 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.
13. Select the Buttons and goto onCheckedChange event and add the following Code:

using Guna.UI2.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace OutlookDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void moveImageBox(object sender)
        {
            Guna2Button b = (Guna2Button)sender;
            imgSlide.Location = new Point(b.Location.X + 118, b.Location.Y - 30);
            imgSlide.SendToBack();
        }
        private void guna2Button1_CheckedChanged(object sender, EventArgs e)
        {
            moveImageBox(sender);
        }

        private void guna2Button6_Click(object sender, EventArgs e)
        {
            Application.Exit();
        }
    }
}

14. Create two user controls, one for Inbox and the other one is for Chat instance.

Video Tutorial:

Watch a full video tutorial to learn how to design that user controls and forms in visual studio.

Source Code:

I hope you enjoyed this tutorial. Please don’t forget to subscribe to our Official YouTube Channel C# Ui Academy.