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) | | ---------------------------------------------------- | ------------------------------------------------------------ | | <img src="Assets/DribCakes/appdemo.gif" alt="demo" width="400"> | <img src="Assets/DribCakes/original.webp" alt="original" width="600"> |

: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) | | ---------------------------------------------------- | ------------------------------------------------------------ | | <img src="Assets/DribGroc/demo2.gif" alt="demo" width="400"> | <img src="Assets/DribGroc/original.gif" alt="original" width="600"> |

:memo: ​Tasks

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

:package: Nuget Used

Xamarin.Plugin.SharedTransitions

03 Comparison Chart

| App Preview | Original design (Shaun Paduano) | | ------------------------------------------------------------ | ------------------------------------------------------------ | | <img src="Assets/DribComp/demo2.gif" alt="demo" width="400"> | <img src="Assets/DribComp/original.gif" alt="original" width="600"> |

:video_camera: Video Recording

https://youtu.be/2hE8r1cWRB4

:memo: Notes

Issues out of the video:

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

04 Bank Cards

| App Preview | Original design (Dimest) | | ----------------------------------------------------------- | ------------------------------------------------------------ | | <img src="Assets/DribBank/demo.gif" alt="demo" width="400"> | <img src="Assets/DribBank/original.gif" alt="original" width="600"> |

:memo:Tasks

1. Assets:

• [x] Card Images
• [x] Icons
• [x] Colors

2. Animation:

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

More coming

:construction: Loading...