{"id":43686,"date":"2019-04-03T15:03:49","date_gmt":"2019-04-03T19:03:49","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=39453"},"modified":"2019-08-30T08:32:38","modified_gmt":"2019-08-30T15:32:38","slug":"visual-challenge-conquered","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/visual-challenge-conquered\/","title":{"rendered":"Visual Challenge Conquered!"},"content":{"rendered":"<p>\t\t\t\tLast week we <a href=\"https:\/\/blog.xamarin.com\/join-the-xamarin-visual-challenge\/\">issued a challenge<\/a> to the Xamarin community to use the new <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/visual\/material-visual\" target=\"_blank\" rel=\"noopener noreferrer\">Material Design controls<\/a> with <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/visual\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual<\/a> by reproducing an existing screen. The view should look and behave mostly the same on both Android and iOS. The goal for us was to learn if the new Visual feature was easy to use, how helpful the Material Design controls were for meeting design needs, and what we should do next to make this capability really sing. You really took to the challenge and exceeded our expectations!<\/p>\n<h2>Biggest Surprise<\/h2>\n<p>You! While we have representation in the challenge from the \u201cusual suspects\u201d, we\u2019ve met many new people through this. All told we ended up with 99 forks, 51 pull requests from 40 people including Microsoft team members. Fantastic! Even though we\u2019ve been seeing new contributors on GitHub, I think many of you were just looking for the right opportunity to pitch in, and what better way than by doing what you do best: making beautiful cross-platform mobile apps quickly!<\/p>\n<blockquote><p>Now <a href=\"https:\/\/www.thewissen.io\/\" rel=\"noopener noreferrer\" target=\"_blank\">Steven Thewissen<\/a> will not be the only one who can build beautiful complex UI&#8217;s with Xamarin. &#8211; Anonymous<\/p><\/blockquote>\n<p>The challenge was time-boxed at an hour, but we know many of you went beyond. It\u2019s hard to stop when you\u2019re having so much success (and there\u2019s swag on the line)!<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-39460\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/04\/quantas_ios.png\" alt=\"\" width=\"900\" height=\"567\" \/><\/p>\n<p>Thank you for stepping up and out of the shadows to participate in making Xamarin better.<\/p>\n<h2>Shipping Early, Learning Quickly, Delivering Delight<\/h2>\n<p>We have many hypotheses about what you do when building applications, and how we can best improve Xamarin and the Visual Studio tools to delight you. And often we discover by speaking with you that we are wrong. Shocker! Perhaps you\u2019ll agree it\u2019s better to learn before building something off the mark.<\/p>\n<p>What we&#8217;ve been hearing from you (and observing in design trends) is that it&#8217;s increasingly important to be able to achieve a consistent design across Android and iOS. And it appeared that Material Design was the best starting point to help a majority of you reach that goal. We value shipping early and getting your feedback so we can quickly iterate in the best direction, and thus Visual with Material Components was shipping alongside Xamarin.Forms 3.6. Each control is not perfect, and now we have a lot more clarity on where to go next in our mission to be wrong less and deliver the help most beneficial to you quickly.<\/p>\n<blockquote style=\"background-color: #f1f1f1;text-align: left;font-size: medium;padding: 10px 20px;border-left: 3px solid #39e\">\n<p style=\"font-size: 15px\">&#8220;As a newcomer to Xamarin (roughly 1 month and a half) from a mobile background mostly based on developing Android applications, I must say it impressed me and keeps impressing me the current state of the platform and what we are able to do with it. Pretty simple to use, took a newbie like me 15 minutes to build a beautiful UI.&#8221; &#8211; Diogo<\/p>\n<\/blockquote>\n<h2>You Go Big<\/h2>\n<p>Just look at the calibre of apps you chose to reproduce. Nothing seems beyond your reach and you\u2019re showing us that Xamarin.Forms is making these results easier and easier for you to achieve in a very short amount of time. Some examples, (in no particular order):<\/p>\n<p>&nbsp;<\/p>\n<table>\n<tbody>\n<tr>\n<td valign=\"top\">\n<ul>\n<li>Outlook<\/li>\n<li>Trello<\/li>\n<li>Slack<\/li>\n<li>Expedia Flights<\/li>\n<li>WhatsApp<\/li>\n<li>Twitter<\/li>\n<\/ul>\n<\/td>\n<td valign=\"top\">\n<ul>\n<li>Pocket Casts<\/li>\n<li>Medium<\/li>\n<li>Airbnb<\/li>\n<li>Microsoft News<\/li>\n<li>Mixer<\/li>\n<li>Gmail<\/li>\n<\/ul>\n<\/td>\n<td valign=\"top\">\n<ul>\n<li>Coinbase<\/li>\n<li>PayPal<\/li>\n<li>LinkedIn<\/li>\n<li>MixRadio<\/li>\n<li>Instagram<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Below is a sampling of just some of the submissions. To view all submissions and the feedback, visit the <a href=\"https:\/\/github.com\/davidortinau\/VisualChallenge\/pulls\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Challenge on GitHub<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-39478\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/04\/mobile_artboard.png\" alt=\"\" width=\"900\" height=\"842\" \/><\/p>\n<h2>What\u2019s Next for Material in Xamarin.Forms<\/h2>\n<p>We have compiled the feedback (approximately 215 individual notes), and some clear themes have emerged:<\/p>\n<ul>\n<li>Frame is the star of the show, a fundamental building block of nearly every design.<\/li>\n<li>More styling properties are needed for shadows and corners.<\/li>\n<li>Entry needs height counselling and styling assistance.<\/li>\n<li>Native NavigationBar and Tabs are a pain to customize.<\/li>\n<li>Consistency is needed for colors, margins, and padding.<\/li>\n<li>Gradients are making a comeback.<\/li>\n<li>More more more! You like the direction, it\u2019s useful to you, and you want moar!<\/li>\n<\/ul>\n<p>We will be working to make sure we properly understand each of these themes (and other feedback) and drafting specifications to address them. Some work on exposing the additional styling properties is already underway. If you\u2019re looking for another area to contribute, please consider submitting a pull request.<\/p>\n<blockquote style=\"background-color: #f1f1f1;text-align: left;font-size: medium;padding: 10px 20px;border-left: 3px solid #39e\">\n<p style=\"font-size: 15px\">Paul DiPietro and Shane Neuville will be streaming a \u201cGetting Started Contributing to Xamarin.Forms\u201d session on Friday, April 5 starting around noon (EDT\/UTC\u20134). Join then and follow the team on Twitch: <a href=\"https:\/\/www.twitch.tv\/XamarinFormsTeam\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.twitch.tv\/XamarinFormsTeam<\/a><\/p>\n<\/blockquote>\n<p>Big or small, 1 hour or many hours, the results and feedback have been awesome. Thank you!\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week we <a href=\"https:\/\/blog.xamarin.com\/join-the-xamarin-visual-challenge\/\">issued a challenge<\/a> to the Xamarin community to use the new <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/visual\/material-visual\" target=\"_blank\" rel=\"noopener noreferrer\">Material Design controls<\/a> with <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/visual\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual<\/a> by reproducing an existing screen. The view should look and behave mostly the same on both Android and iOS. The goal for us was to learn if the new Visual feature was easy to use, how helpful the Material Design controls were for meeting design needs, and what we should do next to make this capability really sing. You really took to the challenge and exceeded our expectations<\/p>\n","protected":false},"author":553,"featured_media":43727,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[16],"class_list":["post-43686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Last week we <a href=\"https:\/\/blog.xamarin.com\/join-the-xamarin-visual-challenge\/\">issued a challenge<\/a> to the Xamarin community to use the new <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/visual\/material-visual\" target=\"_blank\" rel=\"noopener noreferrer\">Material Design controls<\/a> with <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/visual\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual<\/a> by reproducing an existing screen. The view should look and behave mostly the same on both Android and iOS. The goal for us was to learn if the new Visual feature was easy to use, how helpful the Material Design controls were for meeting design needs, and what we should do next to make this capability really sing. You really took to the challenge and exceeded our expectations<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/43686","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\/553"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=43686"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/43686\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/43727"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=43686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=43686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=43686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}