Xamarin.Forms excels at quickly producing cross-platform mobile experiences that look and feel at home on the host platforms. But how do you make sure your app experience is also consistent with your brand experience? Now with Xamarin.Forms Visual you can adopt a singular look and feel across your native applications, and even share that experience across multiple applications. Whether you want Material Design everywhere, or you want to craft your own, in this session you'll learn how to build a Visual implementation, consume it in your app(s), and distribute it. Visual is the next step forward in creating beautiful, native UI with Xamarin. To top it off we will look at the next generation of productivity tools for Xamarin developers to help them create stunning apps.

1. James Montemagno
Program Manager
Microsoft
Intermediate
T02
Stunning Mobile Apps with the
Xamarin Visual Design System

2. .NET

3. What is Xamarin?

4. An open source app platform
from Microsoft for
building modern & performant
iOS, Android, macOS,
watchOS, & tvOS apps with .NET.

5. aka.ms/xamarin-showcase

6. Shared C#
Business Logic • Platform APIs • User Interface
Xamarin App Architecture
Shared C# codebase • 100% native API access • High performance
.NET
C# C# C#

7. Xamarin App Architecture
Shared C#
Business Logic • Platform APIs • User Interface
.NET
C# C# C#

9. Xamarin.Essentials
aka.ms/xamarinessentials
Flashlight
Geolocation
Preferences
Device Info
Device Display Info
Secure Settings
Accelerometer
Battery
Clipboard
Compass
Connectivity
Data Transfer
Email
File SystemGeocoding
Gyroscope
Magnetometer
Phone Dialer
Screen Lock
Sms
Text to Speech
Vibration

10. Xamarin.Essentials: Cross-Platform Native APIs
Shared C#
Business Logic • User Interface
.NET
C# C# C#
Xamarin.Essentials

13. Xamarin.Forms: Cross-Platform Native UI
.NET
C# C#
Shared C#
Business Logic
Xamarin.Essentials
C#
Xamarin.Forms - UI

15. • 480x320 display at 163ppi
• 128 Mb RAM
• 32 bit ARM at 412Mhz
• GeekScore ~120
• 2 megapixel camera
• PowerVR GPU at 150Mhz
iPhone 3G iPhone XS

17. Today

18. Today

19. Google Says Apple Says

20. Google Says Apple Says

21. Google Says Apple Says

22. And So It Begins…
Google Says Apple Says

24. Exaclty the
Same
34%
Mostly the
Same
56%
Distinct
10%

25. Controls
Effects Behaviors
PlatformSpecifics
Custom Controls
Custom Renderers
Skia
Third Party
Controls
???????
Styles OnPlatform

26. Enter Visual

28. Material Visual
Visual="Material"

31. Visual
• Sets of renderers
• Adhering to a specific design system
• Beginning with Material Design
• ActivityIndicator
• Button
• Editor
• Entry
• Frame
• Picker
• ProgressBar
• Slider
• Stepper

32. Visual – The Renderer Process
Forms.Init
Registers Button
renderers by type
and visual marker
new
ContentPage()
App parses UI
graph which asks
for a Button
Looks up
renderer by
type & visual
Fallback is default
renderer
Creates
detached
instance
Populates
properties
Attaches
to visual
tree

33. Why Consistency Matters

37. “By supporting one UI we can move faster than our
competition.”

38. “By supporting one UI we can move faster than our
competition.”
“Our company supports many apps, so sharing more
code means less burden of support.”

39. “By supporting one UI we can move faster than our
competition.”
“Our company supports many apps, so sharing more
code means less burden of support.”
“To get approved by the regulatory body (FDA).”

43. A design system is a series of
components that can be reused in
different combinations. Design
systems allow you to manage
design at scale.
https://www.forumone.com/ideas/what-is-design-system/
Material Design
• Material is a

44. Designers wishing to give their suite
of products a unique but
consistent look and feel define a
design language for it, which can
describe choices for design aspects
such as materials, colour schemes,
shapes, patterns, textures, or
layouts.
https://en.wikipedia.org/wiki/Design_language
Material Design
• Material is a

45. Designers wishing to give their suite
of products a unique but
consistent look and feel define a
design language for it, which can
describe choices for design aspects
such as materials, colour schemes,
shapes, patterns, textures, or
layouts.
https://en.wikipedia.org/wiki/Design_language
Material Design
• Material is a

