1. Xamarin.Forms
Hands On

2. Hands-On: Xamarin Forms
Ziele
Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views
UI aus Code mit Data Binding
Erweitern von Forms Elementen mit Native Custom Renderer
UI aus Xaml, Custom View mit XAML
Aufrufen von Systemfunktionen mit DependencyService

3. Pages

4. Layouts

5. LayoutOptions
Start
Center
End
Expand
WidthRequest
HeightRequest

6. Views

7. UI Gallery Sample App
Zeigt Verwendung wichtigster Elemente

8. App Lifecycle

9. Demo App New Solution Blank Xamarin Forms App PCL Name, id etc.
Project Structure
Run on iOS & Android

10. Demo App Step 1 New Solution Blank Xamarin Forms App PCL Name, id etc.
Run on iOS & Android

11. Demo App Step 2
Master Detail Page public class MasterDetail : MasterDetailPage
Master: ListView
Detail: ContentView
Model: Shop ImageSource Image String Name String Description String URL

12. Data Binding / Cell Template
var shops = new List<Shop>{ new Shop{Image=“ Name=“”…} … } var list = new ListView { ItemsSource = shops, ItemTemplate = new DataTemplate (() => { var imageCell = new ImageCell (); imageCell.SetBinding (ImageCell.ImageSourceProperty, "Image"); imageCell.SetBinding (ImageCell.TextProperty, "Name"); imageCell.SetBinding (ImageCell.DetailProperty, "Description"); return imageCell; }) };

13. Select item / set detail binding context
list.ItemSelected += (sender, e) => { Detail.BindingContext = e.SelectedItem; IsPresented = false; }; list.SelectedItem = shops [0];

14. Detail Page Data binding
public class ShopPage : ContentPage{ this.SetBinding (ContentPage.TitleProperty, "Name"); var shopLabel = new Label { XAlign = TextAlignment.Center }; Content = new StackLayout { VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand, Children = { shopLabel } }; shopLabel.SetBinding (Label.TextProperty, "Name"); }

15. Detail Page: Browser View
var browser = new WebView{ 
VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };
browser.SetBinding (WebView.SourceProperty, "URL");
Navigate Back / Forward: Add Button
(-> Horizontal StackLayout)

16. Problem: Reload missing
GoForward
GoBack
Eval(string)
Reload? (Native Function)

17. Solution: Custom WebView, Renderer
Create Class MyWebView : WebView public delegate void ReloadDelegate(); public ReloadDelegate Reload;

18. Android Renderer
public class MyWebViewRenderer : WebViewRenderer { protected override void OnElementChanged (ElementChangedEventArgs<WebView> e)         {             base.OnElementChanged (e);             if (e.OldElement != null) {                 ((MyWebView)e.OldElement).Reload -= DoReload;             }             ((MyWebView)e.NewElement).Reload += DoReload;         }         void DoReload(){             Control.Reload ();         } }

19. iOS Renderer
public class MyWebViewRenderer : WebViewRenderer     { protected override void OnElementChanged (VisualElementChangedEventArgs e)         {             base.OnElementChanged (e);             if (e.OldElement != null) {                 ((MyWebView)e.OldElement).Reload -= DoReload;             }             ((MyWebView)e.NewElement).Reload += DoReload;         }         void DoReload(){             Reload ();         }     }

20. Magic
using xyz; [assembly: ExportRenderer ( typeof (MyWebView), typeof (MyWebViewRenderer))] Namespace xyz{ public class MyWebViewRenderer… }

21. XAML View
Create new Xaml View (ShopPage2) <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns=" xmlns:x=" x:Class="Shops.ShopPage2”>     <ContentPage.Content> ….     </ContentPage.Content> </ContentPage>

22. Xaml Content
<StackLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand">             <WebView x:Name="browser”  Source="{Binding URL}"  HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand"/>             <StackLayout Orientation="Horizontal">                 <Button Text="Back" Clicked="BackClicked"/>                 <Button Text="Reload" Clicked="ReloadClicked"/>             </StackLayout>         </StackLayout>

23. CodeBehind Class
public partial class ShopPage2 : ContentPage     {         public ShopPage2 ()         {             InitializeComponent ();         }         void BackClicked(object sender, EventArgs e){             browser.GoBack ();         }         void ReloadClicked(object sender, EventArgs e){             browser.Reload ();         }     }

24. Beispiel App
Master-Detail auf iPad Quer

25. DependencyService Access Native functionality from shared code
Declare Interface:
public interface IToastService { void ShowToast(string text); }

26. Implementation Android
public class ToastService : IToastService     {         public ToastService ()         {         }         public void ShowToast(string text){             var ctx = Forms.Context;             Toast toast =  Toast.MakeText(Forms.Context, text, ToastLength.Long);             toast.Show();         }     }

27. Implementation iOS
public async void ShowToast(string text){             var alert = new UIAlertView(text, null, null, null, null);             alert.Show ();             await Task.Delay(3000);             alert.DismissWithClickedButtonIndex (-1, true); }

28. Magic
Using xyz; [assembly: Xamarin.Forms.Dependency (typeof (ToastService))] Namespace xyz{ class …. }

29. Usage
var service = DependencyService.Get<IToastService> (); service .ShowToast("Hallo Workshop"); Attention: only one instance!

30. Platform Tweaks