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 Recording

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

📝 ​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)

📝 ​Tasks

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

📦 Nuget Used

Xamarin.Plugin.SharedTransitions

03 Comparison Chart

App Preview	Original design (Shaun Paduano)

📹 Video Recording

https://youtu.be/2hE8r1cWRB4

📝 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)

📝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

🚧 Loading...