출처 : https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI

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!

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:

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:

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:

Bikr

A bike activity App. Sample to show Microcharts usage.

Platforms

Android, iOS & UWP.

Features:

  • SkiaSharp charts.

More information:

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:

GreatPlaces

ListView with transparent background and a purple gradient behind.

Platforms

Android, iOS & UWP.

Features:

  • Custom ViewCells.

More information:

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:

Instagram

Platforms

Android, iOS & UWP.

Features:

More information:

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:

KickassUI.FancyTutorial

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

Platforms

Android & iOS.

Features

More information:

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:

KickassUI.Spotify

A Xamarin.Forms version of the Spotify App.

Platforms

Android & iOS.

Features:

  • Translucent navigation bar.
  • Blurred fullscreen background.
  • Custom Slider.

More information:

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:

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:

Xamarin.Netflix

A Xamarin.Forms version of the Netflix App.

Choose Profile Home Main Menu Movie Detail

Platforms

Android & iOS.

Features:

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

More information:

Facebook

A Xamarin.Forms version of the Facebook App.

Platforms

Android, iOS & UWP.

Features:

  • Right Slide Bar.
  • Disappearing NavigationBar.
  • Like Animations.

More information:

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:

WalkthroughApp

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

Platforms

Android, iOS.

Features:

  • CarouselView
  • Lottie
  • Animations

More information:

아래 글은 cordova, react native, xamarin 을 비교한 글이다.

카페에 보니 react native 이 좋다는 유경험자 말에 찾아보다가 발견한 글인데.

난 C# 개발자라서 Xamarin 이 나에겐 맞는 옷인것 같다.

http://jincrom.tistory.com/56



 

Syncfusion 의 SfRotator 는 아래 그림과 같이 이미지 등을 슬라이드로 보여주는 컨트롤입니다.

우선 보여줄 이미지를 준비합니다.

전 Images 폴더를 만들어 이미지를 넣었습니다.

이미지를 넣고 추가로 해야할건 각 이미지들의 속성에서 '빌드작업'을 '포함 리소스'로 변경해야합니다.

포함리소스 관련해서는 아래 포스팅 참고해주세요

2017/07/06 - [C#.NET/Xamarin] - (Xamarin Forms) 4.Image

 

이제 main1~5.jpg 그림파일을 5개를 이용해서 슬라이드 되도록 할것입니다.

우선  nuget 에서 SfRotator 를 검색해서 설치합니다.

 

아래처럼 xaml 파일을 작성합니다.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
             x:Class="MiGong.HomePage">
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfRotator x:Name="rotator" NavigationStripMode="Dots"  NavigationStripPosition="Bottom"
                                   EnableAutoPlay="true" NavigationDelay="3000"/>

            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

NavigationStripMode 는 네비게이션을 점으로 보일지 아니면 그냥 썸네일 방식으로 보여줄지 여부입니다.

NavigationStripPosition 은 네비게이션의 위치입니다.

EnableAutoPlay 는 자동으로 슬라이드가 될지 여부입니다.

NavigationDelay 는 자동으로 슬라이드되는 경우 정지될 시간입니다. (밀리초단위)

추가로 여러가지 속성이 있습니다.

아래 링크 참고해주세요

https://help.syncfusion.com/xamarin/sfrotator/overview

이제 비하인드 코드 xaml.cs 파일을 아래 처럼 작성합니다.

            List<SfRotatorItem> rotatorItem1 = new List<SfRotatorItem>();

            foreach (string imageName in new string[]{ "main1.jpg", "main2.jpg", "main3.jpg", "main4.jpg", "main5.jpg" })
            {
                SfRotatorItem item = new SfRotatorItem();
               
                Image image
                    = new Image()
                    {
                        Source = ImageSource.FromResource("MiGong.Images." + imageName),
                        Aspect = Aspect.AspectFill,
                        VerticalOptions = LayoutOptions.Center,
                        HeightRequest = 250
                        //WidthRequest = 400
                    };
               
                item.ItemContent = image;
                rotatorItem1.Add(item);
            }
            this.rotator.ItemsSource = rotatorItem1;

이제 실행해 보면 아래처럼 나타납니다.

 

 

 

+ Recent posts

티스토리 툴바