Make Custom Layout forms

If you want develop the desktop application and replace the default windows form with your own custom layout. Here's the tutorial how to make a custom layout and make it as your template form.
First this custom layout using Microsoft Visual Studio Enterprise 2015 and Visual Basic.Net as programming language.

<h2>Installation <p dir="auto">to make the custom layout we need a project, we can create new project on visual studio and put project folder anywhere on your drive. in this case I put the project folder to drive <code>X:\Tutorial\Desktop\CustomLayout and <b>CustomLayout as project solution name.<br /><br /><br /> <br /><br /> And now we have a project with a blank windows form.<br /><br /><br /> <br /><br /> Here we start setting this blank windows form properties. you can see properties with right click on the blank windows form and then select properties. so, properties tab will be shown. in this properties we need disable default windows form layout. change <b>BackColor to <b>LightGray and change <b>FormBorderStyle value to <b>None<br /><br /><br /> <br /><br /> so, the border of windows form will be remove. and now we start customize the layout.<br /> we need some toolbox:<span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514692712/ptefdfd2ft82uc1hm9mj.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514692712/ptefdfd2ft82uc1hm9mj.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514692712/ptefdfd2ft82uc1hm9mj.png 2x" /><span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514692777/n96fdvg7kyn4yjn6oqwf.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514692777/n96fdvg7kyn4yjn6oqwf.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514692777/n96fdvg7kyn4yjn6oqwf.png 2x" /><span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514693156/oadknzjq9utmje69ix6b.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514693156/oadknzjq9utmje69ix6b.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514693156/oadknzjq9utmje69ix6b.png 2x" /> <li>Panel We can add panel from Toolbox tab and search panel then put into the form<br /><br /> This panel will use as a header of windows form. we need config the properties in this case I change the <b>BackColor to <b>DimGray and you can resizing of size or another properties if you need. here's the panel toolbox.<br /><b>Anchor to <b>Top, Left, Right<br /><br /> <li>PictureBox In Toolbox tab search picture box and put in to the form.<br /><br /> The PictureBox will be use to initialize an image or icon on layout form. Image can be upload from the picturebox properties. click button image on the properties to upload a image and we can import the image to the resource of project.<br /><br /> <li>Label We need label to make a title on header form. put in label into form and change <b>Text value to <b>Custom Layout Form on the properties.<br /><br /> <li>Button In this case we need 3 button to trigger the minimize, maximize and close the form. now we put 3 button into from and config properties every button. Button1 we initialize as minimize button and we config the properties like this:<br /><br /> Button2 we initialize as maximize button and we config the properties like this:<br /><br /> then Button3 we initialize as close button and we config like this:<br /><br /> And we need config Button1, Button2, Button3 properties with the same config. change the <b>Anchor value to <b>Top,Right This configuration to make the button flexible when the form size changes<br /><br /> Okay, Now we can design the position of all toolbox with this design:<br /><br /> After design finish. now time to code every toolbox. On the design form right click and click view code or you can press F7 on your keyboard. First we need initialize public variable:<br /> <pre><code> Public Class Form1 Dim Xpos As New Integer Dim Ypos As New Integer Dim pos As New Point End Class <br /> Then we can make 2 function on Panel, PictureBox and Label to make form can move with click the header form.<br /> <pre><code> Public Class Form1 Dim Xpos As New Integer Dim Ypos As New Integer Dim pos As New Point <br /> Private Sub Panel1_MouseDown(sender As Object, e As MouseEventArgs) Handles Panel1.MouseDown, Label1.MouseDown, PictureBox1.MouseDown Xpos = Cursor.Position.X - Me.Location.X Ypos = Cursor.Position.Y - Me.Location.Y End Sub Private Sub Panel1_MouseMove(sender As Object, e As MouseEventArgs) Handles Panel1.MouseMove, Label1.MouseMove, PictureBox1.MouseMove If e.Button = MouseButtons.Left Then pos = MousePosition pos.X = pos.X - Xpos pos.Y = pos.Y - Ypos Me.Location = pos End If End Sub End Class <br /> And then we need code to minimize, maximize and close button. Here's fully structure code:<br /> <pre><code> Public Class Form1 Dim Xpos As New Integer Dim Ypos As New Integer Dim pos As New Point <br /> Private Sub Panel1_MouseDown(sender As Object, e As MouseEventArgs) Handles Panel1.MouseDown, Label1.MouseDown, PictureBox1.MouseDown Xpos = Cursor.Position.X - Me.Location.X Ypos = Cursor.Position.Y - Me.Location.Y End Sub <br /> Private Sub Panel1_MouseMove(sender As Object, e As MouseEventArgs) Handles Panel1.MouseMove, Label1.MouseMove, PictureBox1.MouseMove If e.Button = MouseButtons.Left Then pos = MousePosition pos.X = pos.X - Xpos pos.Y = pos.Y - Ypos Me.Location = pos End If End Sub <br /> Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click Me.WindowState = FormWindowState.Minimized End Sub <br /> Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click If Me.WindowState = FormWindowState.Normal Then Me.WindowState = FormWindowState.Maximized Else Me.WindowState = FormWindowState.Normal End If End Sub <br /> Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click Me.Close() End Sub End Class <br /> Final Words We are finish the customize layout form. This custom layout can reused to another form, you can more explore to customize the layout form as you prefers. the best thing to do is just to play around. If you want download this repository check <a target="_blank" href="https://github.com/riyos94/CustomLayout" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Here <br /> Regards<br /><br /> <br /><hr /><em>Posted on <a href="https://utopian.io/utopian-io/@riyo.s94/make-custom-layout-forms" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Utopian.io - Rewarding Open Source Contributors<hr /><span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695697/geahpxut7nswjpzbpo0a.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695697/geahpxut7nswjpzbpo0a.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695697/geahpxut7nswjpzbpo0a.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695720/rpn2drobm6denyiuohl1.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695720/rpn2drobm6denyiuohl1.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695720/rpn2drobm6denyiuohl1.png 2x" /> And we need config the <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697987/kxzhkhipk34pcroibac6.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697987/kxzhkhipk34pcroibac6.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697987/kxzhkhipk34pcroibac6.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695815/l7ktwpodkx2plxpkj6eq.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695815/l7ktwpodkx2plxpkj6eq.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514695815/l7ktwpodkx2plxpkj6eq.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514696062/qqg96ywwnidhnn7bkk9s.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514696062/qqg96ywwnidhnn7bkk9s.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514696062/qqg96ywwnidhnn7bkk9s.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514696620/uvjrtatgzumsx4dstton.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514696620/uvjrtatgzumsx4dstton.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514696620/uvjrtatgzumsx4dstton.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697014/zbvq5hdnpa5oslgw57pu.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697014/zbvq5hdnpa5oslgw57pu.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697014/zbvq5hdnpa5oslgw57pu.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697246/gjtivcsidbj0nahpwls7.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697246/gjtivcsidbj0nahpwls7.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697246/gjtivcsidbj0nahpwls7.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697666/yeltodjedtdfqqyibijs.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697666/yeltodjedtdfqqyibijs.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514697666/yeltodjedtdfqqyibijs.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514698203/exd6z26lawujgyp96ldn.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514698203/exd6z26lawujgyp96ldn.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514698203/exd6z26lawujgyp96ldn.png 2x" /> <span> <img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514698307/ot40pnes2ku7s3pinkvi.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514698307/ot40pnes2ku7s3pinkvi.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514698307/ot40pnes2ku7s3pinkvi.png 2x" /> <span> <a href="/@riyo.s94">@riyo.s94