46. Material Design
• Material is a

47. Material Design
• Material is a

48. Material Design
• Material is a

49. Material Design
• Material is a

50. Material Design
 Material is a

51. Material Design
• Material is a

52. Material Design
• Material is a

53. Material Design
• Material is a

54. Material Design
• Material is a

55. Material Design
• Material is a

56. Material Design
• Material is a

57. Material Design
• Material is a

58. Bring Your Design System

59. Material Visual
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button),
typeof(MaterialButtonRenderer),
new[] { typeof(VisualMarker.MaterialVisual) })
]
namespace Xamarin.Forms.Material.Android
{
public class MaterialButtonRenderer : MButton, ...
{

60. Material Visual
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button),
typeof(MaterialButtonRenderer),
new[] { typeof(VisualMarker.MaterialVisual) })
]
namespace Xamarin.Forms.Material.Android
{
public class MaterialButtonRenderer : MButton, ...
{

61. Material Visual
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button),
typeof(Xamarin.Forms.Material.iOS.MaterialButtonRenderer),
new[] { typeof(VisualMarker.MaterialVisual) })
]
namespace Xamarin.Forms.Material.iOS
{
public class MaterialButtonRenderer :
ViewRenderer<Button, MButton>, ...

62. Material Visual
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button),
typeof(Xamarin.Forms.Material.iOS.MaterialButtonRenderer),
new[] { typeof(VisualMarker.MaterialVisual) })
]
namespace Xamarin.Forms.Material.iOS
{
public class MaterialButtonRenderer :
ViewRenderer<Button, MButton>, ...

63. Material Visual
namespace Xamarin.Forms
{
public static class FormsMaterial
{
public static void Init(Context context, Bundle bundle)
{
// my only purpose is to exist so when called
// this dll doesn't get removed
VisualMarker.RegisterMaterial();
}
}
}

67. Original - Coinbase

68. Original - Quantas

69. Before Visual After Visual

71. Dribble - Mockup
https://www.thewissen.io/travel-broadens-the-mind/

72. Consistent Navigation &
App Structure

74. Flyout Made Simple
<FlyoutItem Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<FlyoutItem Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:App6.Views"
x:Class="App6.Views.MainPage">
<MasterDetailPage.Master>
<views:MenuPage />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:ItemsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable="d"
x:Class="App6.Views.MenuPage"
Title="Menu">
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="ListViewMenu"
HasUnevenRows="True">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10">
<Label Text="{Binding Title}" d:Text="{Binding .}"
FontSize="20"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
menuItems = new List<HomeMenuItem>
{
new HomeMenuItem {Id = MenuItemType.Browse, Title="Browse" },
new HomeMenuItem {Id = MenuItemType.About, Title="About" }
};
ListViewMenu.ItemsSource = menuItems;
ListViewMenu.SelectedItem = menuItems[0];
ListViewMenu.ItemSelected += async (sender, e) =>
{
if (e.SelectedItem == null)
return;
var id = (int)((HomeMenuItem)e.SelectedItem).Id;
await RootPage.NavigateFromMenu(id);
};
public partial class MainPage : MasterDetailPage
{
Dictionary<int, NavigationPage> MenuPages = new Dictionary<int, NavigationPage>();
public MainPage()
{
InitializeComponent();
MasterBehavior = MasterBehavior.Popover;
MenuPages.Add((int)MenuItemType.Browse, (NavigationPage)Detail);
}
public async Task NavigateFromMenu(int id)
{
if (!MenuPages.ContainsKey(id))
{
switch (id)
{
case (int)MenuItemType.Browse:
MenuPages.Add(id, new NavigationPage(new ItemsPage()));
break;
case (int)MenuItemType.About:
MenuPages.Add(id, new NavigationPage(new AboutPage()));
break;
}
}
var newPage = MenuPages[id];
if (newPage != null && Detail != newPage)
{
Detail = newPage;
if (Device.RuntimePlatform == Device.Android)
await Task.Delay(100);
IsPresented = false;
}
}
}

75. Scenarios
1 Page Bottom Tabs Bottom & Top Tabs FlyoutTop Tabs

77. Thank you.
James
Montemagno
Principal Program Manager – Mobile Developer Tools,
Microsoft
motz@microsoft.com Montemagno.com @JamesMontemagno
Weekly development podcast
mergeconflict.fm
Weekly development show
xamarinshow.com