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.

Native cross-platform mobile apps with C# and Xamarin.Forms

3,592 views

Published on

This is the talk I did at DDD South West 6 (http://www.dddsouthwest.com/) on April 25, 2015.

A full recording of the session is at https://www.youtube.com/watch?v=88IlyfGX1Yw

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ➤➤ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs(Official) $69 | Get 90% Off + 8 Special Bonus? ★★★ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs is your passage way to a life full of loving and sex... read more ... ★★★ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Native cross-platform mobile apps with C# and Xamarin.Forms

  1. 1. Native cross-platform mobile apps with C# and Xamarin.Forms Peter Major Apr 25, 2015
  2. 2. Agenda - Xamarin - Xamarin Forms - Should I use Xamarin Forms?
  3. 3. Building Apps Today
  4. 4. Objective-C / Swift - Xcode Java - Eclipse / Android Studio .NET - Visual Studio Native
  5. 5. Hybrid Code: HTML + Javascript Framework: Ionic + Angular Container: Cordova, PhoneGap
  6. 6. What is Xamarin? C# shared code Compiled-to-native code Native UI
  7. 7. What is Xamarin NOT? Write once, run anywhere UI Replacement for learning about each platform
  8. 8. Xamarin - iOS AOT compiled to ARM assembly Mono framework included Exposes CocoaTouch SDK
  9. 9. Xamarin - Android Compiled to IL Runs in MonoVM Exposes Android SDK
  10. 10. Xamarin - Windows Phone Compiled to IL Uses built in phone runtime No Mono / Xamarin SDK required
  11. 11. - Can I use my favorite SDK? Yes - Can I use my favorite Nuget package? Sometimes FAQ
  12. 12. - Are apps slower than native? About the same * - Are apps bigger than native? Yes FAQ * https://medium.com/@harrycheung/mobile-app-performance-redux-e512be94f976
  13. 13. - Can I use async / await? Yes - Can I use “xyz” feature of .NET? Yes * FAQ
  14. 14. Architecture from xamarin.com
  15. 15. Xamarin from hanselman.com
  16. 16. Xamarin + Forms from xamarin.com
  17. 17. - WPF? Forms will be familiar. - Develop by feature, not by platform Xamarin Forms
  18. 18. Forms? <?xml version="1.0" encoding="UTF-8"?> <ContentPage x:Class="EntryTest.Login"> <ContentPage.Content> <StackLayout WidthRequest="200" HorizontalOptions="Center" VerticalOptions="Center"> <Entry Placeholder="Username" /> <Entry Placeholder="Password" /> <Button Text="Login"/> </StackLayout> </ContentPage.Content> </ContentPage>
  19. 19. XAML or code <?xml version="1.0" encoding="UTF-8"?> <ContentPage x:Class="EntryTest.Login"> <ContentPage.Content> <StackLayout WidthRequest="200" HorizontalOptions="Center" VerticalOptions="Center"> <Entry Placeholder="Username" /> <Entry Placeholder="Password" /> <Button Text="Login"/> </StackLayout> </ContentPage.Content> </ContentPage> var page = new ContentPage { Content = new StackLayout { WidthRequest = 200, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, Children = { new Entry { Placeholder = "Username" }, new Entry { Placeholder = "Password" }, new Button { Text = "Login" } } } };
  20. 20. How it works Forms controls are converted by renderers to native controls
  21. 21. Same vs Different - promote brand - familiar platform
  22. 22. Familiar platform
  23. 23. Customization - Style <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="TextColor" Value="Black" /> <Setter Property="BorderWidth" Value="1" /> <Setter Property="BorderRadius" Value="3" /> <Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}" /> <Setter Property="BorderColor" Value="{StaticResource ButtonBorderColor}" /> <Setter Property="Font" Value="{StaticResource ButtonFont}" /> <Style.Triggers> <Trigger Property="controls:ButtonExtensions.IsPrimary" Value="True" TargetType="Button"> <Setter Property="BackgroundColor" Value="{StaticResource PrimaryBackgroundColor}" /> <Setter Property="BorderColor" Value="{StaticResource PrimaryBorderColor}" /> </Trigger> </Style.Triggers> </Style>
  24. 24. Customization - Renderer public class StandardEntryRenderer : EntryRenderer { protected override void OnElementChanged (ElementChangedEventArgs<Entry> e) { base.OnElementChanged (e); if (e.OldElement == null) { AddBorderToControl (); Control.Started += (sender, args) => Control.Layer.BorderColor = YellowBorderColor.CGColor; Control.Ended += (sender, args) => Control.Layer.BorderColor = GreyBorderColor.CGColor; } } void AddBorderToControl() { Control.Layer.CornerRadius = 3; Control.Layer.BorderWidth = 1; Control.Layer.BorderColor = GreyBorderColor.CGColor; } }
  25. 25. Customization - Renderer public class PullToRefreshViewRenderer : VisualElementRenderer<PullToRefreshView> { UIRefreshControl refreshControl; protected override void OnElementChanged(ElementChangedEventArgs<PullToRefreshView> e) { base.OnElementChanged (e); var renderer = Subviews [0] as ListViewRenderer; if (renderer == null) return; refreshControl = new UIRefreshControl (); refreshControl.ValueChanged += OnRefreshingChanged; renderer.Control.AddSubview(refreshControl); UpdateIsRefreshing(); } }
  26. 26. Customization - per-platform <OnPlatform x:TypeArguments="Font" Android="sans-serif,None,21" iOS="HelveticaNeue,None,16" x:Key="TitleFont"/> <Style x:Key="TitleLabel" TargetType="Label"> <Setter Property="AbsoluteLayout.LayoutBounds" Value="0,0,AutoSize,AutoSize" /> <Setter Property="AbsoluteLayout.LayoutFlags" Value="PositionProportional" /> <Setter Property="Font" Value="{StaticResource TitleFont}" /> <Setter Property="TextColor" Value="#333" /> </Style>
  27. 27. MVVM <StackLayout> <Entry Text="{Binding Username}"/> <Entry Text="{Binding Password}"/> <Button Text="Login" Command="{Binding LoginCommand}"/> </StackLayout> public class LoginViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public Command LoginCommand { get; private set; } string _username; public string Username { get { return _username; } set { _username = value; NotifyPropertyChanged(); } } // continued… }
  28. 28. Attached Properties / Triggers <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="TextColor" Value="Black" /> <Setter Property="BorderWidth" Value="1" /> <Setter Property="BorderRadius" Value="3" /> <Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}" /> <Setter Property="BorderColor" Value="{StaticResource ButtonBorderColor}" /> <Setter Property="Font" Value="{StaticResource ButtonFont}" /> <Style.Triggers> <Trigger Property="controls:ButtonExtensions.IsPrimary" Value="True" TargetType="Button"> <Setter Property="BackgroundColor" Value="{StaticResource PrimaryBackgroundColor}" /> <Setter Property="BorderColor" Value="{StaticResource PrimaryBorderColor}" /> </Trigger> </Style.Triggers> </Style>
  29. 29. Behaviors <Entry Placeholder="Enter a System.Double"> <Entry.Behaviors> <local:NumericValidationBehavior /> </Entry.Behaviors> </Entry> public class NumericValidationBehavior : Behavior<Entry> { protected override void OnAttachedTo(Entry entry) { entry.TextChanged += OnEntryTextChanged; base.OnAttachedTo(entry); } protected override void OnDetachingFrom(Entry entry) { entry.TextChanged -= OnEntryTextChanged; base.OnDetachingFrom(entry); } void OnEntryTextChanged(object sender, TextChangedEventArgs args) { double result; bool isValid = Double.TryParse (args.NewTextValue, out result); ((Entry)sender).TextColor = isValid ? Color.Default : Color.Red; } }
  30. 30. - DependencyService - MessagingCenter - Navigation Other features
  31. 31. - Are XF apps slower than native? Yes - Are XF apps bigger than native? Yes Speed / size redux
  32. 32. - New or Existing product? - New or Existing team? - Resources vs user experience Should I use XF?
  33. 33. - Mockups - Prototypes And even if you don’t...
  34. 34. - One UI layout - Very customizable - Initial customization investment - Develop by feature - Very active development Good
  35. 35. - Bugs, fix with renderers - Renderers have “internal” code - No XAML designer - Open source? Bad
  36. 36. - Getting started: http://developer.xamarin.com/guides/cross-platform/getting_started/ - Licensing: https://store.xamarin.com/ - Samples: https://github.com/xamarin/monotouch-samples / https://github.com/xamarin/monodroid- samples - Forms documentation: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/ - Forms samples: https://github.com/xamarin/xamarin-forms-samples Resources

×