xamarin.forms、xamarin.android、xamarin.ios UI组件收集大全

5年前 28,242 0

组件资源站

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

https://grialkit.com/

https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms

https://www.infragistics.com/products/xamarin

Xamarin.Forms goodlooking UI Samples

A curated list of awesome Xamarin.Forms samples to show how to create goodlooking UI with Xamarin.Forms.

Work in progress. Contributions are always welcome!

Would you like to see a list of published applications made with Xamarin.Forms? Thank you David Ortinau for the list!

Would you like to see more goodlooking UI samples?. Do you know Snppts?

Credit Card Checkout

This UI Challenge is based on the fantastic dribble designs by Antra Sharma.

Platforms

Android, iOS.

Features:

CardsView.
PancakeView.

More information:

Blog: Xamarin UI Challenge - Credit Card Checkout
Source code: https://github.com/egbakou/CreditCardCheckout
Author: Kodjo Laurent Egbakou

DrinksGalleryApp

Xamarin.Forms goodlooking UI sample using the new CarouselView (Parallax).

Platforms

Android, iOS.

Features:

Animations.
CarouselView.
PancakeView (Corner Radius, Gradients).
Parallax.

More information:

Source code: https://github.com/jsuarezruiz/DrinksGalleryApp
Author: Javier Suárez

Pretty Weather

A very pretty weather application built with Xamarin.Forms.

Platforms

Android, iOS.

Features:

Xamarin.Essentials.
PancakeView (Corner Radius, Gradients).

More information:

Source code: https://github.com/jamesmontemagno/app-pretty-weather
Author: James Montemagno

TravellingApp

Xamarin.Forms goodlooking UI sample using the new CarouselView.

Platforms

Android, iOS.

Features:

Animations.
Xamarin.Forms CarouselView.
Custom Fonts.
Lottie.
Shell.
Video Player.

More information:

Source code: https://github.com/jsuarezruiz/TravellingApp
Author: Javier Suárez

WeatherApp

Beautiful WeatherApp UI in Xamarin.Forms.

Platforms

Android, iOS.

Features

ImageButton
ListView
Styles

More information:

Source code: https://github.com/devcrux/WeatherApp
Author: Oludayo Alli

UnZone

This UI Challenge is based on the fantastic dribble designs by Rick Waalders.

https://dribbble.com/shots/1551934-Unzone-Details-popup-animation

Platforms

Android, iOS.

Features

Animations
BindableLayout

More information:

Source code: https://github.com/kphillpotts/UnZone
Author: Kym Phillpotts

BookSwap

This UI Challenge is based on the fantastic dribble designs by Tubik.

Platforms

Android, iOS.

Features

Animations
ListView
Custom ViewCell
SkiaSharp

More information:

Source code: https://github.com/kphillpotts/BookSwap
Author: Kym Phillpotts

FashionApp

Beautiful Fashion App Design Using Xamarin.Forms.

Platforms

Android, iOS.

Features

CollectionView
Shell

More information:

Source code: https://github.com/devcrux/FashionApp
Author: Oludayo Alli

MarvelCards

A Xamarin.Forms UI Challenge based on https://dribbble.com/shots/5935613-Marvel-Movies-Interaction.

Platforms

Android, iOS.

Features

CardsView
Animations

More information:

Source code: https://github.com/kphillpotts/MarvelCards
Author: Kym Phillpotts

SyncFusion Essential UI Kit for Xamarin.Forms

Elegantly designed XAML templates for Xamarin.Forms apps. These templates follow the MVVM design pattern to provide hassle-free integration and are compatible with Android, iOS, and UWP platforms.

Platforms

Android, iOS and UWP.

Features

Rich, elegant XAML layouts for most common scenarios.
Layouts optimized for phones, tablets, and desktop.
Based on the MVVM design pattern to work with any MVVM framework.
Easy integration.
Developer-friendly APIs.
Appearance customization using styles.
Optimized layouts to get the best possible performance.
Right-to-left rendering support.

More information:

Source code: https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms

AirNZClone

Air NZ app clone using Xamarin.Forms.

Platforms

Android, iOS.

Features:

Animations.
Carousel.

More information:

Source code: https://github.com/rid00z/AirNZClone
Author: Michael Ridland

Balloony

Xamarin Forms UI Challenge based on Ballon Slider Control design.

Platforms

Android, iOS.

Features:

SkiaSharp.
Use Svg (FFImageLoading).
Gestures.

More information:

