{"id":4223,"date":"2014-01-07T15:43:30","date_gmt":"2014-01-07T07:43:30","guid":{"rendered":"http:\/\/www.vbtutor.net\/?page_id=4223"},"modified":"2018-06-24T16:26:12","modified_gmt":"2018-06-24T08:26:12","slug":"visual-basic-2013-lesson-7-displaying-images-with-the-picture-box","status":"publish","type":"page","link":"https:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-lesson-7-displaying-images-with-the-picture-box\/","title":{"rendered":"Visual Basic 2013 Lesson 7: Working with Picture Box"},"content":{"rendered":"<h4 style=\"text-align: center;\"><a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-lesson-6-working-with-list-box-and-combo-box\/\">[Lesson 6]<\/a> &lt;&lt; <a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-tutorial\/\">[Contents]<\/a> &gt;&gt; [<a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-lesson-8-understanding-data\/\">Lesson 8]<\/a><\/h4>\n<p>In lesson 3, you\u00a0have learned how to add a picture box on the form in VB2013 IDE. \u00a0In this lesson, you\u00a0will learn how to load an image into the picture box at design time and at runtime. Besides that, you\u00a0will\u00a0also learn how to use a common dialog control to browse for image files in your drives;\u00a0then select and load a particular image in the picture box.<\/p>\n<h3>7.1 Loading an Image in a Picture Box<\/h3>\n<h4>7.1.1 Loading an Image at Design Time<\/h4>\n<p>First, insert a picture box on the form and change its border property to FixedSingle and its background to white. You might also want to change the size mode of the image to stretchable so that the image can fit in the picture box. Now right-click on the picture box to bring out its properties window. In the properties window, scroll to the Image property, as shown in Figure 7.1<br \/>\n<a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4277\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg\" alt=\"vb2013_figure7.1\" width=\"336\" height=\"442\" \/><\/a> \u00a0 <strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Figure 7.1<\/strong><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 style=\"text-align: center;\">Next, click on the gray button on its right to bring out the &#8220;Select Source&#8221; dialog box, as shown in Figure 7.2 <a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4280\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.2.jpg\" alt=\"vb2013_figure7.2\" width=\"577\" height=\"391\" \/><\/a> <strong>Figure 7.2<\/strong><\/p>\n<p>Now select local source and click on the Import button to view the available image files in your local drives, as shown in Figure 7.3 <a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4282\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.3.jpg\" alt=\"vb2013_figure7.3\" width=\"683\" height=\"480\" \/><\/a> Finally, select the image you like and then click the open button, the image will be displayed in the picture box, as shown in Figure 7.4<br \/>\n<a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4285\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.4.jpg\" alt=\"vb2013_figure7.4\" width=\"300\" height=\"300\" \/><\/a><strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Figure 7.4<\/strong><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<h4>7.1.2 Loading an Image at Runtime<\/h4>\n<p>In Visual Basic 2013, an image can also be loaded at runtime, using the code as follows:<\/p>\n<pre style=\"font-size: 110%;\">Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load\r\n PictureBox1.Image = Image.FromFile(\"C:\\My Pictures\\USA\\Chicago 2012.jpg\")\r\nEnd Sub\r\n<\/pre>\n<p>* You need to search for an image in your local drive and determine its path.<\/p>\n<p>Running the program will display the same image in the picture box as in Figure 7.4<\/p>\n<h3>7.2 Loading an Image in a Picture Box using Open File Dialog Control<\/h3>\n<p>We have designed the picture viewer interface in lesson 3. Now we shall write code so that the user can browse for the image files in his or her local drives then select a particular image to display in the picture box.<\/p>\n<p>First, we need to add the <strong>OpenFileDialog<\/strong> control on the form. This control will be invisible during runtime but it facilitates the process of launching a dialog box and let the user browse his or her local drives;\u00a0then select and open a file. In order for the OpenFileDialog to display all types of image files, we need to specify the types of image files under the Filter property. Before that, rename OpenFileDialog as OFGSelectImage. Next, right-click on the OpenFileDialog control to access its properties window. Beside the Filter property, specify the image files using the format:<br \/>\n<strong>JPEG Files| *.JPG|GIF Files|*.GIF|Windows Bitmaps|*.BMP<\/strong><br \/>\nas shown in Figure 7.5.\u00a0These are the common image file formats. Besides that, you also need to delete the default Filename.<\/p>\n<p><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4294\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.5.jpg\" alt=\"vb2013_figure7.5\" width=\"567\" height=\"442\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><strong style=\"line-height: 1.714285714; font-size: 1rem;\">Figure 7.5<\/strong><\/p>\n<p>Next, double-click on the <strong>View<\/strong> button and enter the following code:<\/p>\n<pre style=\"font-size: 110%;\">Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click\r\n If OFGSelectImage.ShowDialog = Windows.Forms.DialogResult.OK Then\r\n PictureBox1.Image = Image.FromFile(OFGSelectImage.FileName)\r\nEnd If\r\nEnd Sub\r\n<\/pre>\n<p>Press F5 to run the program and click the View button, a dialog box showing all the image files will appear, as shown in Figure 7.6<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4297\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.6.jpg\" alt=\"vb2013_figure7.6\" width=\"683\" height=\"450\" \/><\/a><strong>Figure 7.6<\/strong><\/p>\n<p>Notice that the default image file is JPEG \u00a0as we have placed it in the first place in the Filter property. Selecting and opening an image file will load it in the picture box, as shown in Figure 7.7<\/p>\n<p><center><a href=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.7.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4301\" src=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.7.jpg\" alt=\"vb2013_figure7.7\" width=\"300\" height=\"313\" \/><\/a><strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Figure 7.7\u00a0<\/strong><\/center><\/p>\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;\"><a href=\"http:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-lesson-6-working-with-list-box-and-combo-box\/\">[Lesson 6]<\/a>\u00a0&lt;&lt;\u00a0<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\/visual-basic-2013-lesson-8-understanding-data\/\">[Lesson 8]<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>[Lesson 6] &lt;&lt; [Contents] &gt;&gt; [Lesson 8] In lesson 3, you\u00a0have learned how to add a picture box on the form in VB2013 IDE. \u00a0In this lesson, you\u00a0will learn how to load an image into the picture box at design time and at runtime. Besides that, you\u00a0will\u00a0also learn how to use a common dialog control &hellip; <a href=\"https:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-lesson-7-displaying-images-with-the-picture-box\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Visual Basic 2013 Lesson 7: Working with Picture Box<\/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-4223","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 7: Working with Picture Box - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB<\/title>\n<meta name=\"description\" content=\"This lesson illustrates how to load an image in a picture box 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_lesson7.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 7: Working with Picture Box - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB\" \/>\n<meta property=\"og:description\" content=\"This lesson illustrates how to load an image in a picture box in Visual Basic 2013\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.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-24T08:26:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.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=\"3 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-2013-lesson-7-displaying-images-with-the-picture-box\/\",\"url\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html\",\"name\":\"Visual Basic 2013 Lesson 7: Working with Picture Box - 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_lesson7.html#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg\",\"datePublished\":\"2014-01-07T07:43:30+00:00\",\"dateModified\":\"2018-06-24T08:26:12+00:00\",\"description\":\"This lesson illustrates how to load an image in a picture box in Visual Basic 2013\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#primaryimage\",\"url\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg\",\"contentUrl\":\"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg\",\"width\":336,\"height\":442},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vbtutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Basic 2013 Lesson 7: Working with Picture Box\"}]},{\"@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 7: Working with Picture Box - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","description":"This lesson illustrates how to load an image in a picture box 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_lesson7.html","og_locale":"en_US","og_type":"article","og_title":"Visual Basic 2013 Lesson 7: Working with Picture Box - Learn Visual Basic Programming \u2013 VB.NET, VBA &amp; Classic VB","og_description":"This lesson illustrates how to load an image in a picture box in Visual Basic 2013","og_url":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.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-24T08:26:12+00:00","og_image":[{"url":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@liewvk","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vbtutor.net\/index.php\/visual-basic-2013-lesson-7-displaying-images-with-the-picture-box\/","url":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html","name":"Visual Basic 2013 Lesson 7: Working with Picture Box - 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_lesson7.html#primaryimage"},"image":{"@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#primaryimage"},"thumbnailUrl":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg","datePublished":"2014-01-07T07:43:30+00:00","dateModified":"2018-06-24T08:26:12+00:00","description":"This lesson illustrates how to load an image in a picture box in Visual Basic 2013","breadcrumb":{"@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#primaryimage","url":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg","contentUrl":"https:\/\/www.vbtutor.net\/wordpress\/wp-content\/uploads\/2014\/01\/vb2013_figure7.1.jpg","width":336,"height":442},{"@type":"BreadcrumbList","@id":"http:\/\/www.vbtutor.net\/vb2013\/vb2013_lesson7.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vbtutor.net\/"},{"@type":"ListItem","position":2,"name":"Visual Basic 2013 Lesson 7: Working with Picture Box"}]},{"@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\/4223","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=4223"}],"version-history":[{"count":56,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/4223\/revisions"}],"predecessor-version":[{"id":13063,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/pages\/4223\/revisions\/13063"}],"wp:attachment":[{"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=4223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/categories?post=4223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vbtutor.net\/index.php\/wp-json\/wp\/v2\/tags?post=4223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}