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: ShopImageSource ImageString NameString DescriptionString URL

Data Binding / Cell Templatevar 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 bindingpublic 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 Classpublic 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 Androidpublic 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/