Source code: https://github.com/shanranm/Balloony
Author: Shanmukha Ranganath

PlayMusicXamarinClone

Google Play Music app clone using Xamarin.Forms Shell.

Platforms

Android, iOS.

Features:

Xamarin.Forms Shell.
CollectionView.
SearchHandler.

More information:

Blog: Xamarin.Forms 4 In Action: Rapid Prototyping
Source code: https://github.com/AlejandroRuiz/PlayMusicXamarinClone
Author: Alejandro Ruiz Varela

FabulousTravel

A beautiful Xamarin Forms sample using Atomic Design, F# and Fabulous.

Platforms

Android, iOS.

Features:

Carousel.
F# UI (using Fabulous).

More information:

Blog: Creating beautiful Xamarin Forms apps using Atomic Design, F# and Fabulous
Source code: https://github.com/mallibone/FabulousTravel
Author: Mark Allibone

FicusUIChallenge

Xamarin.Forms UI Challenge Ficus IoT App.

Platforms

Android, iOS.

Features:

Custom ListView.
Corner Radius.

More information:

Source code: https://github.com/Pujolsluis/FicusUIChallenge
Author: Luis Pujols

XamBookLibrary

Xamarin.Forms UI challenge from the design by Victoria Sgarro.

Platforms

Android, iOS.

Features:

Animations.
Circle Images.
PancakeView (Corners, etc.).

More information:

Source code: https://github.com/shanranm/XamBookLibrary
Author: Shanmukha Ranganath

Art Plant Mall

A Xamarin.Forms UI challenge from the design by JIANGGM.

Platforms

Android, iOS.

Features:

Animations.
CollectionView.
VisualStateManager.
Custom Controls.
Parallax effect.

More information:

Blog: [Xamarin UI Challenge] Art Plant Mall
Source code: https://github.com/jsuarezruiz/Art-Plant-Mall
Author: Javier Suárez

Run Away!

The Run Away! app: Drawing gradient lines on top of Maps with SkiaSharp.

Platforms

Android, iOS.

Features:

Maps.
Paths in the map using SkiaSharp.

More information:

Blog: The Run Away! app: Drawing gradient lines on top of Maps with SkiaSharp
Source code: https://github.com/roubachof/SkiaSharpnado
Author: Jean-Marie Alfonsi

RottenUI

A Xamarin.Forms UI Challenge.

Platforms

Android, iOS.

Features:

SkiaSharp.
PancakeView.
Custom tabs.

More information:

Source code: https://github.com/kphillpotts/RottenUI
Author: Kym Phillpotts

Mountain Mobile

A Xamarin.Forms UI Challenge playing with SkiaSharp and animations.

Platforms

Android, iOS.

Features:

SkiaSharp.
Animations.

More information:

Source code: https://github.com/kphillpotts/MountainMobile
Author: Kym Phillpotts

Payment UI Sample

A beautiful credit card payment UI, inspired by the following UI from CVTemplates.

Platforms

Android, iOS.

Features:

Visual.
Behaviors.

More information:

Blog: Credit Card Payment UI in Xamarin Forms
Source code: https://github.com/CrossGeeks/PaymentUISample
Author: Charlin Agramonte

xUber

Uber Clone using Xamarin.Forms.

Platforms

Android, iOS.

Features:

Google Maps.
Cards.
Dialogs.

More information:

Blog: Introducing xUber – Uber clone using Xamarin Forms
Source code: https://github.com/CrossGeeks/xUber
Author: Rendy del Rosario

KickassUI.Banking

A Xamarin.Forms version of a banking app concept, showing off how to use a base page.

Platforms

Android, iOS.

Features:

BasePage.
Xamarin Essentials.
PancakeView.

More information:

Blog: Create a kickass banking app using a BasePage in Xamarin
Source code: https://github.com/sthewissen/KickassUI.Banking
Author: Steven Thewissen

YellowClone

A Yellow App clone made with Xamarin.Forms.

Platforms

Android, iOS.

Features:

Custom Map.
MasterDetailPage.

More information:

Source code: https://github.com/ionixjunior/YellowClone
Author: Ione Souza Junior

Xamarin CloudMusic

A Xamarin.Forms version of the NeteaseCloudMusic app.

Platforms

Android, iOS.

Features:

Animations.
Audio Visualizer.
Blur Effect.
Parallax Effect.
Translucent StatusBar.
Video Player.
Xamarin.Forms Shell.

More information:

Source code: https://github.com/o1298098/Xamarin-CloudMusic
Author: o1298098

