{"id":37811,"date":"2018-08-24T10:03:29","date_gmt":"2018-08-24T17:03:29","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=37811"},"modified":"2019-07-11T08:32:10","modified_gmt":"2019-07-11T15:32:10","slug":"using-new-xamarin-forms-controls-toolbox","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/using-new-xamarin-forms-controls-toolbox\/","title":{"rendered":"Using the New Xamarin.Forms Controls Toolbox"},"content":{"rendered":"<p>\t\t\t\tXamarin.Forms empowers you to deliver the same experience to multiple platforms. Using a set of UI elements abstracted from common mobile app controls, like text inputs and buttons, you can quickly create a functional cross-platform UI. Xamarin.Forms compiles these generic controls down to the platform-specific version, maintaining the native look and feel of your app. Likewise, you can easily customize the controls <span style=\"float: none;background-color: transparent;color: #333333;cursor: text;font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif;font-size: 16px;font-style: normal;font-variant: normal;font-weight: 400;letter-spacing: normal;text-align: left;text-decoration: none;text-indent: 0px\">to a specific look and feel for your <\/span>app. Today, we are excited to debut the Xamarin.Forms Controls Toolbox as part of Visual Studio 2017 version 15.8 and Visual Studio for Mac version 7.6. The toolbox lists the available Xamarin.Forms controls. Furthermore, these can be dragged directly onto the XAML editing surface to create the control on your page!<\/p>\n<h2>Pinning the Controls Toolbox<\/h2>\n<p>You can find the toolbox on Windows by hitting Ctrl + Alt + X (Windows) or in the \u201cView\u201d menu dropdown while editing a XAML file. On Mac, you can open it under the \u201cPads\u201d part of the \u201cView\u201d menu. The toolbox lists all available Xamarin.Forms controls, layouts, and cells. You can pin it to your workspace just like you\u2019d pin the Solution Explorer or Output window.<\/p>\n<p><figure id=\"attachment_37822\" aria-labelledby=\"figcaption_attachment_37822\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"wp-image-37822\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Open-and-Pin-Toolbox.gif\" alt=\"Open and Pin Toolbox\" width=\"700\" height=\"467\" \/><figcaption id=\"figcaption_attachment_37822\" class=\"wp-caption-text\">Open and pin the toolbox to your workspace<\/figcaption><\/figure><\/p>\n<h2>Just Tooling Around<\/h2>\n<p>When you want to add a control to your page, select it and drag from the toolbox onto the XAML editing surface. This creates a blank tag for the control along with necessary attributes, which you can use to quickly scaffold out a UI and test different layouts available in Xamarin.Forms. The toolbox supports <a href=\"https:\/\/developer.xamarin.com\/releases\/xamarin-forms\/xamarin-forms-3.0\/3.0.0\/\">Xamarin.Forms 3.0.0<\/a> and up so you can start using new features like <a href=\"https:\/\/blog.xamarin.com\/adaptive-mobile-designs-with-flexlayout\/\">FlexLayout<\/a> immediately!<\/p>\n<p><figure id=\"attachment_37823\" aria-labelledby=\"figcaption_attachment_37823\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"wp-image-37823\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Create-Login-Page.gif\" alt=\"Create login page with toolbox\" width=\"700\" height=\"467\" \/><figcaption id=\"figcaption_attachment_37823\" class=\"wp-caption-text\">Drag and drop controls onto the editor to quickly scaffold a login page<\/figcaption><\/figure><\/p>\n<h2>Use It Today!<\/h2>\n<p>Download the <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/releasenotes\/vs2017-relnotes\">latest version of Visual Studio 2017<\/a> to start using the Xamarin.Forms Controls Toolbox. You can see details on each of the controls in our <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/\">UI Docs<\/a>.<\/p>\n<p><a href=\"https:\/\/forums.xamarin.com\/137280\/using-the-new-xamarin-forms-controls-toolbox\/p1?new=1\">Let us know your feedback on the Xamarin Forums!<\/a>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we are excited to debut the Xamarin.Forms Controls Toolbox as part of Visual Studio 2017 version 15.8 and Visual Studio for Mac version 7.6. The toolbox lists the available Xamarin.Forms controls. Furthermore, these can be dragged directly onto the XAML editing surface to create the control on your page!<\/p>\n","protected":false},"author":1965,"featured_media":40967,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[367],"tags":[839,397,16],"class_list":["post-37811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xamarin-forms","tag-productivity","tag-visual-studio","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Today, we are excited to debut the Xamarin.Forms Controls Toolbox as part of Visual Studio 2017 version 15.8 and Visual Studio for Mac version 7.6. The toolbox lists the available Xamarin.Forms controls. Furthermore, these can be dragged directly onto the XAML editing surface to create the control on your page!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/37811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1965"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=37811"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/37811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/40967"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=37811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=37811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=37811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}