Awesome
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
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
: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
- 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) |
---|---|
<img src="Assets/DribComp/demo2.gif" alt="demo" width="400"> | <img src="Assets/DribComp/original.gif" alt="original" width="600"> |
:video_camera: Video Recording
: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) |
---|---|
<img src="Assets/DribBank/demo.gif" alt="demo" width="400"> | <img src="Assets/DribBank/original.gif" alt="original" width="600"> |
: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...