DayVsNight

A Xamarin.Forms UI Challenge.

Platforms

Android, iOS.

Features:

SkiaSharp controls.
PancakeView.

More information:

Source code: https://github.com/kphillpotts/DayVsNight
Author: Kym Phillpotts

WhatsAppUI

WhatsApp UI in Xamarin.Forms.

Platforms

Android, iOS.

Features:

Custom Floating Action Button.
Use of Emoji.
Use of the camera.

More information:

Source code: https://github.com/egbakou/WhatsAppUI
Author: Kodjo Laurent Egbakou

The EMI (Equated Monthly Instalment) Calculator is an application developed using Xamarin.Forms and Syncfusion controls to calculate the EMI with the given details of principal amount, tenure, and interest.

Platform

Android, iOS.

Features:

XAML UI
Converters
Custom controls
Data binding
Behaviours
MVVM
Xamarin.Essentials
Localization
Styles
AutoFac for dependency injection
Phone and tablet layout

More information:

Source code: https://github.com/syncfusion/xamarin-showcase-emi-calculator

This project uses the following Syncfusion controls:

Timeline With Images

Awesome UI: Timeline with images in Xamarin.Forms.

Platforms

Android, iOS.

Features:

ListView to Timeline.
Custom ViewCell.

More information:

Source code: https://github.com/egbakou/Timeline
Author: Kodjo Laurent Egbakou

ArtNews

Xamarin.Forms good looking UI sample. This sample is based on Art News App designed by Shirley Yao.

Platforms

Android, iOS.

Features:

XAML Animations.
BindableLayout.
CollectionView
Page transitions.
Shared element transitions.

More information:

Source code: https://github.com/jsuarezruiz/ArtNews
Author: Javier Suárez

ArtAuction

A Xamarin.Forms Layout challenge. From the design found at: https://dribbble.com/shots/6177235-Valuable-Auction-Product-Page by Alex Pesenka.

Platforms

Android, iOS, UWP.

Features:

Animations.
BindableLayout.

More information:

Blog: Xamarin.Forms UI Challenges - Art Auction
Source code: https://github.com/kphillpotts/ArtAuction
Author: Kym Phillpotts

TimelinePulse

Xamarin.Forms good looking UI sample. This sample is based on Timeline Profile Screen designed by Anton Aheichanka.

Platforms

Android, iOS.

Features:

SkiaSharp.

More information:

Source code: https://github.com/jsuarezruiz/TimelinePulse
Author: Javier Suárez

KickassUI.Traveler

A Xamarin.Forms version of the Traveler app to prove you can create good-looking UI with Xamarin.Forms.

Platforms

Android, iOS.

Features:

CollectionView.
PancakeView.

More information:

Blog: Travel broadens the mind…
Source code: https://github.com/sthewissen/KickassUI.Traveler
Author: Steven Thewissen

AnimatedHighlightApp

A Xamarin.Forms application with form highlight animation using SkiaSharp and Xamarin.Forms built-in animations.

Platforms

Android, iOS.

Features:

SkiaSharp.

More information:

My Tasks

A Xamarin.Forms version of the Filter Menu design by Anton Aheichanka to prove you can create goodlooking UI with Xamarin.Forms.

Platforms

Android, iOS.

Features:

Xamarin.Forms Animations.
SkiaSharp.

More information:

Blog: [Xamarin.Forms Challenge] My Tasks
Source code: https://github.com/jsuarezruiz/MyTasks
Author: Javier Suárez

KickassUI.Chameleon

A Xamarin.Forms version of the Chameleon app to prove you can create goodlooking UI with Xamarin.Forms.

Platforms

Android, iOS.

Features:

Xamarin Essentials.
Lottie.

More information:

Blog: Creating an encyclopedia page in Xamarin.Forms
Source code: https://github.com/sthewissen/KickassUI.Chameleon
Author: Steven Thewissen

BindableLayoutPlayground

A Xamarin.Forms sample to show how to use Bindable Layout. This sample is based on User Profile Screen designed by Hernan Vionnet.

Platforms

Android, iOS & UWP.

Features:

Xamarin.Forms BindableLayout.
CSS.

More information:

Source code: https://github.com/jsuarezruiz/BindableLayoutPlayground
Author: Javier Suárez

Tailwind Traders

A fictitious retail company showcasing the future of intelligent mobile application experiences.

Platforms

Android & iOS.

Features:

Xamarin.Forms Shell.
SkiaSharp.

More information:

