Creating Great Xamarin.Forms UI's

•

0 likes•40 views

In this session Kym shares techniques for creating great looking User Interfaces in Xamarin.Forms. Everything from finding inspiration, understanding layouts, prototyping, animation and the libraries you should know about. Because Xamarin.Forms UI's don't have to suck. Kym Phillpotts is a Senior Content Developer at Microsoft with a love of all things Xamarin, especially User Experience and Interface Design. He has been an instructor at Xamarin University and co-organises the Melbourne Xamarin User Group. You can also find him streaming Xamarin development on Twitch.

Technology

Creating Great Looking
Xamarin.Forms UI’s
Kym Phillpotts
Senior Content Developer
Microsoft
@kphillpotts
kymphillpotts.com
twitch.tv/kymphillpotts
github.com/kphillpotts

Topics
FINDING
INSPIRATION
DESIGN
TOOLS
CHOOSING
LAYOUTS
ANIMATIONS LIBRARIES

Choosing Layouts
Great for:
• Laying out controls vertically or
horizontal
• Efficiency – it’s light weight
Not Great For:
• Aligning controls
• Overlapping elements

Choosing Layouts
Layout containers don’t have scrolling built
in… but just wrap your content in a scrollview.
Great for:
• Adding scrolling to a control which
could grow larger than the page.

Choosing Layouts
Great for:
• Aligning Controls
• Responsive Design
• Overlapping elements
• Root layouts

Choosing Layouts
Great for:
• Responsive Wrapping
• Staggered Lists

Choosing Layouts
Great for:
• Pixel perfect layout
• Overlapping controls
• Total control

Mix and Match
There is more than one way to skin a cat.
The real question, is which is the most efficient.
Quite often you will be combining different layouts

Layout Properties
 HorizontalOptions, VerticalOptions
 WidthRequest, HeightRequest
 Margin
 Padding
 Spacing (row spacing, column spacing)

VisualElement Property
TranslationX,
TranslationY
Scale
Rotation
RotationX
RotationY
Opacity
Other Layout Properties

VisualElement Property Animation Extension
TranslationX,
TranslationY
TranslateTo
Scale ScaleTo, RelScaleTo
Rotation RotateTo, RelRotateTo,
RotationX RotateXTo
RotationY RotateYTo
Opacity FadeTo
Animation Extensions

https://blog.xamarin.com/complex-animations-xamarin-forms-using-finite-state-machine/
Animation State Machine

Xamarin.Plugin.SharedTransitions
Multi Page Animations

SkiaSharp
For when you need
to take control of
rendering but want
to do it in a cross
platform way.

Favorites
 SkiaSharp
 PancakeView -
Xamarin.Forms.PancakeView
 FFImageLoading + SVG +
Transformations
 DebugRainbows -
Xamarin.Forms.DebugRainbows
 SharedTransitions -
Xamarin.Plugin.SharedTransitions
 Lottie – LottieXamarin
 CardsView
 Popups - UserDialogs

Thanks and Questions?
github.com/kphillpotts
twitch.tv/kymphillpotts
youtube.com/user/kphillpotts
@kphillpotts
kym.Phillpotts@Microsoft.com
kymphillpotts.com

Similar to Creating Great Xamarin.Forms UI's

Should you go deep with your SharePoint site architecture using only a few site collections, or should you stay flat by having a lot of site collections and very few/no sub sites within? In this "he says, she says" session, Dave and Joanne will share pros and cons of different Site Architecture options in SharePoint. Whether you've been in SharePoint for awhile or in the throes of a migration project, it's never too late to re-evaluate the way you've planned out your sites. Like most things in technology, decisions you make today may cause re-work down the road. This session isn't about what is right in ALL cases, but it will arm you with the knowledge you need to make an informed decision on the site architecture that will work best for your environment.

SharePoint Site Architecture: Flat, Deep or somewhere in the middle?

Joanne Klein

Jump to Joomla - Barcamp Nashville 2010

Social LIfe Marketing, LLC

Jump to Joomla - Barcamp Nashville 2010

Social LIfe Marketing, LLC

