{"id":48761,"date":"2021-06-03T08:38:42","date_gmt":"2021-06-03T15:38:42","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=48761"},"modified":"2021-07-13T15:45:41","modified_gmt":"2021-07-13T22:45:41","slug":"building-beautiful-apps-with-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/building-beautiful-apps-with-xamarin-forms\/","title":{"rendered":"Building beautiful apps with Xamarin.Forms"},"content":{"rendered":"

One question that I continuously get asked on Twitter<\/a> is how can I make great looking apps with Xamarin.Forms? It is a great question, and anyone can build great looking apps with a little inspiration and a little styling. Now, I am not a designer, and I don’t claim to be a designer, but there is a lot of great inspiration out there for app designs including Dribbble<\/a>, uplabs<\/a>, and others. These designs from talented individuals around the globe can help to influence how your own apps look and feel.<\/p>\n

\n
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2021\/06\/restaurantapp.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n

Restaurant app by Oludayo Alli<\/a><\/strong><\/p>\n

Built-in awesome in Xamarin.Forms<\/h2>\n

There are several features in Xamarin.Forms that you can leverage to help bring these designs to life. Look no further than the new Shapes API<\/a> to draw shapes, lines, polygons, and more. Want a consistent look and feel to your native controls? How about adding Material Design<\/a> with a single line of code. Group your collections to perfection with CarouselView<\/a> paired with IndicatorView<\/a> and of course CollectionView<\/a>.<\/p>\n

\n
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2021\/06\/drinkgalleryapp.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n

Drink gallery<\/a> app by Javier Su\u00e1rez<\/a><\/strong><\/p>\n

Go further with custom community controls<\/h2>\n

The Xamarin Community Toolkit<\/a> continues to add great controls including a DockLayout, Shield, TabView, and more. But there are even more awesome controls from the community including the fabulous Magic Gradients<\/a>, PancakeView<\/a>, MaterialFrame<\/a>, CardView<\/a>, Shadows<\/a>, and so many more. Finally, we cannot forget SkiaSharp<\/a> a general purpose 2D graphics system for .NET.<\/p>\n

\"Shadows<\/p>\n

Component ecosystem<\/h2>\n

Re-usable UI components from top component vendors like Telerik<\/a>, UX Divers<\/a>, GrapeCity<\/a>, and Syncfusion<\/a> help you get productive quickly. Be sure to check out the wide number of options when you’re ready to get started!<\/p>\n

\n \"Island\n<\/center><\/p>\n

Island Tracker<\/a> using community & Syncfusion controls by me!<\/strong><\/p>\n

Get Inspired<\/h2>\n

Our very own Javier has been collecting amazing examples great looking open-source apps built with Xamarin.Forms for several years now that you can browse through on GitHub<\/a>. I have already featured a few of these great looking apps, but here are a few more to get you inspired.<\/p>\n

\n \"Credit\n<\/center><\/p>\n

CreditCard Wallet<\/a> by Altevir<\/a><\/strong><\/p>\n

\n
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2021\/06\/flightuisample.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n

Airline flight app<\/a> by Leomaris Reyes<\/a><\/strong><\/p>\n

\n \"Cook\n<\/center><\/p>\n

Cook book app<\/a> by Steven Thewissen<\/a><\/strong><\/p>\n

\n
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2021\/06\/cakesmobileapp.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n

Cake app<\/a> by Shaw Yu<\/a><\/strong><\/p>\n

There are so many more lovely designs to browse through! You can even add your own by simply opening a pull request on Javier’s GitHub repo<\/a>.<\/p>\n

Adobe XD Exporter<\/h2>\n

Many designs you find online or from your designer may be built with tools such as Adobe XD. You can easily import colors and styles into your Xamarin.Forms app thanks to the XD to Xamarin.Forms exporter from our very own Kym Phillpotts<\/a>!<\/p>\n

\n
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2021\/06\/xd.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n

Go off and build beautiful apps<\/h2>\n

Tell us all about your apps by leaving comments below or submitting a pull request to Javier’s GitHub repo<\/a>. Have terrific tips and tricks? Leave them below and share them with the world.<\/p>\n","protected":false},"excerpt":{"rendered":"

Designing great looking apps can be hard, but with a little inspiration and a little styling you can craft beautiful looking apps with Xamarin.Forms<\/p>\n","protected":false},"author":544,"featured_media":48762,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,1,367,7745],"tags":[9202,1389,16],"class_list":["post-48761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin","category-xamarin-forms","category-xaml","tag-app-design","tag-design","tag-xamarin-forms"],"acf":[],"blog_post_summary":"

Designing great looking apps can be hard, but with a little inspiration and a little styling you can craft beautiful looking apps with Xamarin.Forms<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/48761","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\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=48761"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/48761\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/48762"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=48761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=48761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=48761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}