{"id":4048,"date":"2014-01-01T17:31:49","date_gmt":"2014-01-01T09:31:49","guid":{"rendered":"http:\/\/www.vbtutor.net\/?page_id=4048"},"modified":"2018-06-23T10:47:40","modified_gmt":"2018-06-23T02:47:40","slug":"building-a-graphical-user-interface","status":"publish","type":"page","link":"https:\/\/www.vbtutor.net\/index.php\/building-a-graphical-user-interface\/","title":{"rendered":"Visual Basic 2013 Lesson 2: Building the User Interface"},"content":{"rendered":"<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/www.vbtutor.net\/index.php\/introduction-to-vb2013\/\">[Lesson 1]<\/a>\u00a0&lt;&lt;<a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-tutorial\/\">[Contents]<\/a>\u00a0&gt;&gt;<a href=\"http:\/\/www.vbtutor.net\/index.php\/adding-controls-to-the-form\/\">[Lesson 3]<\/a><\/strong><\/h4>\n<p>Since Visual Basic 2013 is a GUI-based programming language, the first step in developing a VB2013 application is to build a graphical user interface. In order to build a graphical user interface, you need to insert controls from the toolbox to the form and then specify their properties.<\/p>\n<p>The default form is also a control by itself, therefore, you can change its properties first before adding additional controls. Having added controls to the form, you then need to write code for each and every control\u00a0so that they can respond to events triggered by the user&#8217;s actions such as clicking the mouse or pressing a key on the keyboard. Therefore, Visual Basic 2013 is also an event-driven programming language. We shall\u00a0learn more about the concept of event-driven programming and coding in later lessons.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"3914691604\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3>2.1 Changing the Properties of the Default-Form on User Interface<\/h3>\n<p>When you start a new Visual Basic 2013 project, the IDE will display the default form along with the Solution Explorer window and the Properties window for the form as shown in Figure 2.1<\/p>\n<p><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4055\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg\" alt=\"vb2013_figure2.1\" width=\"960\" height=\"692\" \/><\/a><\/p>\n<p><strong>\u00a0Figure 2.1: Initial VB2013 IDE<\/strong><\/p>\n<p>The properties window displays all properties related to Form1 and their corresponding attributes or values. You can change the name of the form, the title of the form, the background color, the foreground color, the size and more. Now customize the following properties:<\/p>\n<table>\n<tbody>\n<tr>\n<th>Property<\/th>\n<th>Value<\/th>\n<\/tr>\n<tr>\n<td>Name<\/td>\n<td>MyForm<\/td>\n<\/tr>\n<tr>\n<td>Text<\/td>\n<td>My First Program<\/td>\n<\/tr>\n<tr>\n<td>BackColor<\/td>\n<td>Blue<\/td>\n<\/tr>\n<tr>\n<td>MaximizeBox<\/td>\n<td>False<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The output interface is shown in Figure 2.2. Notice that the title has been changed from Form1 to My First Program, the background changed to blue color and the window cannot be maximized.<\/p>\n<p><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4065\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.2.jpg\" alt=\"vb2013_figure2.2\" width=\"300\" height=\"300\" \/><\/a><br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"3914691604\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p><strong>Figure 2.2<\/strong><\/p>\n<h3>2.2\u00a0Changing the Properties of the Default-Form at Run-Time on User Interface<\/h3>\n<p>You can also change the properties of the form at run-time by writing the relevant codes. The default form is an object and an instant of the form can be denoted by the name<strong> Me.\u00a0<\/strong>The property of the object can be defined by specifying the object&#8217;s name followed by a dot or period:<\/p>\n<p><strong>ObjectName.property<\/strong><\/p>\n<p>For example, we can set the background of the form to blue using the following code<\/p>\n<pre style=\"font-size: 110%;\">Me.BackColor=Color.Blue\r\n<\/pre>\n<p>To achieve the same interface as in Figure 2.2, type in the following code by clicking the form to enter the code window:<\/p>\n<pre style=\"font-size: 110%;\">Public Class Form1\r\nPrivate Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load\r\n Me.Text = \u201cMy First VB2013 Program\u201d\r\n Me.BackColor = Color.Blue\r\n Me.MaximizeBox=False\r\n Me.MinimizeBox = True\r\nEnd Sub\r\nEnd Class\r\n<\/pre>\n<div><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-format=\"autorelaxed\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"2306771905\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/www.vbtutor.net\/index.php\/introduction-to-vb2013\/\">[Lesson 1]<\/a>\u00a0&lt;&lt;<a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-tutorial\/\">[Contents]<\/a>\u00a0&gt;&gt;<a href=\"http:\/\/www.vbtutor.net\/index.php\/adding-controls-to-the-form\/\">[Lesson 3]<\/a><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>[Lesson 1]\u00a0&lt;&lt;[Contents]\u00a0&gt;&gt;[Lesson 3] Since Visual Basic 2013 is a GUI-based programming language, the first step in developing a VB2013 application is to build a graphical user interface. In order to build a graphical user interface, you need to insert controls from the toolbox to the form and then specify their properties. The default form is &hellip; <a href=\"https:\/\/www.vbtutor.net\/index.php\/building-a-graphical-user-interface\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Visual Basic 2013 Lesson 2: Building the User Interface<\/span><\/a><\/p>\n","protected":false},"author":23013,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-4048","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Visual Basic 2013 Lesson 2: Building the User Interface - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB<\/title>\n<meta name=\"description\" content=\"This lesson explain how to design a user interface in visual basic 2013\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Basic 2013 Lesson 2: Building the User Interface - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\" \/>\n<meta property=\"og:description\" content=\"This lesson explain how to design a user interface in visual basic 2013\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Vbtutor\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-23T02:47:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@liewvk\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vbtutor.net\/index.php\/building-a-graphical-user-interface\/\",\"url\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html\",\"name\":\"Visual Basic 2013 Lesson 2: Building the User Interface - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\",\"isPartOf\":{\"@id\":\"https:\/\/www.vbtutor.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg\",\"datePublished\":\"2014-01-01T09:31:49+00:00\",\"dateModified\":\"2018-06-23T02:47:40+00:00\",\"description\":\"This lesson explain how to design a user interface in visual basic 2013\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#primaryimage\",\"url\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg\",\"contentUrl\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg\",\"width\":960,\"height\":692},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vbtutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Basic 2013 Lesson 2: Building the User Interface\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vbtutor.net\/#website\",\"url\":\"https:\/\/www.vbtutor.net\/\",\"name\":\"Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\",\"description\":\"Start learning Visual Basic from beginner to advanced. Includes VB.NET, VBA, and classic VB tutorials for students and professionals.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Basic 2013 Lesson 2: Building the User Interface - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","description":"This lesson explain how to design a user interface in visual basic 2013","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html","og_locale":"en_US","og_type":"article","og_title":"Visual Basic 2013 Lesson 2: Building the User Interface - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","og_description":"This lesson explain how to design a user interface in visual basic 2013","og_url":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html","og_site_name":"Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","article_publisher":"https:\/\/www.facebook.com\/Vbtutor","article_modified_time":"2018-06-23T02:47:40+00:00","og_image":[{"url":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@liewvk","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vbtutor.net\/index.php\/building-a-graphical-user-interface\/","url":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html","name":"Visual Basic 2013 Lesson 2: Building the User Interface - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","isPartOf":{"@id":"https:\/\/www.vbtutor.net\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#primaryimage"},"image":{"@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#primaryimage"},"thumbnailUrl":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg","datePublished":"2014-01-01T09:31:49+00:00","dateModified":"2018-06-23T02:47:40+00:00","description":"This lesson explain how to design a user interface in visual basic 2013","breadcrumb":{"@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#primaryimage","url":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg","contentUrl":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure2.1.jpg","width":960,"height":692},{"@type":"BreadcrumbList","@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_Lesson2.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vbtutor.net\/"},{"@type":"ListItem","position":2,"name":"Visual Basic 2013 Lesson 2: Building the User Interface"}]},{"@type":"WebSite","@id":"https:\/\/www.vbtutor.net\/#website","url":"https:\/\/www.vbtutor.net\/","name":"Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","description":"Start learning Visual Basic from beginner to advanced. Includes VB.NET, VBA, and classic VB tutorials for students and professionals.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/4048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/users\/23013"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=4048"}],"version-history":[{"count":66,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/4048\/revisions"}],"predecessor-version":[{"id":13057,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/4048\/revisions\/13057"}],"wp:attachment":[{"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=4048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/categories?post=4048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/tags?post=4048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}