Stunning Mobile Apps with the Xamarin Visual Design System

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

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

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

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

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

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

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

• 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

And So It Begins…
Google Says Apple Says

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

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

Material Visual
Visual="Material"

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

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

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

competition.”
“Our company supports many apps, so sharing more
code means less burden of support.”

competition.”
“Our company supports many apps, so sharing more
code means less burden of support.”
“To get approved by the regulatory body (FDA).”

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

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

Material Design
• Material is a

Material Design
 Material is a

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

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>, ...

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();
}
}
}

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

Consistent Navigation &
App Structure

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;
}
}
}

Scenarios
1 Page Bottom Tabs Bottom & Top Tabs FlyoutTop Tabs

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

Stunning Mobile Apps with the Xamarin Visual Design System

More Related Content

What's hot (20)

Similar to Stunning Mobile Apps with the Xamarin Visual Design System (20)

More from James Montemagno (17)

Recently uploaded (20)