Xamarin.Forms. Hands On

Transcription

1 Xamarin.Forms Hands On

2 Hands- On: Xamarin Forms Ziele Kennenlernen von Xamarin.Forms, wich:gste Layouts und Views UI aus Code mit Data Binding Erweitern von Forms Elementen mit Na:ve Custom Renderer UI aus Xaml, Custom View mit XAML Aufrufen von Systemfunk:onen mit DependencyService

3 Pages hpp://developer.xamarin.com/guides/cross- plasorm/xamarin- forms/controls/pages/

4 Layouts hpp://developer.xamarin.com/guides/cross- plasorm/xamarin- forms/controls/layouts/

5 LayoutOp:ons Start Center End Expand WidthRequest HeightRequest

6 Views hpp://developer.xamarin.com/guides/cross- plasorm/xamarin- forms/controls/views/

7 UI Gallery Sample App Zeigt Verwendung wich:gster Elemente

8 App Lifecycle hpp://developer.xamarin.com/guides/cross- plasorm/xamarin- forms/working- with/app- lifecycle/

9 Demo App New Solu:on Blank Xamarin Forms App PCL Name, id etc. Project Structure Run on ios & Android

10 Demo App Step 1 New Solu:on 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 Descrip:on String URL

12 Data Binding / Cell Template var shops = new List<Shop>{ new Shop{Image= hpp://, 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, "Descrip:on"); 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 { Ver:calOp:ons = LayoutOp:ons.FillAndExpand, HorizontalOp:ons = LayoutOp:ons.FillAndExpand, Children = { shoplabel ; shoplabel.setbinding (Label.TextProperty, "Name");

15 Detail Page: Browser View var browser = new WebView{ Ver:calOp:ons = LayoutOp:ons.FillAndExpand, HorizontalOp:ons = LayoutOp:ons.FillAndExpand ; browser.setbinding (WebView.SourceProperty, "URL"); Navigate Back / Forward: Add BuPon (- > Horizontal StackLayout)

16 Problem: Reload missing GoForward GoBack Eval(string) Reload? (Na:ve Func:on)

17 Solu:on: 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="hpp://xamarin.com/ schemas/2014/forms" xmlns:x="hpp://schemas.microsor.com/winfx/ 2009/xaml" x:class="shops.shoppage2 > <ContentPage.Content>. </ContentPage.Content> </ContentPage>

22 Xaml Content <StackLayout HorizontalOp:ons="FillAndExpand" Ver:calOp:ons="FillAndExpand"> <WebView x:name="browser Source="{Binding URL" HorizontalOp:ons="FillAndExpand" Ver:calOp:ons="FillAndExpand"/> <StackLayout Orienta:on="Horizontal"> <BuPon Text="Back" Clicked="BackClicked"/> <BuPon Text="Reload" Clicked="ReloadClicked"/> </StackLayout> </StackLayout>

23 CodeBehind Class public par:al class ShopPage2 : ContentPage { public ShopPage2 () { Ini:alizeComponent (); 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 Na:ve func:onality from shared code Declare Interface: public interface IToastService { void ShowToast(string text);

26 Implementa:on 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 Implementa:on ios public async void ShowToast(string text){ var alert = new UIAlertView(text, null, null, null, null); alert.show (); await Task.Delay(3000); alert.dismisswithclickedbuponindex (- 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"); APen:on: only one instance!

30 PlaSorm Tweaks hpp://developer.xamarin.com/guides/cross- plasorm/xamarin- forms/working- with/ plasorm- specifics/