Rob Gibbens shows you how to build better Xamarin.Forms UI using platform-specific APIs that aren’t directly exposed by the framework. He’ll demo how to integrate native controls and adjust visual properties that are unique to each platform while still sharing the majority of your code across platforms. You’ll leave ready with the step-by-step guidance you need to take full advantage of the latest OS-specific UI patterns and designs. Watch the webinar recording at aka.ms/xamu-xamarin.forms-ui-video Explore Xamarin University at xamarin.com/university

2. Training Manager
@RobGibbens
rob.gibbens@microsoft.com
github.com/RobGibbens
arteksoftware.com

6. [DEMO]
[DEMO]
[DEMO]

7. Our work and personal data is in the cloud

8. We have multiple devices and use whichever is best for each task

9. We use devices in all aspects of our lives

10. We expect our data to be available on every device we use

11. iOS

13. Visual Studio
for Windows or Mac
.NET Library.NET Languages

14. iOS
C# UI
Shared C# business logic
Android
C# UI
Windows
C# UI
Xamarin.Android and Xamarin.iOS
Separate UIs per platform

15. iOS
C# UI
Shared C# business logic
Android
C# UI
Windows
C# UI
Xamarin.Android and Xamarin.iOS
Separate UIs per platform
Shared C# UI
Shared C# business logic
Xamarin.Forms
Shared UI definition

17. shared
platform
public class Button : Element
{
public Color BorderColor { get; set; }
public int BorderRadius { get; set; }
public double BorderWidth { get; set; }
public string Text { get; set; }
public Color TextColor { get; set; }
...
}
Android.Widget.Button
Click Me, I Dare You!
UIKit.UIButton
iOS
Click Me, I Dare You!
Windows.UI.Xaml.Controls.Button
Click Me, I Dare You!

18. shared
platform
Fewer customization
options than native peers
public class Button : View ...
{
...
}
public Color CurrentHintColor {...}
public Color CurrentTextColor {...}
public Color HighlightColor {...}
public Color SolidColor {...}
public ColorStateList HintTextColors {...}
public ColorStateList LinkTextColors {...}
public ColorStateList TextColors {...}
public Drawable Background {...}
...
public class Button : Element
{
public Color BorderColor { get; set; }
public int BorderRadius { get; set; }
public double BorderWidth { get; set; }
public string Text { get; set; }
public Color TextColor { get; set; }
...
}

19. RuntimePlatform checks
Platform Themes
Effects
Custom Renderers
Embedding Native Controls
Embedding Xamarin.Forms

22. <OnPlatform />
<Label>
<Label.BackgroundColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Windows" Value="Red" />
<On Platform="iOS" Value="Green" />
<On Platform="Android" Value="Black" />
</OnPlatform>
</Label.BackgroundColor>
</Label>

23. if (Device.RuntimePlatform == Device.iOS) {
// Code for iOS only
if (Device.TargetIdiom == TargetIdiom.Tablet) {
// Code for iPad only
}
}

26. android:themeUIAppearance
Style +
ControlTemplate
iOS

27. <Application.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Yellow" />
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="96" />
</Style>
<Application.Resources/>
Hello Xamarin.Forms!

28. public override bool FinishedLaunching(...)
{
UISwitch.Appearance.OnTintColor = UIColor.Orange;
UISlider.Appearance.MinimumTrackTintColor = UIColor.Magenta;
UISlider.Appearance.MaximumTrackTintColor = UIColor.Cyan;
UINavigationBar.Appearance.BarTintColor = UIColor.FromRGB(51, 134, 238);
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
{ TextColor = UIColor.White, Font = UIFont.ItalicSystemFontOfSize(20)});
}

