View
579
Download
0
Category
Preview:
Citation preview
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
Shared C# UI
Shared C# business logic
Xamarin.Forms
Shared UI definition
share
dp
latfo
rm
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.UIButtoniOS
Click Me, I Dare You!
Windows.UI.Xaml.Controls.Button
Click Me, I Dare You!
share
d
pla
tform
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; }...
}
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" /><On Platform="iOS" Value="Green" /><On Platform="Android" Value="Black" />
</OnPlatform></Label.BackgroundColor>
</Label>
if (Device.RuntimePlatform == Device.iOS) {// Code for iOS onlyif (Device.TargetIdiom == TargetIdiom.Tablet) {
// Code for iPad only}
}
android:themeUIAppearance
Style +ControlTemplate
iOS
<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!
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)});
}
[Activity(Label = "DroidThemes",Theme = "@android:style/Theme.Material.Light",MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity{
...}
Xamarin
Forms Entry
ShadowEffectuse the Android APIs
EditText
Result is a native
control with the
effect applied
Element
(Button)
Xamarin.Forms.Platform.iOS.ButtonRenderer
UIButton
MyIOSShadowEffect : PlatformEffect
share
dp
latfo
rm
iOS
class MyAndroidShadowEffect : ...{ ... }
class MyIOSShadowEffect : ...{ ...}
class MyUWPShadowEffect : ...{ ...}
The implementation
has access to the
native APIs
share
d
pla
tform
iOS
Button dareButton = new Button();...Effect eff = Effect.Resolve("MyCompany.ShadowEffect"));
dareButton.Effects.Add(eff); // ok
Add the effect
to the collection
Resolve by name
share
d
pla
tform
public class ShadowEffect : RoutingEffect{
public ShadowEffect(): base("MyCompany.ShadowEffect")
{}
}
Supply effect identifier to the
RoutingEffect constructor
share
d
pla
tform
Effect.Resolve("MyCompany.ShadowEffect")
[assembly: ResolutionGroupName("MyCompany")][assembly: ExportEffect(typeof(MyIOSShadowEffect), "ShadowEffect")]
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
Windows.UI.Xaml.Controls.Buttonsh
are
dp
latfo
rm
UIKit.UIButton
iOS
Xamarin.Forms.Platform.Android.ButtonRenderer
Xamarin.Forms.Platform.iOS.ButtonRenderer
Xamarin.Forms.Platform.WinRT.ButtonRenderer
Xamarin.Forms.ButtonElement
share
d
pla
tform iOS
XF Element Button ContentPage ContentView EntryCell …
iOS ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
Android ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
Windows ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
Subclass
element1
Subclass renderer
and adjust native
properties
2
Export
renderer for
element
3
share
d
pla
tform
iOS
public class MyGaugeView : View{
...} sh
are
d
pla
tform
public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyiOSGaugeView> {
...}
public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyAndroidGaugeView>{
...}
public class MyGaugeRenderer : ViewRenderer<MyGaugeView, MyWindowsGaugeView>{
...}
share
d
pla
tform
iOS
protected override void OnElementChanged(...){
base.OnElementChanged(e);
var gaugeView = new MyiOSGaugeView();
base.SetNativeControl(gaugeView);}
Create the
native control
share
d
pla
tform
Tell Xamarin.Forms to add it to the native
screen, this assigns the Control property iOS
share
d
pla
tform
[assembly: ExportRenderer(typeof(MyGaugeView), typeof(MyGaugeRenderer))]
The platform-specific renderer
visualizing the element
The element type
Many of the native
controls do not have
Xamarin.Forms versions
A native control like the iOSUISegmentedControlcan be embedded into a
Xamarin.Forms layout
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
Pages
Fragment nativeElement = new MyXamarinFormsPage().CreateFragment(context: this);
FrameworkElement nativeElement = new MyXamarinFormsPage().CreateFrameworkElement();
UIViewController nativeElement = new MyXamarinFormsPage().CreateViewController(); iOS
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 free trial
aka.ms/buy-xamarin-university
“Xamarin University Presents” Webinar series
aka.ms/xam-u-webinars
aka.ms/xam-u-webinar-recordings
Rob Gibbens@RobGibbens
rob.gibbens@microsoft.com
© Copyright Microsoft Corporation. All rights reserved.
Recommended