Step by step - How to create a modern Sign In / Sign Up form - Bunifu Framework | Empowering software developers craft great user experiences in less time. Productivity tools for C# & VB.NET UX/UI design

Step by step – How to create a modern Sign In / Sign Up form

Animated sliding menu - modern flat
Step by step – how to create beautiful sliding menu using transition control
April 26, 2017
Modern flat gradient UI
Step by step – Beautiful slide menu with gradient
May 1, 2017
Show all

Step by step – How to create a modern Sign In / Sign Up form

In this article we will see how can we create a modern Sign In / Sign Up form using Bunifu UI. Let’s see how!

First, create a Windows Forms application, add a Bunifu Ellipse on the main form and set it’s BackColor to 36, 49, 60. You’ll get that color:

Now add 3 BunifuThinButtons, set their corner radius and their idle fill color to match that one (the green color is 26, 177, 136):

Let’s see how the Sign In form looks like (using Bunifu Metro Text Box):

As you can see, there is just an eye for design. The form for the Sign In is similar to this one:

Let’s see how we can switch from a panel to the other! First, make sure that the panels are arranged in this way:

In order to switch between them when pressing on the upper buttons, let’s handle their event handlers and put the following code into them:

<br />
private void bunifuThinButton22_Click(object sender, EventArgs e)<br />
{<br />
   panel1.Visible = true;<br />
   panel2.Visible = false;<br />
   panel1.Left = 41;<br />
}</p>
<p>private void bunifuThinButton21_Click(object sender, EventArgs e)<br />
{<br />
   panel2.Visible = true;<br />
   panel1.Visible = false;<br />
   panel2.Left = 41;<br />
}<br />

Panel 1 is the left one and Panel2 is the right one. Just test it and see it working. Remember that in designer you should decrease the width of the outer panel to be visible only the panel 1:

 

In order to see it in action, please check out this video.

I hope you will find the helpful. Leave us some comments and share 🙂

Amos Chepchieng
Amos Chepchieng
Software Developer, Bunifu Framework

Leave a Reply

Your email address will not be published. Required fields are marked *