{"id":3514,"date":"2011-10-19T09:27:00","date_gmt":"2011-10-19T17:27:00","guid":{"rendered":"http:\/\/www.sapien.com\/blog\/?p=3514"},"modified":"2012-01-27T11:36:30","modified_gmt":"2012-01-27T19:36:30","slug":"primalforms-2011-spotlight-on-the-imagelist-control","status":"publish","type":"post","link":"https:\/\/dev.sapien.com\/blog\/2011\/10\/19\/primalforms-2011-spotlight-on-the-imagelist-control\/","title":{"rendered":"PrimalForms 2011: Spotlight on the ImageList Control"},"content":{"rendered":"<p><em>The \u201cSpotlight on Controls\u201d series focuses on a single WinForms control in PrimalForms 2011 , details the important Properties, Methods, and Events of the control and demonstrates how to utilize the control. Most of the information about the controls is still applicable to previous versions of PrimalForms.<\/em><\/p>\n<p>Last time we took a look at the <a href=\"http:\/\/www.sapien.com\/blog\/2011\/09\/27\/primalforms-2011-spotlight-on-the-maskedtextbox-control\/\">MaskedTextBox<\/a> control. This time we will look at the ImageList control:<\/p>\n<p><span style=\"font-size: medium\"><strong>ImageList <\/strong>[System.Windows.Forms.ImageList]<\/span><\/p>\n<p>Provides methods to manage a collection of Image objects.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"ImageListToolItem\" border=\"0\" alt=\"ImageListToolItem\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/ImageListToolItem.png\" width=\"100\" height=\"20\"><\/p>\n<p>Default Event: N\/A<\/p>\n<p><em>Why use the ImageList control?<\/em><\/p>\n<p>Use the ImageList to store a group of images that can be accessed by other controls, such as the ListView, TreeView, TabControl, or Toolbar.<\/p>\n<p><strong><span style=\"font-size: small\"><font size=\"3\"><\/font><\/span><\/strong><\/p>\n<p><strong><span style=\"font-size: small\"><font size=\"3\">Important Properties:<\/font><\/span><\/strong><\/p>\n<p><strong>ColorDepth<\/strong>  <\/p>\n<p>This property represents the number of colors to use to render the images.<\/p>\n<p>Values (Default: <em>Depth4Bit<\/em>):<\/p>\n<blockquote>\n<p><em>Depth4Bit<\/em><br \/>A 4-bit image.  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"4Bit\" border=\"0\" alt=\"4Bit\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/4Bit.png\" width=\"64\" height=\"64\">  <\/p>\n<p><em>Depth8Bit<\/em><br \/>An 8-bit image.  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"8Bit\" border=\"0\" alt=\"8Bit\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/8Bit.png\" width=\"64\" height=\"64\">  <\/p>\n<p><em>Depth16Bit<\/em><br \/>A 16-bit image.  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"16Bit\" border=\"0\" alt=\"16Bit\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/16Bit.png\" width=\"64\" height=\"64\">  <\/p>\n<p><em>Depth24Bit<\/em><br \/>A 24-bit image.  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"24Bit\" border=\"0\" alt=\"24Bit\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/24Bit.png\" width=\"64\" height=\"64\">  <\/p>\n<p><em>Depth32Bit<\/em><br \/>A 32-bit image.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"32Bit\" border=\"0\" alt=\"32Bit\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/32Bit.png\" width=\"64\" height=\"64\"><\/p>\n<\/blockquote>\n<p><strong>Images<\/strong><\/p>\n<p>This property contains the images in the ImageList.<\/p>\n<p>Images can be accessed using the Images property:<\/p>\n<pre><span style=\"color: #008000\">#Access the first image in the ImageList<\/span><span style=\"color: #000000\">\n<\/span><span style=\"color: #8b0000\">$picturebox1<\/span><span style=\"color: #000000\">.Image <\/span><span style=\"color: #0000ff\">=<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #8b0000\">$imagelist1<\/span><span style=\"color: #000000\">.Images[<\/span><span style=\"color: #000000\">0<\/span><span style=\"color: #000000\">]<\/span><\/pre>\n<p>There are several methods of adding an image to the ImageList: <\/p>\n<p>Via the designer:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Edit-Images-in-Designer.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Edit Images in Designer\" border=\"0\" alt=\"Edit Images in Designer\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Edit-Images-in-Designer_thumb.png\" width=\"244\" height=\"106\"><\/a><\/p>\n<p>Or via the Property Pane:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Edit-Images-using-Property-Pane.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Edit Images using Property Pane\" border=\"0\" alt=\"Edit Images using Property Pane\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Edit-Images-using-Property-Pane_thumb.png\" width=\"226\" height=\"244\"><\/a><\/p>\n<p>Using either method above you will be presented with a Image Collection Editor:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Image-Collection-Editor.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Image Collection Editor\" border=\"0\" alt=\"Image Collection Editor\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Image-Collection-Editor_thumb.png\" width=\"244\" height=\"180\"><\/a><\/p>\n<p>You can also add images to the ImageList via the Script Editor:<\/p>\n<pre><span style=\"color: #000000\">    <\/span><span style=\"color: #008000\">#Add an image from the disk<\/span><span style=\"color: #000000\">\n    <\/span><span style=\"color: #8b0000\">$imagelist1<\/span><span style=\"color: #000000\">.Images.Add([System.Drawing.Image]<\/span><span style=\"color: #0000ff\">::<\/span><span style=\"color: #000000\">FromFile(<\/span><span style=\"color: #ff0000\">\"C:\\Image.png\"<\/span><span style=\"color: #000000\">))<\/span><\/pre>\n<p>As you may have noticed, we are using the Image class static function: FromFile. This function will load an image file from the disk and returns an Image object that can be added to the ImageList.<\/p>\n<p>Supported Image Types include: png, jpg, gif, bmp, and icons files. <\/p>\n<p><strong>ImageSize<\/strong><\/p>\n<p>This property sets the size of the individual images in the ImageList.<\/p>\n<p>Typical icons are 16 x 16, 24 x24 and 32 x 32, but you can specify any dimension. Note that all images included in the ImageList will be resized to the dimension specified by the ImageSize property.<\/p>\n<p>Default Value: 16, 16<\/p>\n<p><strong>TransparentColor<\/strong><\/p>\n<p>This property sets the color that is treated as transparent.<\/p>\n<p>Use this property when you are dealing with images that do not have a transparent layer such as most bitmaps.<\/p>\n<p>For example the following Bitmap has a background color of Fuchsia:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Image without Transparency\" border=\"0\" alt=\"Image without Transparency\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Image-without-Transparency.png\" width=\"88\" height=\"88\"><\/p>\n<p>To make the background transparent, we set the TransparentColor to Fushsia:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Select-Color.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Select Color\" border=\"0\" alt=\"Select Color\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Select-Color_thumb.png\" width=\"244\" height=\"221\"><\/a><\/p>\n<p>And the resulting image displays an arrow with a transparent background:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Image with Transparency\" border=\"0\" alt=\"Image with Transparency\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Image-with-Transparency.png\" width=\"88\" height=\"88\"><\/p>\n<p>&nbsp;<\/p>\n<p><strong>How to pick a custom color:<\/strong><\/p>\n<p>To pick a custom color, select the custom tab in the color selector:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Custom-Color-Tab.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Custom Color Tab\" border=\"0\" alt=\"Custom Color Tab\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Custom-Color-Tab_thumb.png\" width=\"244\" height=\"213\"><\/a><\/p>\n<p>Next, <strong>Right Click<\/strong> on any empty square you will be presented with a Define Color Dialog:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Define-Color-Dialog.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Define Color Dialog\" border=\"0\" alt=\"Define Color Dialog\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Define-Color-Dialog_thumb.png\" width=\"182\" height=\"244\"><\/a><\/p>\n<p>After defining the color you wish to use, press the Add Color button and it will appear in the selected square in the custom tab:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Select-Created-Custom-Color.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Select Created Custom Color\" border=\"0\" alt=\"Select Created Custom Color\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Select-Created-Custom-Color_thumb.png\" width=\"244\" height=\"210\"><\/a><\/p>\n<p>And finally to make the selection click on square containing the custom color.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Using the ImageList with other Controls:<\/strong><\/p>\n<p>Controls that can take advantage of the ImageList typically have a property called <strong>ImageList<\/strong>. After adding an ImageList to the designer, you will be able to select it as a value for the control.<\/p>\n<p>To set a particular image from the ImageList look for either of the following properties:<\/p>\n<p><strong>ImageIndex<\/strong><\/p>\n<p>ImageIndex uses the index of the image to select it from the ImageList.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Selecting ImageIndex\" border=\"0\" alt=\"Selecting ImageIndex\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Selecting-ImageIndex.png\" width=\"318\" height=\"96\"><\/p>\n<p><strong>ImageKey<\/strong><\/p>\n<p>The ImageKey property uses the name of the image to select it from the ImageList.<\/p>\n<p><font color=\"#ff0000\">Note: PrimalForms does not support this property. Please use the ImageIndex instead.<\/font><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"Selecting ImageKey\" border=\"0\" alt=\"Selecting ImageKey\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2011\/10\/Selecting-ImageKey.png\" width=\"318\" height=\"97\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The \u201cSpotlight on Controls\u201d series focuses on a single WinForms control in PrimalForms 2011 , details the important Properties, Methods, and Events of the control and demonstrates how to utilize the control. Most of the information about the controls is still applicable to previous versions of PrimalForms. Last time we took a look at the [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[509,575,644,25],"tags":[641,688,28,633,327],"class_list":["post-3514","post","type-post","status-publish","format-standard","hentry","category-primalforms-software-news","category-primalforms-2011-software-news","category-spotlight-on-controls","category-windows-powershell","tag-controls","tag-imagelist","tag-powershell","tag-primalforms-2011","tag-winform"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/comments?post=3514"}],"version-history":[{"count":3,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3514\/revisions"}],"predecessor-version":[{"id":3747,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3514\/revisions\/3747"}],"wp:attachment":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/media?parent=3514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/categories?post=3514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/tags?post=3514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}