{"id":10125,"date":"2017-04-10T19:13:12","date_gmt":"2017-04-10T11:13:12","guid":{"rendered":"http:\/\/www.vbtutor.net\/?page_id=10125"},"modified":"2018-06-22T14:26:16","modified_gmt":"2018-06-22T06:26:16","slug":"visual-basic-2017-lesson-27-drawing-rectangles","status":"publish","type":"page","link":"https:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-lesson-27-drawing-rectangles\/","title":{"rendered":"Visual Basic 2017 Lesson 27: Drawing Rectangles"},"content":{"rendered":"<h4 style=\"text-align: center;\"><a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-lesson-26-introduction-graphics\/\">[Lesson 26] <\/a>&lt;&lt; [<a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-tutorial\/\">Contents]<\/a> &gt;&gt;<a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-lesson-28-drawing-ellipses-circles\/\"> [Lesson 28]<\/a><\/h4>\n<p>In the previous lesson, we have learned how to create Graphics and the Pen objects to draw straight lines in Visual Basic 2017. Now we shall learn how to draw rectangles.<\/p>\n<h3>27.1 Drawing A Rectangle<\/h3>\n<h4><u>Method 1<\/u><\/h4>\n<p>The first is to draw a rectangle directly using the <strong>DrawRectangle<\/strong> method by specifying its upper-left corner\u2019s coordinate and its width and height. The method of the Graphics object to draw the rectangle is DrawRectangle.The syntax is:<\/p>\n<p><strong>myGrapphics.DrawRectangle(myPen, X, Y, width, height)<\/strong><\/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=\"3393818013\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>*myGraphics is the variable name of the Graphics object and myPen is the variable name of the Pen object created by you. You can use any valid and meaningful variable names. X, Y is the coordinate of the upper left corner of the rectangle while width and height are the width and height of the rectangle.<br \/>\nThe \u00a0code is as follows:<\/p>\n<pre style=\"font-size: 110%;\">Dim myPen As Pen\r\nmyPen = New Pen(Drawing.Color.Blue, 5)\r\nDim myGraphics As Graphics = Me.CreateGraphics\r\nmyGraphics.DrawRectangle(myPen, 0, 0, 100, 50)\r\n<\/pre>\n<h4><u>Method 2<\/u><\/h4>\n<p>The second method is to create a rectangle object first and then draw this rectangle using the DrawRectangle method. The syntax is as shown below:<\/p>\n<p><strong>myGraphics.DrawRectangle(myPen,myRectangle)<\/strong><\/p>\n<p>where myRectangle is the rectangle object created by you, the user.<\/p>\n<p>The code to create a rectangle object is as shown below:<\/p>\n<pre style=\"font-size: 110%;\">Dim myRectangle As New Rectangle\r\nmyRect.X = 10\r\nmyRect.Y = 10\r\nmyRect.Width = 100\r\nmyRect.Height = 50\r\n<\/pre>\n<p>You can also create a rectangle object using a one-line code as follows:<\/p>\n<pre style=\"font-size: 110%;\">Dim myRectangle As New Rectangle(X,Y,width, height)\r\n<\/pre>\n<p>and the code to draw the above rectangle is<\/p>\n<pre style=\"font-size: 110%;\">myGraphics.DrawRectangle(myPen, myRectangle)\r\n<\/pre>\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=\"3393818013\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3><strong style=\"font-size: 1.285714286rem; line-height: 1.6;\">27.2 Customizing Line Style of the Pen Object<\/strong><\/h3>\n<p>The shape we draw so far is drawn with a solid line. However, we can customize the line style of the Pen object so that we can draw a dotted line, a line consisting of dashes and more. For example, the syntax to draw the dotted line is shown below:<\/p>\n<p><strong>myPen.DashStyle=Drawing.Drawing2D.DashStyle.Dot<\/strong><\/p>\n<p>Where the last argument Dot specifies a particular line DashStyle value, a line that makes up of dots here. Other DashStyles values are Dash, DashDot, DashDotDot and Solid.The following code draws a rectangle with a\u00a0blue dotted line.<\/p>\n<pre style=\"font-size: 110%;\">Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.ClickDim myPen As Pen\r\n\r\nmyPen = New Pen(Drawing.Color.Blue, 5)\r\nDim myGraphics As Graphics = Me.CreateGraphics\r\nmyPen.DashStyle = Drawing.Drawing2D.DashStyle.Dot\r\nmyGraphics.DrawRectangle(myPen, 10, 10, 100, 50)\r\n\r\nEnd Sub\r\n<\/pre>\n<p>The output image is as \u00a0shown in Figure 27.1<\/p>\n<p><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4916\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg\" alt=\"vb2013_figure26.1\" width=\"300\" height=\"300\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><strong>\u00a0Figure 27.1<\/strong><\/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=\"3393818013\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p style=\"text-align: left;\">If you change the DashStyle value to DashDotDot, you will get the following rectangle:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4918\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.2.jpg\" alt=\"vb2013_figure26.2\" width=\"300\" height=\"300\" \/><\/a><strong>Figure 27.2<\/strong><\/p>\n<p><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=\"9961025909\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 style=\"text-align: center;\"><a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-lesson-26-introduction-graphics\/\">[Lesson 26]\u00a0<\/a>&lt;&lt; [<a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-tutorial\/\">Contents]<\/a>\u00a0&gt;&gt; <a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-lesson-28-drawing-ellipses-circles\/\">[Lesson 28]<\/a><\/h4>\n<p style=\"text-align: left;\">\n","protected":false},"excerpt":{"rendered":"<p>[Lesson 26] &lt;&lt; [Contents] &gt;&gt; [Lesson 28] In the previous lesson, we have learned how to create Graphics and the Pen objects to draw straight lines in Visual Basic 2017. Now we shall learn how to draw rectangles. 27.1 Drawing A Rectangle Method 1 The first is to draw a rectangle directly using the DrawRectangle &hellip; <a href=\"https:\/\/www.vbtutor.net\/index.php\/visual-basic-2017-lesson-27-drawing-rectangles\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Visual Basic 2017 Lesson 27: Drawing Rectangles<\/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-10125","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 2017 Lesson 27: Drawing Rectangles - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB<\/title>\n<meta name=\"description\" content=\"Learn how to draw graphics in visual basic 2017\" \/>\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\/vb2017\/vb2017_lesson27.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Basic 2017 Lesson 27: Drawing Rectangles - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\" \/>\n<meta property=\"og:description\" content=\"Learn how to draw graphics in visual basic 2017\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.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-22T06:26:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.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\/visual-basic-2017-lesson-27-drawing-rectangles\/\",\"url\":\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html\",\"name\":\"Visual Basic 2017 Lesson 27: Drawing Rectangles - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\",\"isPartOf\":{\"@id\":\"https:\/\/www.vbtutor.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg\",\"datePublished\":\"2017-04-10T11:13:12+00:00\",\"dateModified\":\"2018-06-22T06:26:16+00:00\",\"description\":\"Learn how to draw graphics in visual basic 2017\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#primaryimage\",\"url\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg\",\"contentUrl\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg\",\"width\":300,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vbtutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Basic 2017 Lesson 27: Drawing Rectangles\"}]},{\"@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 2017 Lesson 27: Drawing Rectangles - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","description":"Learn how to draw graphics in visual basic 2017","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\/vb2017\/vb2017_lesson27.html","og_locale":"en_US","og_type":"article","og_title":"Visual Basic 2017 Lesson 27: Drawing Rectangles - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","og_description":"Learn how to draw graphics in visual basic 2017","og_url":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.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-22T06:26:16+00:00","og_image":[{"url":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.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\/visual-basic-2017-lesson-27-drawing-rectangles\/","url":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html","name":"Visual Basic 2017 Lesson 27: Drawing Rectangles - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","isPartOf":{"@id":"https:\/\/www.vbtutor.net\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#primaryimage"},"image":{"@id":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#primaryimage"},"thumbnailUrl":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg","datePublished":"2017-04-10T11:13:12+00:00","dateModified":"2018-06-22T06:26:16+00:00","description":"Learn how to draw graphics in visual basic 2017","breadcrumb":{"@id":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#primaryimage","url":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg","contentUrl":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure26.1.jpg","width":300,"height":300},{"@type":"BreadcrumbList","@id":"http:\/\/www.vbtutor.net\/vb2017\/vb2017_lesson27.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vbtutor.net\/"},{"@type":"ListItem","position":2,"name":"Visual Basic 2017 Lesson 27: Drawing Rectangles"}]},{"@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\/10125","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=10125"}],"version-history":[{"count":20,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/10125\/revisions"}],"predecessor-version":[{"id":13003,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/10125\/revisions\/13003"}],"wp:attachment":[{"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=10125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/categories?post=10125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/tags?post=10125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}