29. [Activity(Label = "DroidThemes",
Theme = "@android:style/Theme.Material.Light",
MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity
{
...
}

33. Xamarin
Forms
Entry
ShadowEffect
use the Android APIs
EditText
Result is a native
control with the
effect applied

34. Element
(Button)
Xamarin.Forms
.Platform.iOS
.ButtonRenderer
UIButton
MyIOSShadowEffect :
PlatformEffect
shared
platform
iOS

35. class MyAndroidShadowEffect : ...
{ ...
}
class MyIOSShadowEffect : ...
{ ...
}
class MyUWPShadowEffect : ...
{ ...
}
The implementation
has access to the
native APIs
shared
platform
iOS

36. Button dareButton = new Button();
...
Effect eff = Effect.Resolve("MyCompany.ShadowEffect"));
dareButton.Effects.Add(eff); // ok
Add the effect
to the collection
Resolve by name
shared
platform

37. public class ShadowEffect : RoutingEffect
{
public ShadowEffect()
: base("MyCompany.ShadowEffect")
{
}
}
Supply effect identifier to the
RoutingEffect constructor
shared
platform

38. Effect.Resolve("MyCompany.ShadowEffect")
[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(MyIOSShadowEffect), "ShadowEffect")]
shared
platform

41. public class Button : Element
{
public Color BorderColor { get; set; }
public int BorderRadius { get; set; }
public double BorderWidth { get; set; }
public string Text { get; set; }
public Color TextColor { get; set; }
...
}
Android.Widget.Button
Windows.UI.Xaml.Controls.Buttonshared
platform
UIKit.UIButton
iOS

42. Xamarin.Forms
.Platform.Android
.ButtonRenderer
Xamarin.Forms
.Platform.iOS
.ButtonRenderer
Xamarin.Forms
.Platform.WinRT
.ButtonRenderer
Xamarin.Forms.Button
Element
shared
platform iOS

43. XF Element Button ContentPage ContentView EntryCell …
iOS ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
Android ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
Windows ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …

45. Subclass
element
1
Subclass renderer
and adjust native
properties
2
Export
renderer for
element
3
shared
platform
iOS

46. public class MyGaugeView : View
{
...
}
shared
platform

47. public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyiOSGaugeView>
{
...
}
public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyAndroidGaugeView>
{
...
}
public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyWindowsGaugeView>
{
...
}
shared
platform
iOS

48. protected override void OnElementChanged(...)
{
base.OnElementChanged(e);
var gaugeView = new MyiOSGaugeView();
base.SetNativeControl(gaugeView);
}
Create the
native control
shared
platform
Tell Xamarin.Forms to add it to the native
screen, this assigns the Control property iOS

49. shared
platform
[assembly: ExportRenderer(typeof(MyGaugeView), typeof(MyGaugeRenderer))]
The platform-specific renderer
visualizing the element
The element type

53. Many of the native
controls do not have
Xamarin.Forms versions

54. A native control like the iOS
UISegmentedControl
can be embedded into a
Xamarin.Forms layout

55. var xfContentView = new ContentView();
xfContentView.Content = xfView;
var iOSButton = UIButton.FromType(UIButtonType.DetailDisclosure);
iOSButton.TouchUpInside += () => { ... };
View xfView = iOSButton.ToView();
Get a View that can be used in
the Xamarin.Forms visual tree
The Xamarin.Forms View can be
assigned to the content property

59. Pages

60. Fragment nativeElement =
new MyXamarinFormsPage().CreateFragment(context: this);
FrameworkElement nativeElement =
new MyXamarinFormsPage().CreateFrameworkElement();
UIViewController nativeElement =
new MyXamarinFormsPage().CreateViewController(); iOS

64. Starting at
$83.25/month
Use existing Azure
subscription
Flexible billing
options

65. aka.ms/buy-xamarin-university
Start your free Xamarin University trial.
Learn to build better mobile apps.

66. Download
visualstudio.com
xamarin.com
Demo Code
aka.ms/customizingxamarinforms
Xamarin University self-guided learning and free trial
aka.ms/buy-xamarin-university
“Xamarin University Presents” Webinar series
aka.ms/xam-u-webinars
aka.ms/xam-u-webinar-recordings

68. Rob Gibbens
@RobGibbens
rob.gibbens@microsoft.com

69. © Copyright Microsoft Corporation. All rights reserved.