Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Training Manager
@RobGibbens
rob.gibbens@microsoft.com
github.com/RobGibbens
arteksoftware.com
[DEMO]
[DEMO]
[DEMO]
Our work and personal data is in the cloud
We have multiple devices and use whichever is best for each task
We use devices in all aspects of our lives
We expect our data to be available on every device we use
iOS
Visual Studio
for Windows or Mac
.NET Library.NET Languages
iOS
C# UI
Shared C# business logic
Android
C# UI
Windows
C# UI
Xamarin.Android and Xamarin.iOS
Separate UIs per platform
iOS
C# UI
Shared C# business logic
Android
C# UI
Windows
C# UI
Xamarin.Android and Xamarin.iOS
Separate UIs per platform
S...
shared
platform
public class Button : Element
{
public Color BorderColor { get; set; }
public int BorderRadius { get; set;...
shared
platform
Fewer customization
options than native peers
public class Button : View ...
{
...
}
public Color CurrentH...
RuntimePlatform checks
Platform Themes
Effects
Custom Renderers
Embedding Native Controls
Embedding Xamarin.Forms
<OnPlatform />
<Label>
<Label.BackgroundColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Windows" Value="Red" />
...
if (Device.RuntimePlatform == Device.iOS) {
// Code for iOS only
if (Device.TargetIdiom == TargetIdiom.Tablet) {
// Code f...
android:themeUIAppearance
Style +
ControlTemplate
iOS
<Application.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Yellow" />
<Setter Property="F...
public override bool FinishedLaunching(...)
{
UISwitch.Appearance.OnTintColor = UIColor.Orange;
UISlider.Appearance.Minimu...
[Activity(Label = "DroidThemes",
Theme = "@android:style/Theme.Material.Light",
MainLauncher = true, Icon = "@mipmap/icon"...
Xamarin
Forms
Entry
ShadowEffect
use the Android APIs
EditText
Result is a native
control with the
effect applied
Element
(Button)
Xamarin.Forms
.Platform.iOS
.ButtonRenderer
UIButton
MyIOSShadowEffect :
PlatformEffect
shared
platform
i...
class MyAndroidShadowEffect : ...
{ ...
}
class MyIOSShadowEffect : ...
{ ...
}
class MyUWPShadowEffect : ...
{ ...
}
The ...
Button dareButton = new Button();
...
Effect eff = Effect.Resolve("MyCompany.ShadowEffect"));
dareButton.Effects.Add(eff);...
public class ShadowEffect : RoutingEffect
{
public ShadowEffect()
: base("MyCompany.ShadowEffect")
{
}
}
Supply effect ide...
Effect.Resolve("MyCompany.ShadowEffect")
[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(MyIOS...
public class Button : Element
{
public Color BorderColor { get; set; }
public int BorderRadius { get; set; }
public double...
Xamarin.Forms
.Platform.Android
.ButtonRenderer
Xamarin.Forms
.Platform.iOS
.ButtonRenderer
Xamarin.Forms
.Platform.WinRT
...
XF Element Button ContentPage ContentView EntryCell …
iOS ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
And...
Subclass
element
1
Subclass renderer
and adjust native
properties
2
Export
renderer for
element
3
shared
platform
iOS
public class MyGaugeView : View
{
...
}
shared
platform
public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyiOSGaugeView>
{
...
}
public class MyGaugeRenderer : ViewRender...
protected override void OnElementChanged(...)
{
base.OnElementChanged(e);
var gaugeView = new MyiOSGaugeView();
base.SetNa...
shared
platform
[assembly: ExportRenderer(typeof(MyGaugeView), typeof(MyGaugeRenderer))]
The platform-specific renderer
vi...
Many of the native
controls do not have
Xamarin.Forms versions
A native control like the iOS
UISegmentedControl
can be embedded into a
Xamarin.Forms layout
var xfContentView = new ContentView();
xfContentView.Content = xfView;
var iOSButton = UIButton.FromType(UIButtonType.Deta...
Pages
Fragment nativeElement =
new MyXamarinFormsPage().CreateFragment(context: this);
FrameworkElement nativeElement =
new MyXa...
Starting at
$83.25/month
Use existing Azure
subscription
Flexible billing
options
aka.ms/buy-xamarin-university
Start your free Xamarin University trial.
Learn to build better mobile apps.
Download
visualstudio.com
xamarin.com
Demo Code
aka.ms/customizingxamarinforms
Xamarin University self-guided learning and...
Rob Gibbens
@RobGibbens
rob.gibbens@microsoft.com
© Copyright Microsoft Corporation. All rights reserved.
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
Upcoming SlideShare
Loading in …5
×

Customizing Xamarin.Forms UI

1,123 views

Published on

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

Published in: Software
  • Be the first to comment

Customizing Xamarin.Forms UI

  1. 1. Training Manager @RobGibbens rob.gibbens@microsoft.com github.com/RobGibbens arteksoftware.com
  2. 2. [DEMO] [DEMO] [DEMO]
  3. 3. Our work and personal data is in the cloud
  4. 4. We have multiple devices and use whichever is best for each task
  5. 5. We use devices in all aspects of our lives
  6. 6. We expect our data to be available on every device we use
  7. 7. iOS
  8. 8. Visual Studio for Windows or Mac .NET Library.NET Languages
  9. 9. iOS C# UI Shared C# business logic Android C# UI Windows C# UI Xamarin.Android and Xamarin.iOS Separate UIs per platform
  10. 10. 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
  11. 11. 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!
  12. 12. 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; } ... }
  13. 13. RuntimePlatform checks Platform Themes Effects Custom Renderers Embedding Native Controls Embedding Xamarin.Forms
  14. 14. <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>
  15. 15. if (Device.RuntimePlatform == Device.iOS) { // Code for iOS only if (Device.TargetIdiom == TargetIdiom.Tablet) { // Code for iPad only } }
  16. 16. android:themeUIAppearance Style + ControlTemplate iOS
  17. 17. <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!
  18. 18. 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)}); }
  19. 19. [Activity(Label = "DroidThemes", Theme = "@android:style/Theme.Material.Light", MainLauncher = true, Icon = "@mipmap/icon")] public class MainActivity : Activity { ... }
  20. 20. Xamarin Forms Entry ShadowEffect use the Android APIs EditText Result is a native control with the effect applied
  21. 21. Element (Button) Xamarin.Forms .Platform.iOS .ButtonRenderer UIButton MyIOSShadowEffect : PlatformEffect shared platform iOS
  22. 22. class MyAndroidShadowEffect : ... { ... } class MyIOSShadowEffect : ... { ... } class MyUWPShadowEffect : ... { ... } The implementation has access to the native APIs shared platform iOS
  23. 23. 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
  24. 24. public class ShadowEffect : RoutingEffect { public ShadowEffect() : base("MyCompany.ShadowEffect") { } } Supply effect identifier to the RoutingEffect constructor shared platform
  25. 25. Effect.Resolve("MyCompany.ShadowEffect") [assembly: ResolutionGroupName("MyCompany")] [assembly: ExportEffect(typeof(MyIOSShadowEffect), "ShadowEffect")] shared platform
  26. 26. 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
  27. 27. Xamarin.Forms .Platform.Android .ButtonRenderer Xamarin.Forms .Platform.iOS .ButtonRenderer Xamarin.Forms .Platform.WinRT .ButtonRenderer Xamarin.Forms.Button Element shared platform iOS
  28. 28. XF Element Button ContentPage ContentView EntryCell … iOS ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer … Android ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer … Windows ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
  29. 29. Subclass element 1 Subclass renderer and adjust native properties 2 Export renderer for element 3 shared platform iOS
  30. 30. public class MyGaugeView : View { ... } shared platform
  31. 31. public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyiOSGaugeView> { ... } public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyAndroidGaugeView> { ... } public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyWindowsGaugeView> { ... } shared platform iOS
  32. 32. 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
  33. 33. shared platform [assembly: ExportRenderer(typeof(MyGaugeView), typeof(MyGaugeRenderer))] The platform-specific renderer visualizing the element The element type
  34. 34. Many of the native controls do not have Xamarin.Forms versions
  35. 35. A native control like the iOS UISegmentedControl can be embedded into a Xamarin.Forms layout
  36. 36. 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
  37. 37. Pages
  38. 38. Fragment nativeElement = new MyXamarinFormsPage().CreateFragment(context: this); FrameworkElement nativeElement = new MyXamarinFormsPage().CreateFrameworkElement(); UIViewController nativeElement = new MyXamarinFormsPage().CreateViewController(); iOS
  39. 39. Starting at $83.25/month Use existing Azure subscription Flexible billing options
  40. 40. aka.ms/buy-xamarin-university Start your free Xamarin University trial. Learn to build better mobile apps.
  41. 41. 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
  42. 42. Rob Gibbens @RobGibbens rob.gibbens@microsoft.com
  43. 43. © Copyright Microsoft Corporation. All rights reserved.

×