![Page 1: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/1.jpg)
Xamarin.Forms
Hands On
![Page 2: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/2.jpg)
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
![Page 3: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/3.jpg)
Pages
• http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/pages/
![Page 4: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/4.jpg)
Layouts
• http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/
![Page 5: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/5.jpg)
LayoutOptions
• Start• Center• End• Expand• WidthRequest• HeightRequest
![Page 6: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/6.jpg)
Views
• http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/views/
![Page 7: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/7.jpg)
UI Gallery Sample App
• Zeigt Verwendung wichtigster Elemente
![Page 8: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/8.jpg)
App Lifecycle
• http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/app-lifecycle/
![Page 9: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/9.jpg)
Demo App
• New Solution• Blank Xamarin Forms App• PCL• Name, id etc.
• Project Structure• Run on iOS & Android
![Page 10: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/10.jpg)
Demo App Step 1
• New Solution• Blank Xamarin Forms App• PCL• Name, id etc.
• Run on iOS & Android
![Page 11: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/11.jpg)
Demo App Step 2• Master Detail Page
public class MasterDetail : MasterDetailPage
• Master: ListView
• Detail: ContentView
• Model: ShopImageSource ImageString NameString DescriptionString URL
![Page 12: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/12.jpg)
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; }) };
![Page 13: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/13.jpg)
Select item / set detail binding context
list.ItemSelected += (sender, e) => {Detail.BindingContext = e.SelectedItem;IsPresented = false;
};
list.SelectedItem = shops [0];
![Page 14: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/14.jpg)
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");
}
![Page 15: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/15.jpg)
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)
![Page 16: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/16.jpg)
Problem: Reload missing
• GoForward• GoBack• Eval(string)
• Reload? (Native Function)
![Page 17: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/17.jpg)
Solution: Custom WebView, Renderer
• Create Class MyWebView : WebView
public delegate void ReloadDelegate();public ReloadDelegate Reload;
![Page 18: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/18.jpg)
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 (); } }
![Page 19: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/19.jpg)
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 (); } }
![Page 20: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/20.jpg)
Magic
using xyz;
[assembly: ExportRenderer (typeof (MyWebView), typeof (MyWebViewRenderer))] Namespace xyz{
public class MyWebViewRenderer…}
![Page 21: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/21.jpg)
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>
![Page 22: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/22.jpg)
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>
![Page 23: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/23.jpg)
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 (); } }
![Page 24: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/24.jpg)
Beispiel App
• Master-Detail auf iPad Quer
![Page 25: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/25.jpg)
DependencyService
• Access Native functionality from shared code
• Declare Interface:
public interface IToastService{
void ShowToast(string text);}
![Page 26: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/26.jpg)
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(); } }
![Page 27: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/27.jpg)
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);}
![Page 28: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/28.jpg)
Magic
Using xyz;
[assembly: Xamarin.Forms.Dependency (typeof (ToastService))]
Namespace xyz{class ….
}
![Page 29: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/29.jpg)
Usage
var service = DependencyService.Get<IToastService> ();service .ShowToast("Hallo Workshop");
Attention: only one instance!
![Page 30: Xamarin.Forms Hands On. Hands-On: Xamarin Forms Ziele – Kennenlernen von Xamarin.Forms, wichtigste Layouts und Views – UI aus Code mit Data Binding –](https://reader034.vdocuments.site/reader034/viewer/2022051516/56649e665503460f94b61e63/html5/thumbnails/30.jpg)
Platform Tweaks
• http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/platform-specifics/