{"id":3973,"date":"2012-04-24T08:02:00","date_gmt":"2012-04-24T16:02:00","guid":{"rendered":"http:\/\/www.sapien.com\/blog\/?p=3973"},"modified":"2012-04-26T12:19:34","modified_gmt":"2012-04-26T20:19:34","slug":"powershell-studio-2012-whats-new-part-2","status":"publish","type":"post","link":"https:\/\/dev.sapien.com\/blog\/2012\/04\/24\/powershell-studio-2012-whats-new-part-2\/","title":{"rendered":"PowerShell Studio 2012: What&rsquo;s New? (Part 2)"},"content":{"rendered":"<p>Last time we looked at PowerShell Studio\u2019s new UI features such as the updated Ribbon and custom layouts. Now we will take a look at the new Forms Designer features.<\/p>\n<p><strong><span style=\"font-size: small\"><font size=\"3\">Styles<\/font><\/span><\/strong><\/p>\n<p>Have you ever got tired of applying the same properties over and over to controls such as anchoring? Well this is where Styles come into play, one of the new additions to PowerShell Studio\u2019s Designer.<\/p>\n<p><em>So what is a Style?<\/em><\/p>\n<p>Styles are a set of predefined properties that you can quickly assign to one or more controls within the designer.<\/p>\n<p><strong>Applying Styles:<\/strong><\/p>\n<p>Let\u2019s look at some sample Styles and how you apply them. You start by opening the designer and selecting the control(s) you wish to apply a Style to.<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Select-Controls.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 Controls\" border=\"0\" alt=\"Select Controls\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Select-Controls_thumb.png\" width=\"244\" height=\"238\"><\/a><\/p>\n<p>Next you can access the Style List by using:<\/p>\n<p>The Designer Context Menu:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Apply-Style-Context-Menu.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=\"Apply Style Context Menu\" border=\"0\" alt=\"Apply Style Context Menu\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Apply-Style-Context-Menu_thumb.png\" width=\"244\" height=\"228\"><\/a><\/p>\n<p>Or the Ribbon:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Apply-Style-Ribbon.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=\"Apply Style Ribbon\" border=\"0\" alt=\"Apply Style Ribbon\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Apply-Style-Ribbon_thumb.png\" width=\"361\" height=\"173\"><\/a><\/p>\n<p>The quickest method is to use the keyboard shortcut: <strong>Ctrl + L<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Next you will be presented with a list of Styles you can apply to the selected control(s).<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Select-Style-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=\"Select Style Dialog\" border=\"0\" alt=\"Select Style Dialog\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Select-Style-Dialog_thumb.png\" width=\"244\" height=\"206\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Some Styles only apply to a specific control type. You can check the \u201cShow styles for same type only\u201d checkbox to only display control specific styles.<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Filtered-Styles.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=\"Filtered Styles\" border=\"0\" alt=\"Filtered Styles\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Filtered-Styles_thumb.png\" width=\"244\" height=\"206\"><\/a><\/p>\n<p><span style=\"font-size: x-small\">(If a Style only applies to a specific type, the type will be displayed in blue.)<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>The following are example uses for styles:<\/p>\n<p>The <strong>Console Font Style <\/strong>changes the control\u2019s font to a fixed sized font. This style is useful for displaying PowerShell output in a TextBox.<\/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=\"Console Font Style\" border=\"0\" alt=\"Console Font Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Console-Font-Style.png\" width=\"417\" height=\"48\"><\/p>\n<p>Before applying Style:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Text-Before-Style.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=\"Text Before Style\" border=\"0\" alt=\"Text Before Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Text-Before-Style_thumb.png\" width=\"244\" height=\"243\"><\/a><\/p>\n<p>After applying Style:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Text-After-Style.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=\"Text After Style\" border=\"0\" alt=\"Text After Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Text-After-Style_thumb.png\" width=\"244\" height=\"244\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Use the <strong>OK Button Style<\/strong> to convert any button into a OK button.<\/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=\"Apply OK Button Style\" border=\"0\" alt=\"Apply OK Button Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Apply-OK-Button-Style.png\" width=\"417\" height=\"47\"><\/p>\n<p>Before applying Style:<\/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=\"Button Before Style\" border=\"0\" alt=\"Button Before Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Button-Before-Style.png\" width=\"93\" height=\"40\"><\/p>\n<p>After applying Style:<\/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=\"Button After Style\" border=\"0\" alt=\"Button After Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Button-After-Style.png\" width=\"94\" height=\"39\"><\/p>\n<p>The Button\u2019s text is changed to \u201cOK\u201d and the DialogResult property is also changed to \u2018OK\u2019 , which triggers the form to close when the button is pressed (See: <a href=\"http:\/\/www.sapien.com\/blog\/2011\/06\/07\/primalforms-2011-spotlight-on-the-button-control\/\">Spotlight on the Button Control<\/a> blog article).<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Creating New Styles:<\/strong><\/p>\n<p>Now, not only can you use preexisting Styles but you can also create your own custom Styles.<\/p>\n<p>To create a new Style you must first select the control you wish to use as a template.<\/p>\n<p>In this case, I want to create a Style that applies a blue color to text.<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Blue-Button.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=\"Blue Button\" border=\"0\" alt=\"Blue Button\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Blue-Button_thumb.png\" width=\"244\" height=\"242\"><\/a><\/p>\n<p>In this example, we will use the button control as a base.<\/p>\n<p>Next select the Create Style option (<strong>Ctrl + Shift + L<\/strong>):<\/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=\"Create Style Option\" border=\"0\" alt=\"Create Style Option\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Create-Style-Option.png\" width=\"329\" height=\"271\"><\/p>\n<p>&nbsp;<\/p>\n<p>You will be presented with the \u201cCreate Style Template\u201d dialog:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Create-Style-Template-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=\"Create Style Template Dialog\" border=\"0\" alt=\"Create Style Template Dialog\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Create-Style-Template-Dialog_thumb.png\" width=\"244\" height=\"148\"><\/a><\/p>\n<p>The dialog displays the selected source control (only one source control per style).<\/p>\n<p>Next you can choose to limit the Style to a \u2018Matching Type\u2019 or to apply it to \u2018Any Type\u2019.<\/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=\"Choose Style Limitation\" border=\"0\" alt=\"Choose Style Limitation\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Choose-Style-Limitation.png\" width=\"269\" height=\"152\"><\/p>\n<p>In this case, we want to apply this style to \u2018Any Type\u2019. If you chose the \u2018Matching Type\u2019 options, the style could only have been applied to Buttons.<\/p>\n<p>Next enter creator information and the mandatory description of the Style:<\/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=\"Style Description\" border=\"0\" alt=\"Style Description\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Style-Description.png\" width=\"269\" height=\"180\"><\/p>\n<p>After entering the description, you must check all the properties of the template control you would like the Style to incorporate.<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Select-Properties-for-Style.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 Properties for Style\" border=\"0\" alt=\"Select Properties for Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Select-Properties-for-Style_thumb.png\" width=\"244\" height=\"192\"><\/a><\/p>\n<p>In this case, we only want the ForeColor, which is set to blue beforehand on the button.<\/p>\n<p>Next press the \u2018Create\u2019 button and save the new Style:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Save-the-Style.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=\"Save the Style\" border=\"0\" alt=\"Save the Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Save-the-Style_thumb.png\" width=\"244\" height=\"182\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Now apply the new Style to other controls:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Applying-the-New-Style.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=\"Applying the New Style\" border=\"0\" alt=\"Applying the New Style\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Applying-the-New-Style_thumb.png\" width=\"244\" height=\"129\"><\/a><\/p>\n<p>What\u2019s cool is that you can apply multiple styles to multiple controls at once.<\/p>\n<p>The controls after applying multiple Styles:<\/p>\n<p><a href=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Controls-After-Applying-Styles.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=\"Controls After Applying Styles\" border=\"0\" alt=\"Controls After Applying Styles\" src=\"http:\/\/www.sapien.com\/blog\/wp-content\/uploads\/2012\/04\/Controls-After-Applying-Styles_thumb.png\" width=\"244\" height=\"242\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Next: <a href=\"http:\/\/www.sapien.com\/blog\/2012\/04\/26\/powershell-studio-2012-whats-new-part-3\/\">Part 3<\/a>&nbsp; &#8211; Control Sets<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last time we looked at PowerShell Studio\u2019s new UI features such as the updated Ribbon and custom layouts. Now we will take a look at the new Forms Designer features. Styles Have you ever got tired of applying the same properties over and over to controls such as anchoring? Well this is where Styles come [&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":[705,509,21,25],"tags":[694,28,1016,314,128],"class_list":["post-3973","post","type-post","status-publish","format-standard","hentry","category-powershell-studio-2012","category-primalforms-software-news","category-software-news","category-windows-powershell","tag-694","tag-powershell","tag-powershell-studio","tag-primalforms","tag-whats-new-whats-changed"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3973","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=3973"}],"version-history":[{"count":16,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3973\/revisions"}],"predecessor-version":[{"id":4233,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3973\/revisions\/4233"}],"wp:attachment":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/media?parent=3973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/categories?post=3973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/tags?post=3973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}