Approaching Build 2019 we want to feature all the fantastic Xamarin work with a new app. The current gallery app is basic and quite old, so it’s a good opportunity to replace that with an app that delivers more joy.
The app will be open source, and serve as a long running project to maintain as a showcase.
• Establish a mobile app design style guide for this app and other samples that puts forth a beautiful experience
• Educate about the Xamarin platform
• Demonstrate controls and features
• Demonstrate common UI/UX patterns
Style Guide
A style guide provides guidance on things such as coding standards, colors, typography, layout, controls, and other common aspects of cross-platform mobile app developers.
Fabric and Fluent do not provide mobile guidance at this time, so contributing to them is out of scope. Still, building upon Fabric and our docs style guidance would be ideal.
Each education point also should double as a sample.
Overview – provide an introduction to the Xamarin value proposition and architecture of a Xamarin application. Link to getting started guides. For the experience, think mobile app onboarding experience. This doubles as an introduction to Xamarin and a sample of onboarding UX.
Links to
• Samples directory
• Docs and Guides
• API browser
• Release notes
Demonstrate Controls and Features
A traditional gallery of controls and layouts with a source viewer (XAML and CSS) and the ability to adjust the properties of the control to view changes. A property grid UI would be extremely useful. Xref to samples, docs, guides.
Provide a global styling profile and Visual toggle.
• Styling Themes – global css/xaml styles
o Light
o Dark
o ?
• Visual – the new control types that should work in concert with styles
o Default
o Material
Demonstrate Common UI and UX Patterns
Showcase of common UI scenarios demonstrating good UX (accessibility, globalization, interaction, form validation).
• Login + Registration + Forgot Password
• Chat UI
• Contact List
• Onboarding (use the Xamarin overview mentioned above)
• Map with bottom sheet (a la Google Maps UI)
• Settings / Preferences / About
• User Profile
• Parallax Scroll (perhaps combined with one of the others)
We have other scenario driven apps such as SmartHotel360 and Tailwind Traders. No need to go too deeply, but would be a nice place to add samples over time.
Acceptance Criteria
• Performant load time (1 second cold)
• Demonstrates
o Basic MVVM pattern
o Xamarin.Forms Shell
o URI navigation + Deep linking (from web)
• No 3rd party NuGets
• Minimal custom renderers
• Storage with online/offline capability
• Published to Apple App Store and Google Play Store
• Published open source to GitHub
• All demonstrations should be as real world as possible
o animation should demonstrate something a developer would actually do, not arbitrarily spinning a cube
Appendix
Community Requests
“Great UI examples that demonstrate how to do cool UI like other apps out there. Especially with Shell coming”
“Xaml tooling similar to chrome dev tools. Auto sizing capabilities similar to bootstrap. Example of common apps as xaml.”
“A sample that's a non-Azure related, enterprise quality, MVVM structured app that brings in data from an API, stores it on-device via Entity Framework Core within a SQLite db. All. In. One. App.”
“A lot more very simple articles, like tips and tricks, for common scenarios. For example, tonight I was trying to add a TitleView to a ContentPage that had a back button; I wanted to add a title and a Submit button on the right. The title wouldn't center properly. Why not? There are so many little scenarios we run into constantly. Think XamGirl but like every day/week.”
“I'd love to see examples of how to make great looking UIs similar to what @devnl has done:”
“Samples where there is XAML you can modify and rerender on the fly so you can you can experiment.”
“An example of keeping on-device data cache in-sync with server end data...Keeping the API Browser sections for Xamarin.Forms up to date... Like the moment you release a new version of Forms, you simultaneously update the API Browser...
Something like XAML Studio but with support for Xamarin.Forms.
Always up-to-date (refreshed yearly), easily accessible Step by Step like publications that go over the whole kit n kaboodle.”
“Try to be inspired by some of a great ideas of Unity3D ecosystem and become they're equivalent for Apps. - Visual scripting for quick prototype like Blueprints”
Overview
Approaching Build 2019 we want to feature all the fantastic Xamarin work with a new app. The current gallery app is basic and quite old, so it’s a good opportunity to replace that with an app that delivers more joy.
The app will be open source, and serve as a long running project to maintain as a showcase.
Replaces: https://developer.xamarin.com/samples/xamarin-forms/FormsGallery/
Goals
• Establish a mobile app design style guide for this app and other samples that puts forth a beautiful experience • Educate about the Xamarin platform • Demonstrate controls and features • Demonstrate common UI/UX patterns
Style Guide
A style guide provides guidance on things such as coding standards, colors, typography, layout, controls, and other common aspects of cross-platform mobile app developers. Fabric and Fluent do not provide mobile guidance at this time, so contributing to them is out of scope. Still, building upon Fabric and our docs style guidance would be ideal.
Fabric for iOS: https://github.com/OfficeDev/office-ui-fabric-ios
Examples:
• https://developer.microsoft.com/en-us/fabric • https://www.carbondesignsystem.com/ • https://marvelapp.com/styleguide/overview/introduction • http://styleguides.io/examples.html
Educate About Xamarin
Each education point also should double as a sample.
Overview – provide an introduction to the Xamarin value proposition and architecture of a Xamarin application. Link to getting started guides. For the experience, think mobile app onboarding experience. This doubles as an introduction to Xamarin and a sample of onboarding UX.
Links to • Samples directory • Docs and Guides • API browser • Release notes
Demonstrate Controls and Features
A traditional gallery of controls and layouts with a source viewer (XAML and CSS) and the ability to adjust the properties of the control to view changes. A property grid UI would be extremely useful. Xref to samples, docs, guides.
Provide a global styling profile and Visual toggle. • Styling Themes – global css/xaml styles o Light o Dark o ? • Visual – the new control types that should work in concert with styles o Default o Material
Demonstrate Common UI and UX Patterns
Showcase of common UI scenarios demonstrating good UX (accessibility, globalization, interaction, form validation). • Login + Registration + Forgot Password • Chat UI • Contact List • Onboarding (use the Xamarin overview mentioned above) • Map with bottom sheet (a la Google Maps UI) • Settings / Preferences / About • User Profile • Parallax Scroll (perhaps combined with one of the others)
We have other scenario driven apps such as SmartHotel360 and Tailwind Traders. No need to go too deeply, but would be a nice place to add samples over time.
Acceptance Criteria
• Performant load time (1 second cold) • Demonstrates o Basic MVVM pattern o Xamarin.Forms Shell o URI navigation + Deep linking (from web) • No 3rd party NuGets • Minimal custom renderers • Storage with online/offline capability • Published to Apple App Store and Google Play Store • Published open source to GitHub • All demonstrations should be as real world as possible o animation should demonstrate something a developer would actually do, not arbitrarily spinning a cube
Appendix
Community Requests
“Great UI examples that demonstrate how to do cool UI like other apps out there. Especially with Shell coming”
“Xaml tooling similar to chrome dev tools. Auto sizing capabilities similar to bootstrap. Example of common apps as xaml.”
“A sample that's a non-Azure related, enterprise quality, MVVM structured app that brings in data from an API, stores it on-device via Entity Framework Core within a SQLite db. All. In. One. App.”
“A lot more very simple articles, like tips and tricks, for common scenarios. For example, tonight I was trying to add a TitleView to a ContentPage that had a back button; I wanted to add a title and a Submit button on the right. The title wouldn't center properly. Why not? There are so many little scenarios we run into constantly. Think XamGirl but like every day/week.”
“I'd love to see examples of how to make great looking UIs similar to what @devnl has done:”
“Samples where there is XAML you can modify and rerender on the fly so you can you can experiment.”
“An example of keeping on-device data cache in-sync with server end data...Keeping the API Browser sections for Xamarin.Forms up to date... Like the moment you release a new version of Forms, you simultaneously update the API Browser...
“Try to be inspired by some of a great ideas of Unity3D ecosystem and become they're equivalent for Apps. - Visual scripting for quick prototype like Blueprints”
Content Map
Prototype
https://www.screencast.com/t/YH6hkIIIi