Downloaded 70 times
![[DEMO]
[DEMO]
[DEMO]](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/85/Customizing-Xamarin-Forms-UI-6-320.jpg)
![[Activity(Label = "DroidThemes",
Theme = "@android:style/Theme.Material.Light",
MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity
{
...
}](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/85/Customizing-Xamarin-Forms-UI-29-320.jpg)
![Effect.Resolve("MyCompany.ShadowEffect")
[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(MyIOSShadowEffect), "ShadowEffect")]
shared
platform](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/85/Customizing-Xamarin-Forms-UI-38-320.jpg)
![shared
platform
[assembly: ExportRenderer(typeof(MyGaugeView), typeof(MyGaugeRenderer))]
The platform-specific renderer
visualizing the element
The element type](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/85/Customizing-Xamarin-Forms-UI-49-320.jpg)
![[DEMO]
[DEMO]
[DEMO]](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/75/Customizing-Xamarin-Forms-UI-6-2048.jpg)
![[Activity(Label = "DroidThemes",
Theme = "@android:style/Theme.Material.Light",
MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity
{
...
}](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/75/Customizing-Xamarin-Forms-UI-29-2048.jpg)
![Effect.Resolve("MyCompany.ShadowEffect")
[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(MyIOSShadowEffect), "ShadowEffect")]
shared
platform](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/75/Customizing-Xamarin-Forms-UI-38-2048.jpg)
![shared
platform
[assembly: ExportRenderer(typeof(MyGaugeView), typeof(MyGaugeRenderer))]
The platform-specific renderer
visualizing the element
The element type](https://image.slidesharecdn.com/pdfdeck-customizingxamarinformsui-170620150206/75/Customizing-Xamarin-Forms-UI-49-2048.jpg)
Uploaded byXamarin
Customizing Xamarin.Forms UI
The document provides an overview of Xamarin.Forms, detailing how to create and customize user interfaces across multiple platforms using shared C# code. It discusses the implementation of shared and platform-specific elements, the use of custom renderers, and various effects that can be applied to UI components. Additionally, it includes references for further learning and resources related to Xamarin development.
More Related Content
Similar to Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
- 2.
- 6.
- 7. Our work andpersonal data is in the cloud
- 8. We have multipledevices and use whichever is best for each task
- 9. We use devicesin all aspects of our lives
- 10. We expect ourdata to be available on every device we use
- 11.
- 13. Visual Studio for Windowsor 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 thannative 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 CustomRenderers Embedding Native Controls Embedding Xamarin.Forms
- 22. <OnPlatform /> <Label> <Label.BackgroundColor> <OnPlatform x:TypeArguments="Color"> <OnPlatform="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.
- 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 boolFinishedLaunching(...) { 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 AndroidAPIs EditText Result is a native control with the effect applied
- 34.
- 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.
- 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.
- 43. XF Element ButtonContentPage ContentView EntryCell … iOS ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer … Android ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer … Windows ButtonRenderer PageRenderer ViewRenderer EntryCellRenderer …
- 45. Subclass element 1 Subclass renderer and adjustnative 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 voidOnElementChanged(...) { 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))] Theplatform-specific renderer visualizing the element The element type
- 53. Many of thenative controls do not have Xamarin.Forms versions
- 54. A native controllike 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.
- 60. Fragment nativeElement = newMyXamarinFormsPage().CreateFragment(context: this); FrameworkElement nativeElement = new MyXamarinFormsPage().CreateFrameworkElement(); UIViewController nativeElement = new MyXamarinFormsPage().CreateViewController(); iOS
- 64. Starting at $83.25/month Use existingAzure subscription Flexible billing options
- 65. aka.ms/buy-xamarin-university Start your freeXamarin University trial. Learn to build better mobile apps.
- 66. Download visualstudio.com xamarin.com Demo Code aka.ms/customizingxamarinforms Xamarin Universityself-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.
- 69. © Copyright MicrosoftCorporation. All rights reserved.