Xamarin.Forms Hands On

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

Pages http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/pages/

Layouts http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/

LayoutOptions Start Center End Expand WidthRequest HeightRequest

Views http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/views/

UI Gallery Sample App Zeigt Verwendung wichtigster Elemente

App Lifecycle http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/app-lifecycle/

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

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

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

Data Binding / Cell Template var shops = new List<Shop>{ new Shop{Image=“http://”, 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; }) };

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

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"); }

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)

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

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

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 ();         } }

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 ();         }     }

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

XAML View Create new Xaml View (ShopPage2) <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  x:Class="Shops.ShopPage2”>     <ContentPage.Content> ….     </ContentPage.Content> </ContentPage>

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>

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 ();         }     }

Beispiel App Master-Detail auf iPad Quer

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

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();         }     }

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); }

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

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

Platform Tweaks http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/platform-specifics/