On Thursday 28th November the group of search experts and business owners, who blog together as "the SEO Chicks" conducted a panel discussion at The Digital Marketing Show at Londons' Excel. The presentation outlines each of the main considerations each of the presenters discussed; including critical concerns, best practise and common mistakes. The SEO Chicks are Lisa Myers, Jackie Hole, Julie Joyce, Judith Lewis, Annabel Hodges, Hannah Smith, Bridget Randolph and Nichola Stott

Technical SEO - An Introduction to Core Aspects of Technical SEO Best-Practise

Erudite

Untangling spring week2

Derek Jacoby

There are plenty of great project management solutions available on the web. Unfortunately you don't have a lot of control over what you can do with them. Wouldn't it be great if you could create a custom tool for your own projects? In this presentation/workshop from WordCamp Toronto 2013, we create a WordPress-powered project communication and collaboration solution using the P2 theme and a smattering of plugins.

Project Management with WordPress & P2 - WordCamp Toronto 2013

WPUniversity

Sallie Goetsch provides a whirlwind tour of some of the available free and premium drag-and-drop (or, in some cases, click-and-add) WordPress themes, frameworks, and plugins, for the August 2013 East Bay WordPress Meetup. Of the themes she actually analyzed, iThemes Builder is the only one that uses child themes (though it is not really drag and drop) and Themify Builder has the most intriguing interface, with front-end editing, though it is extremely heavy on the JavaScript and engages in some questionable practices, like adjusting your PHP memory without telling you it's going to do this. The themes from Site Origin and CyberChimps offer limited drag-and-drop layout options that are easy for beginners to use, though they are designed to work within the existing styles of those themes. In most cases, developers with any knowledge of PHP, HTML, and CSS will want to avoid these themes. Beginners with little knowledge of code may find the learning curve for some of these themes (e.g. PageLines DMS) too overwhelming. In all cases, the use of one of these themes may make it extremely difficult to change themes in the future, because they store content in special database tables. And no ability to drag elements around a grid or select fonts or colors from a drop-down will teach you design skills, so if you don't know the principles of good design, your site could end up looking like a flyer from the early 1990s, when desktop publishing software first became popular.

Drag and-Drop WordPress Themes

East Bay WordPress Meetup

Drag-and-drop WordPress Themes, featuring Themify Builder

East Bay WordPress Meetup

Conquering Chaos: Helix & DevOps

Perforce

LMS Learning Made Simple: Creating a Personalised Learner Experience - Chris ...

Learning Pool Ltd

Content Audits

Memi Beltrame

What Makes for a Successful Migration to SharePoint Online

Andrea Mondello

Track: Inbound Topic: SEARCH ENGINE OPTIMIZATION Title: The Most Important SEO Initiatives to Plan for in 2016 Speaker: ALAN BUSH, VP of Strategy, Ignite Visibility Alan Bush, VP of Strategy of Ignite Visibility and UCSD teacher, reveals the biggest changes in SEO in 2015 and what to focus on in 2016. This presentation is not necessarily for SEO beginners, but instead, for those who have some basic knowledge of SEO and are looking to take their ranking to the next level. - See more at: http://sdama.org/events/2015-art-of-marketing-conference/#session-details

Ignite Visibility: The Most Important SEO Initiatives to Plan for in 2016

AMASanDiego

SharePoint Usability and Design Tips for Non Designers

Wendy Neal

Getting started with dev tools (05 09-17, santa monica) upload

Thinkful

Quick Wins to Jump Start Your SharePoint Implementation - SPEngage Raleigh 2016

Jim Adcock

SEO for Ecommerce: A Comprehensive Guide

Adam Audette

Every major brand has a web presence that may include product sites, a corporate site, apps and social media. As their customers and constituents transition to mobile consumption of brand assets organizations find they need to rebuild their web sites to be more usable, or responsive, in a variety of contexts. The two main approaches to achieve this are to either redevelop the site and architecture from the ground up, or to responsively retrofit the site over time. Each approach has benefits and drawbacks. This webinar will explain the features and benefits of each and make contingent recommendations for choosing between the two. Topics to be covered include: • Understanding Responsive Design • The Customer’s Multi-device Experience • Ground Up Responsive Redesign: Process and Benefits • Responsive Retrofitting: Process and Benefits • How to decide between ground-up and responsive retrofitting