Source code: https://github.com/Microsoft/TailwindTraders-Mobile

Posy

A simple but good looking Xamarin.Forms UI screen.

Platforms

Android & iOS.

Features:

Gradient background on the content page.
A randomly generated set of stars that rotates independently.
A small card with the result of your calculations.
A beautiful moon, also rotating independently.
Some entry animation of controls.

More information:

Blog: Xamarin.Forms in Space!
Source code: https://github.com/sthewissen/Posy
Author: Steven Thewissen

KickassUI.ParallaxCarousel

A Xamarin.Forms Carousel using a nice parallax effect.

Platforms

Android & iOS.

Features:

Xamarin.Forms 3.2
Caroulel
Parallax
Gradient Color animation

More information:

Source code: https://github.com/sthewissen/KickassUI.ParallaxCarousel
Author: Steven Thewissen

PulseMusic

A Xamarin.Forms music player sample.

Platforms

Android & iOS.

Features:

Xamarin.Forms 3.1
SkiaSharp
Animations

More information:

Source code: https://github.com/jsuarezruiz/PulseMusic
Author: Javier Suárez

Martin Finkel has created a version of the application with real player using libvlcsharp.

Restaurant-App

Restaurant App is a sample open source application, powered by ASP.NET Core 2.1 and Xamarin.Forms 3.0. It incorporates material design and provides us with an overview of how to build mobile and web applications with a clean architecture and write testable and clean code.

Platforms

Android, iOS & UWP for client app. ASP.NET Core 2.1 for server API.

Features:

Xamarin.Forms 3.1

More information:

Source code: https://github.com/Jurabek/Restaurant-App
Author: Jurabek Azizkhujaev

My Trip Countdown

A Xamarin.Forms timer until your next vacation.

Platforms

Android & iOS.

Features:

Xamarin.Forms 3.1
SkiaSharp

More information:

Source code: https://github.com/jsuarezruiz/MyTripCountdown
Author: Javier Suárez

ConferenceVision

Sample Xamarin.Forms 3.0 Phone App showed in Microsoft Build 2018. Use your camera during a conference to capture your experience. Let Vision do the heavy lifting of identifying known products and scan your images to text for easier searching.

Platforms

Android, iOS & UWP.

Features:

Xamarin.Forms 3.0
FlexLayout
CSS
VisualStateManager
Custom Vision
Computer Vision API

More information:

Source code: https://github.com/Microsoft/ConferenceVision

SmartHotel

Travelers are always on the go, so SmartHotel360 offers a beautiful fully-native cross-device mobile app for guests and business travelers built with Xamarin.

Platforms

Android, iOS & UWP.

Features:

Custom animations from XAML.
Custom Map.
SkiaSharp Charts.
Xamarin.Forms Native Forms.
Live Player.
NFC.

More information:

Source code: https://github.com/Microsoft/SmartHotel360-mobile-desktop-apps

BikeSharing

BikeSharing360 is a fictitious example of a smart bike sharing system with 10,000 bikes distributed in 650 stations located throughout New York City and Seattle. Their vision is to provide a modern and personalized experience to riders and to run their business with intelligence. Was a demo in the Connect(); 2016.

Platforms

Android, iOS & UWP.

Features:

Custom animations from XAML.
Custom Map.

More information:

Source code: https://github.com/Microsoft/BikeSharing360_MobileApps

Bikr

A bike activity App. Sample to show Microcharts usage.

Platforms

Android, iOS & UWP.

Features:

SkiaSharp charts.

More information:

Source code: https://github.com/aloisdeniel/Microcharts.Samples
Author: Aloïs Deniel

Evolve

Xamarin Evolve 2016 Mobile App.

This app is around 15,000 lines of code. The iOS version contains 93% shared code, the Android version contains 90% shared code, the UWP has 99% shared code, and our Azure backend contains 23% shared code with the clients!

Platforms

Android, iOS & UWP.

Features:

Azure + Online/Offline Sync
Barcode Scanning
Calendar Integration
Maps & Navigation
Push Notifications
Phone Dialer
Wi-Fi configuration
URL Navigation (Universal Links + Google App Indexing)

More information:

Source code: https://github.com/xamarinhq/app-evolve
Authors: James Montemagno & Pierce Boggan

GreatPlaces

ListView with transparent background and a purple gradient behind.

Platforms

Android, iOS & UWP.

Features:

Custom ViewCells.

More information:

Blog: Xamarin.Forms Layout Challenges – Great Places
Source code: https://github.com/kphillpotts/XamarinFormsLayoutChallenges
Author: Kym Phillpotts

