头图

​Someone constantly asks me a question on social media: How to make a good-looking application with Xamarin.Forms? This is a very good question. Anyone can create a good-looking application with just a little inspiration and a little style. First of all, I am not a designer, nor do I claim to be a designer, but there are many great inspirations in application design, including Dribbble , uplabs and so on. These talented designs from all over the world can help influence the look and feel of your own apps.
https://www.bilibili.com/video/BV1RL411E7Xf/?aid=&cid=&page=1

Oludayo Alli Designed restaurant application

Dribbble:

https://dribbble.com/

uplabs:

https://www.uplabs.com/

Oludayo Alli:

https://github.com/devcrux?WT.mc_id=friends-0000-jamont

Great Xamarin.Forms built-in features

There are several great features in Xamarin.Forms, and you can use these great features to help implement these designs. Just look at the new Shapes API and you can draw shapes, lines, polygons and more. Want your native controls to have a consistent look and feel? How about Material Design CarouselView with IndicatorView , and of course CollectionView to perfectly combine your CollectionView collection.

https://www.bilibili.com/video/BV1my4y1L7sp/?aid=&cid=&page=1

Javier Suárez 's Beverage Atlas App

Shapes API:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/?WT.mc_id=friends-0000-jamont

Material Design:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/material-visual?WT.mc_id=friends-0000-jamont

CarouselView:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/?WT.mc_id=friends-0000-jamont

IndicatorView:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/indicatorview?WT.mc_id=friends-0000-jamont

CollectionView:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/?WT.mc_id=friends-0000-jamont

Javier Suárez:

https://twitter.com/jsuarezruiz?WT.mc_id=friends-0000-jamont

Drink Atlas:

https://github.com/jsuarezruiz/DrinksGalleryApp?WT.mc_id=friends-0000-jamont

Use custom community controls

Xamarin Community Toolkit continues to add great controls, including DockLayout, Shield, TabView, etc. Of course there are many more from the community great controls, including an incredible Magic Gradients , PancakeView , MaterialFrame , CardView , Shadows and so on. Of course there is SkiaShip , which is a great tool for .NET 2D graphics system.

image.png

Xamarin Community Toolkit:

https://docs.microsoft.com/en-us/xamarin/community-toolkit/?WT.mc_id=friends-0000-jamont

Magic Gradients:

https://devblogs.microsoft.com/xamarin/magic-gradients-xamarinforms/?WT.mc_id=friends-0000-jamont

PancakeView:

https://github.com/sthewissen/Xamarin.Forms.PancakeView?WT.mc_id=friends-0000-jamont

MaterialFrame:

https://github.com/roubachof/Sharpnado.MaterialFrame?WT.mc_id=friends-0000-jamont

CardView:

https://github.com/AndreiMisiukevich/CardView?WT.mc_id=friends-0000-jamont

Shadows:

https://github.com/roubachof/Sharpnado.Shadows?WT.mc_id=friends-0000-jamont

SkiaSharp:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/?WT.mc_id=friends-0000-jamont

Component ecosystem

Components from top component suppliers (such as Telerik , UX Divers , GrapeCity and Syncfusion can help you quickly reuse components to increase productivity. When you are ready to start, look at the various options.

image.png

Telerik:

https://www.telerik.com/xamarin-ui

UX Divers:

https://grialkit.com/

GrapeCity:

https://www.grapecity.com/componentone

Syncfusion:

https://www.syncfusion.com/xamarin-ui-controls

Inspiration

Over the years I thought we had been collecting very good-looking open source applications built with Xamarin. Now you can browse GitHub. I have recommended some good-looking apps, and there are more to inspire you.

image.png

Altevir 's credit card wallet
https://www.bilibili.com/video/BV1mh411B7He/?aid=&cid=&page=1

Leomaris Reyes 's airline flight app

image.png

By the Steven Thewissen written cookbook application

https://www.bilibili.com/video/BV17v411T79q/?aid=&cid=&page=1

Shaw Yu 's cake app

There are many great designs you can browse! You can even add your own, just open a pull request here on the GitHub repo.

Browse on GitHub:

https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI?WT.mc_id=friends-0000-jamont

Altevir:

https://github.com/Altevir?WT.mc_id=friends-0000-jamont

Credit card wallet:

https://github.com/Altevir/xamarinforms-wallet-creditcard?WT.mc_id=friends-0000-jamont

Leomaris Reyes:

https://github.com/LeomarisReyes?WT.mc_id=friends-0000-jamont

Airline flight application:

https://github.com/LeomarisReyes/FlightUISample?WT.mc_id=friends-0000-jamont

Steven Thewissen:

https://twitter.com/devnl

Cookbook app:

https://github.com/sthewissen/iBakePancakes?WT.mc_id=friends-0000-jamont

Shaw Yu:

https://github.com/shawyunz?WT.mc_id=friends-0000-jamont

Cake app:

https://github.com/shawyunz/XampleUI?WT.mc_id=friends-0000-jamont

GitHub repo:

https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI?WT.mc_id=friends-0000-jamont

Adobe XD exporter

Many designs you find online or from designers may have been built using tools such as Adobe XD. With the XD to Xamarin.Forms exporter from our own Kym Phillpotts , you can easily import colors and styles into your Xamarin.Forms application!

https://www.bilibili.com/video/BV1cU4y1E7Ng/?aid=&cid=&page=1

Kym Phillpotts:

https://github.com/kphillpotts?WT.mc_id=friends-0000-jamont

Go create a beautiful application

By leaving a message below or GitHub repo , tell us about your application and welcome to share some great tips.

If you have any technical questions, please go to Microsoft Q&A to ask questions.

GitHub repo:

https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI?WT.mc_id=friends-0000-jamont

Microsoft Q&A:

https://docs.microsoft.com/en-us/answers/products/dotnet


微软技术栈
418 声望994 粉丝

微软技术生态官方平台。予力众生,成就不凡!微软致力于用技术改变世界,助力企业实现数字化转型。