Choices for Responsive Redesign: Ground-up or Responsive Retrofit

Cantina

Every major brand has a web presence that may include product sites, a corporate site, apps and social media. As their customers and constituents transition to mobile consumption of brand assets organizations find they need to rebuild their web sites to be more usable, or responsive, in a variety of contexts. The two main approaches to achieve this are to either redevelop the site and architecture from the ground up, or to responsively retrofit the site over time. Each approach has benefits and drawbacks. This webinar will explain the features and benefits of each and make contingent recommendations for choosing between the two. Examples from Cantina’s responsive site evaluation research project will be included. • Topics to be covered include: • Understanding Responsive Design • The Customer’s Multi-device Experience • Ground Up Responsive Redesign: Process and Benefits • Responsive Retrofitting: Process and Benefits • How to decide between ground-up and responsive retrofitting

Choices for Responsive Redesign: Ground-up or Responsive Retrofit

Cantina

The content management implementation failure rate is higher than it should be, and projects seem to fail for the same cluster of reasons: unrealistic requirements, expectations, human factors, etc. In this session, Deane will discuss the major reasons for project failure learned through almost two decades of implementation experience, and discuss strategies and policies to put in place at each stage of the project to prevent them.

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

Blend Interactive

Similar to Creating Great Xamarin.Forms UI's (20)

SharePoint Site Architecture: Flat, Deep or somewhere in the middle?

Jump to Joomla - Barcamp Nashville 2010

Technical SEO - An Introduction to Core Aspects of Technical SEO Best-Practise

Untangling spring week2

Project Management with WordPress & P2 - WordCamp Toronto 2013

Drag and-Drop WordPress Themes

Drag-and-drop WordPress Themes, featuring Themify Builder

Conquering Chaos: Helix & DevOps

LMS Learning Made Simple: Creating a Personalised Learner Experience - Chris ...

Content Audits

What Makes for a Successful Migration to SharePoint Online

Ignite Visibility: The Most Important SEO Initiatives to Plan for in 2016

SharePoint Usability and Design Tips for Non Designers

Getting started with dev tools (05 09-17, santa monica) upload

Quick Wins to Jump Start Your SharePoint Implementation - SPEngage Raleigh 2016

SEO for Ecommerce: A Comprehensive Guide

Choices for Responsive Redesign: Ground-up or Responsive Retrofit

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

Recently uploaded

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Rafal Los

Microsoft's Threat Matrix for Kubernetes helps organizations understand the attack surface a Kubernetes deployment introduces to their environments. This ensures that adequate detections and mitigations are in place. By covering over 40 different attacker techniques, defenders can learn about Kubernetes-specific mitigations and controls to deploy to their environments. In this session, we will explore the MS-TA9013 Host Path Mount technique, which is commonly used by attackers to perform privilege escalation in a Kubernetes cluster. Attendees will learn how attackers and defenders can: * Escape the container's host volume mount to gain persistence on an underlying node * Move laterally from the underlying node into the customer's cloud environment * Analyze Kubernetes audit logs to detect pods deployed with a hostPath mount * Deploy an admission controller that prevents new pods from using a hostPath mount

Breaking the Kubernetes Kill Chain: Host Path Mount

Puma Security, LLC

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

Slack Application Development 101 Slides

praypatel2

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Friends Colony Women Seeking Men

Delhi Call girls

Scaling API-first – The story of a global engineering organization

Radu Cotescu

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

CNv6 Instructor Chapter 6 Quality of Service

giselly40

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Handwritten Text Recognition for manuscripts and early printed texts

Maria Levchenko

🐬 The future of MySQL is Postgres 🐘

RTylerCroy

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

A Call to Action for Generative AI in 2024

Results

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

