XampleUI

// A Xamarin.Forms solution to replicate interesting UI design.

var XampleUI = "Xamarin sample UI";

var Template = "XF.Shell";

var HandyTools = {"XamlStyler", "Snipast"};

var TableOfContents = {

    01 Cakes Mobile App

    02 Groceries Shopping App

    03 Comparison Chart

};

01 Cakes Mobile App

App Preview	Original design (Ghulam Rasool)

:video_camera: Video Recording

https://youtu.be/Lq7-2PzsSpY

:memo: ​Notes

• Margin or padding in the same row or column might not be consistent (as a rookie image cutter).
• Different item size makes it difficult to turn into an infinite list.
• Pin a screenshot (Snipast) made UI QA easier.
• Cropping and editing images are time-consuming.
• Rendering a video requires a better CPU.
• Font in "this" page is different from the gif above (By the font license, font files are not pushed).

02 Groceries Shopping App

App Preview	Original design (Cuberto)

:memo: ​Tasks

• item transition to detail
• item transition to cart
• real cart
• scroll animation
• Uneven list view

:package: Nuget Used

Xamarin.Plugin.SharedTransitions

03 Comparison Chart

App Preview	Original design (Shaun Paduano)

:video_camera: Video Recording

https://youtu.be/2hE8r1cWRB4

:memo: Notes

Issues out of the video:

• PIN button position and switch issue,
• use a new property for the pinned list
• Update the mock data and page binding
• Scroll page height
• disposed object issue

04 Bank Cards

App Preview	Original design (Dimest)

:memo:Tasks

1. Assets:

• Card Images
• Icons
• Colors

2. Animation:

• Number update animation.
• Card swipe away.
• Transition to the detail page.
• Flip animation. (demo done in XampleControl)

More coming

:construction: Loading...