InAnger

Samples to show that Xamarin.Forms is capable of creating something that looks really good.

Platforms

Android & iOS.

Samples

Find a Vet
Phoenix Peaks
Jobbberr
Woofer
HeatMap
Hot Sauce
Findr
MallDash

More information:

Source code: https://github.com/awolf/Xamarin-Forms-InAnger
Author: Adam J Wolf

Instagram

Platforms

Android, iOS & UWP.

Features:

Custom Entry.
Circle Images.

More information:

Blog: Creating The Instagram UI In Xamarin.Forms
Source code: https://github.com/adamped/Instagram
Author: Adam Pedley

Social Media

This sample show how to recreate a beautifull Social Network profile type page in Xamarin.Forms.

Features:

Curved header Image.
Profile Image that overlaps the header.

More information:

Blog: Xamarin.Forms Layout Challenges – Social Network App
Source code: https://github.com/kphillpotts/XamarinFormsLayoutChallenges
Author: Kym Phillpotts

KickassUI.FancyTutorial

A simple (but beautiful) Xamarin.Forms tutorial screen.

Platforms

Android & iOS.

Features

Carousel

More information:

Blog: Creating a simple but good-looking app tutorial
Source code: https://github.com/sthewissen/KickassUI.FancyTutorial
Author: Steven Thewissen

KickassUI.Runkeeper

A Xamarin.Forms version of the Runkeeper App.

Platforms

Android & iOS.

Features:

Custom Tabs.
Custom fonts in the page header.
Custom logo in page header.
Carousel.
Custom Map.

More information:

Blog: Creating a good-looking Xamarin Forms UI: Runkeeper
Source code: https://github.com/sthewissen/KickassUI.Runkeeper
Author: Steven Thewissen

KickassUI.Spotify

A Xamarin.Forms version of the Spotify App.

Platforms

Android & iOS.

Features:

Translucent navigation bar.
Blurred fullscreen background.
Custom Slider.

More information:

Blog: Creating a good-looking Xamarin Forms UI: Spotify
Source code: https://github.com/sthewissen/KickassUI.Spotify
Author: Steven Thewissen

KickassUI.Twitter

A Xamarin.Forms version of the Twitter App.

Platforms

Android & iOS.

Features:

Android floating action button.
MasterDetailPage custom icon.
Custom Tabs (colors).

More information:

Blog: Creating a good-looking Xamarin Forms UI: Twitter
Source code: https://github.com/sthewissen/KickassUI.Twitter
Author: Steven Thewissen

Timeline

A timeline of activities. This is useful for things like transportation schedules or class times.

Platforms

Android, iOS & UWP.

Features:

ListView Header and Footer.
Custom ViewCell.

More information:

Blog: Xamarin.Forms Layout Challenges – Timeline
Source code: https://github.com/kphillpotts/XamarinFormsLayoutChallenges
Author: Kym Phillpotts

Xamarin.Netflix

A Xamarin.Forms version of the Netflix App.

Platforms

Android & iOS.

Features:

Horizontal List.
Transparent NavigationBar on Android and iOS.
Parallax effect.
Multi-column List.

More information:

Blog: Creando la interfaz de Netflix con Xamarin.Forms
Source code: https://github.com/jsuarezruiz/xamarin-forms-netflix-sample
Author: Javier Suárez

Facebook

A Xamarin.Forms version of the Facebook App.

Platforms

Android, iOS & UWP.

Features:

Right Slide Bar.
Disappearing NavigationBar.
Like Animations.

More information:

Blog: Beautiful Xamarin – Facebook Clone in Xamarin.Forms
Source code: https://github.com/XAM-Consulting/FacebookForms
Author: Michael Ridland

Movies

Movies is a Xamarin.Forms GTK backend application that makes use of The Movie Database (TMDb) API to demonstrate the possibilities of the new backend making use of a great variety of functionality.

Platforms

Android, iOS, Linux (GTK), macOS, UWP and Windows (WPF).

Features:

MasterDetailPage.
Maps.
Gtk Themes.
Desktop Apps for Linux, macOS and Windows.

More information:

Source code: https://github.com/jsuarezruiz/xamarin-forms-gtk-movies-sample
Author: Javier Suárez

WalkthroughApp

WalkthroughApp is a Xamarin.Forms application that makes use of CarouselView and Lottie, to demonstrate the possibilities of creating a fluid and powerful Walkthrough without requiring Custom Renderers.