Recently uploaded (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Breaking the Kubernetes Kill Chain: Host Path Mount

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Slack Application Development 101 Slides

Powerful Google developer tools for immediate impact! (2023-24 C)

08448380779 Call Girls In Friends Colony Women Seeking Men

Scaling API-first – The story of a global engineering organization

Artificial Intelligence: Facts and Myths

Boost PC performance: How more available memory can improve productivity

CNv6 Instructor Chapter 6 Quality of Service

08448380779 Call Girls In Civil Lines Women Seeking Men

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

What Are The Drone Anti-jamming Systems Technology?

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Handwritten Text Recognition for manuscripts and early printed texts

🐬 The future of MySQL is Postgres 🐘

Axa Assurance Maroc - Insurer Innovation Award 2024

A Call to Action for Generative AI in 2024

GenCyber Cyber Security Day Presentation

Creating Great Xamarin.Forms UI's

1. Creating Great Looking Xamarin.Forms UI’s Kym Phillpotts Senior Content Developer Microsoft @kphillpotts kymphillpotts.com twitch.tv/kymphillpotts github.com/kphillpotts

2. Topics FINDING INSPIRATION DESIGN TOOLS CHOOSING LAYOUTS ANIMATIONS LIBRARIES

3. Finding Inspiration

12. Choosing Layouts Great for: • Laying out controls vertically or horizontal • Efficiency – it’s light weight Not Great For: • Aligning controls • Overlapping elements

13. Choosing Layouts Layout containers don’t have scrolling built in… but just wrap your content in a scrollview. Great for: • Adding scrolling to a control which could grow larger than the page.

14. Choosing Layouts Great for: • Aligning Controls • Responsive Design • Overlapping elements • Root layouts

15. Choosing Layouts Great for: • Responsive Wrapping • Staggered Lists

16. Choosing Layouts Great for: • Pixel perfect layout • Overlapping controls • Total control

17. Mix and Match There is more than one way to skin a cat. The real question, is which is the most efficient. Quite often you will be combining different layouts

18. Layout Properties  HorizontalOptions, VerticalOptions  WidthRequest, HeightRequest  Margin  Padding  Spacing (row spacing, column spacing)

19. VisualElement Property TranslationX, TranslationY Scale Rotation RotationX RotationY Opacity Other Layout Properties

20. Parallax Effects

21. Interesting swipe effect

22. Animations

23. VisualElement Property Animation Extension TranslationX, TranslationY TranslateTo Scale ScaleTo, RelScaleTo Rotation RotateTo, RelRotateTo, RotationX RotateXTo RotationY RotateYTo Opacity FadeTo Animation Extensions

24. Page Entrance Effect

25. Animations are Awaitable

26. They are just tasks

27. Simple Shake Effect

28. Animating Popup Panes

29. Interesting Dialogs

30. Coordinating Animations – Boss Mode

31. https://blog.xamarin.com/complex-animations-xamarin-forms-using-finite-state-machine/ Animation State Machine

32. Xamarin.Plugin.SharedTransitions Multi Page Animations

33. Lottie

34. SkiaSharp For when you need to take control of rendering but want to do it in a cross platform way.

35. Animating Skia

36. AnimatingSkia

37. Libraries you should know

38. Favorites  SkiaSharp  PancakeView - Xamarin.Forms.PancakeView  FFImageLoading + SVG + Transformations  DebugRainbows - Xamarin.Forms.DebugRainbows  SharedTransitions - Xamarin.Plugin.SharedTransitions  Lottie – LottieXamarin  CardsView  Popups - UserDialogs

39. Shameless Plug

40. Thanks and Questions? github.com/kphillpotts twitch.tv/kymphillpotts youtube.com/user/kphillpotts @kphillpotts kym.Phillpotts@Microsoft.com kymphillpotts.com

Creating Great Xamarin.Forms UI's

Recommended

Recommended

More Related Content

Similar to Creating Great Xamarin.Forms UI's

Similar to Creating Great Xamarin.Forms UI's (20)

More from Kym Phillpotts

More from Kym Phillpotts (6)

Recently uploaded

Recently uploaded (20)

Creating Great Xamarin.Forms UI's