Cross Platform App Development mit Xamarin.Forms

Cross Platform App Development mit Xamarin.Forms

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

November 25, 2019
Tweet

Transcript

  1. JÖRG NEUMANN CROSS-PLATTFORM APP DEVELOPMENT MIT XAMARIN.FORMS

  2. JÖRG NEUMANN THEMEN ▪ Mobile Development ▪ Frontend Technologien ▪

    Machine Learning ▪ Consulting, Coaching, Training KONTAKT ▪ Mail: Neumann.Joerg@outlook.de ▪ Twitter: @JoergNeumann ▪ GitHub: https://github.com/JoergNeumann ▪ Blog: www.HeadWriteLine.BlogSpot.com
  3. AGENDA 1. Was ist Xamarin? 2. Development Setup 3. Xamarin.Forms

    Basics 4. Eine einfache App entwickeln 5. Plattformspezifische Anpassungen
  4. SILO APPROACH iOS WINDOWS ANDROID Objective-C Xcode C# Visual Studio

    Java Android Studio Kein gemeinsamer Code • Viele Sprachen & Entwicklungsumgebungen • Mehrere Teams
  5. Tausende iOS- und Android-APIs Public Web APIs Backend Integration Third-Party-Bibliotheken

    Speicher-, CPU- und Netzwerkeinschränkungen APP COMPLEXITY
  6. THE CROSS-PLATFORM CHALLENGE SMART PHONES TABLETS HYBRID NOTEBOOKS DESKTOPS WATCHES

    VR HEADSETS FITNESS TRACKERS MEDIA STREAMERS SPIELEKONSOLEN iOS ANDROID WINDOWS … IOT DEVICES
  7. MICROSOFTS CROSS-PLATFORM APPROACH Windows UI Android UI iOS UI Shared

    C# Code Shared .NET libraries Windows Native APIs Android Native APIs iOS Native APIs UWP Xamarin C# Code .NET libraries
  8. XAMARIN APPROACH Windows-specific C# Android-specific C# iOS-specific C# Shared C#

    Logic
  9. Windows-specific C# Android-specific C# iOS-specific C# Shared C# Logic Java

    Android Studio in Android codebase iOS codebase Objective-C XCode in C# Visual Studio in Windows codebase Windows-specific C# Android-specific C# iOS-specific C# Shared C# Logic Java Android Studio in Android codebase iOS codebase Objective-C XCode in C# Visual Studio in Windows codebase Shared Xamarin.Forms UI XAMARIN.FORMS XAMARIN CLASSIC
  10. C# .NET Core / .NET Standard XAML / Native UI

    Xamarin.Forms Xamarin.Forms Apple iOS Google Android Windows UWP Mobile Wearables/TV Android Wear Apple tvOS Samsung Tizen Apple watchOS Apple Mac OSX Microsoft Windows Desktop XAMARIN PLATTFORM SUPPORT
  11. NATIVE PERFORMANCE ▪ Xamarin.iOS erzeugt über eine Ahead- Of-Time-Kompilierung ein

    ARM-Binary für Apples App Store. ▪ Objective-C Libraries und Storyboards können eingebunden werden. ▪ Xamarin.Android erzeugt IL-Code der Just In Time (JIT) auf dem Android Device kompiliert wird. ▪ Java Libraries und Google Support Packages können eingebunden werden.
  12. Quelle: Harry Cheung

  13. Quelle: Harry Cheung

  14. 100 % API COVERAGE MapKit UIKit iBeacon CoreGraphics CoreMotion System.Data

    System. Windows System. Numerics System.Core System. ServiceModel System.Net System System.IO System.Linq System.Xml iOS C# Text-to-speech ActionBar Printing Framework Renderscript NFC System.Data System. Windows System. Numerics System.Core System. ServiceModel System.Net System System.IO System.Linq System.Xml ANDROID C# Microsoft. Phone Microsoft. Networking Windows. Storage Windows. Foundation Microsoft. Devices System.Data System. Windows System. Numerics System.Core System. ServiceModel System.Net System System.IO System.Linq System.Xml WINDOWS C#
  15. VORTEILE C#-FEATURES ▪ LINQ, async/await, … .NET ECOSYSTEM ▪ Base

    Class Library ▪ Portable Class Libraries ▪ NuGet Packages ▪ Xamarin Component Store ▪ 3rd Parties
  16. ENTWICKLUNGSUMGEBUNGEN VISUAL STUDIO FOR MAC ▪ Entwicklungsumgebung für Mac ▪

    SDKs & Designers für Android-, iOS- & OS-X-Apps ▪ Gleiches Projektformat wie Visual Studio VISUAL STUDIO ▪ SDKs & Designers für Android- & iOS-Apps ▪ Remote iOS-Simulator ▪ Mac erforderlich für iOS-Apps
  17. WAS SIE BENÖTIGEN ENTWICKLUNG AUF DEM MAC ▪ Einen Mac

    (aktuelles Betriebssystem) ▪ XCode (aktuelle Version) ▪ Xamarin (aktuelle Version) ENTWICKLUNG AUF DEM PC ▪ Einen PC mit Windows 10 ▪ Visual Studio 2017 (inkl. Workloads: Mobile Development, UWP & Desktop) ▪ Zusätzlich einen Mac, wenn Sie auch für iOS entwickeln wollen KENNTNISSE ▪ Ein grundlegendes Verständnis für C# und XAML
  18. DEVELOPMENT SETUP MAC PC LAN MAC

  19. NÜTZLICHE TOOLS & ADD-ONS XAMARIN INSPECTOR ▪ https://developer.xamarin.com/guides/cross-platform/inspector/install/ XAMARIN PREVIEWER

    ▪ https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/ ▪ Liste von 3rd-Party Previewers XAMARIN TEST RECORDER ▪ https://developer.xamarin.com/guides/testcloud/testrecorder/ MFRACTOR ▪ https://www.mfractor.com/
  20. BEVOR WIR BEGINNEN CROSS-PLATTFORM-ENTWICKLUNG IST KOMPLEX! ▪ Es gibt mehr

    Herausforderungen als bei der klassischen .NET-Entwicklung ▪ Plattform-SDKs und Xamarin ändern sich ständig ▪ Eine grundlegendes Wissen über die App-Modell von iOS & Android ist erforderlich ▪ Die Lernkurve ist steil ▪ Es gibt viele spezialisierte SDKs (WatchOS, Android Wear, ...) ▪ Cross-Plattform ist ein Moving Target! WO KANN XAMARIN HELFEN? ▪ Einheitliche Programmiersprache & Tooling ▪ Vereinheitlichung der Programmiermodelle ▪ Aber: alles basiert auf den nativen Plattform SDKs ▪ Native Performance, natives Look & Feel
  21. XAMARIN.FORMS BASICS

  22. Windows-specific C# Android-specific C# iOS-specific C# Shared C# Logic Java

    Android Studio in Objective-C XCode in C# Visual Studio in Shared Xamarin.Forms UI XAMARIN.FORMS
  23. XAMARIN FORMS PLATTFORM-NEUTRALER UI-STACK ▪ iOS, Android & Windows ▪

    Basiert auf Portable Class Libraries & Shared Projects Plattformen: Android 4.0+, iOS 6.1+, Windows Phone / WinRT / UWP FEATURES ▪ Controls, Layout, Data Binding, Templating, Markup Extensions, Styles, Triggers, Behaviors, ... ERSTELLUNG ÜBER XAML ODER CODE ▪ Wird automatisch in die native UI-Technologie der Plattformen übersetzt ▪ Plattformspezifischer Code/UI weiterhin möglich
  24. NATIVE UI / SHARED CODE <?xml version="1.0" encoding="UTF-8"?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.MainPage"> <TabbedPage.Children> <ContentPage Title="Profile" Icon="Profile.png"> <StackLayout Spacing="20" Padding="20" VerticalOptions="Center"> <Entry Placeholder="Username" Text="{Binding Username}"/> <Entry Placeholder="Password" Text="{Binding Password}" IsPassword="true"/> <Button Text="Login" TextColor="White" BackgroundColor="#77D065" Command="{Binding LoginCommand}"/> </StackLayout> </ContentPage> … </TabbedPage.Children> </TabbedPage>
  25. BEISPIEL XAML: CODE: iOS: ANDROID: WINDOWS: <TabbedPage x:Class="TabbedDemo.MainPage" … xmlns:my="clr-namespace:TabbedDemo;assembly=TabbedDemo">

    <TabbedPage.Children> <my:SchedulePage Title="Schedule" Icon="schedule.png"/> <my:SpeakersPage Title="Speakers" Icon="speakers.png"/> <my:SessionsPage Title="Sessions" Icon="sessions.png"/> </TabbedPage.Children> </TabbedPage> public partial class MainPage : TabbedPage { public MainPage() { Children.Add(new SchedulePage() { Title = "Schedule" }); Children.Add(new SpeakersPage() { Title = "Speakers" }); Children.Add(new SessionsPage() { Title = "Sessions" }); } }
  26. ANATOMIE EINER XAMARIN.FORMS-APP PCL / SHARED PROJECT / .NET STANDARD

    Android Projekt iOS Projekt Windows Projekt Android Package iOS Package Windows Package Shared Code, Shared UI Platfformspezifischer Code Native App Packages
  27. DER APP-START PLATTFORMPROJEKT ▪ App startet im jeweiligen Plattformprojekt ▪

    Aufruf von Forms.Init() ▪ Neue Instanz von Application erstellen ▪ Aufruf von LoadApplication() PCL-PROJEKT ▪ Start im CTOR von Application ▪ Start-Page wird über MainPage-Eigenschaft zugewiesen ▪ App Lifecycle über OnStart(), OnSleep(), OnResume() steuern Portable Class Library Android-Projekt iOS-Projekt Windows-Projekt Activity AppDelegate App Pause Pages Pages Application
  28. DEMO

  29. PAGES DIE SEITEN DER APP ▪ Werden in native Container

    der Plattform umgesetzt ▪ Verschiedene Basisklassen für gängige Layoutpattern Page Activity View Controller Page Android iOS Windows Xamarin.Forms ContentPage MasterDetailPage NavigationPage < Back TabbedPage CarouselPage
  30. LAYOUTS LAYOUTCONTAINER ▪ Strukturieren die enthaltenen UI-Controls ▪ Verwenden intern

    die Layoutfunktionen der jeweiligen Plattform StackLayout LinearLayout Constraits StackPanel Android iOS Windows Xamarin.Forms ContentView Frame Grid RelativeLayout AbsoluteLayout StackLayout ScrollView
  31. VIEWS REPRÄSENTIEREN UI-CONTROLS ▪ Werden in native UI-Controls der jeweiligen

    Plattform umgesetzt ▪ Renderer übernehmen das Mapping Label LabelRenderer LabelRenderer LabelRenderer Android iOS Windows TextView UILabel TextBlock
  32. VIEWS

  33. PAGES AUFBAU ▪ Die App wird in Form von Page-Klassen

    implementiert ▪ Der Inhalt wird über die Content-Eigenschaft zugewiesen ▪ Pages können per Code oder XAML definiert werden NAVIGATION ▪ NavigationPage kümmert sich um die Navigation ▪ Die Startseite wird über den Constructor zugewiesen TABS ▪ TabbedPage stellt die Seiten in Form von Tabs dar ▪ Die Seiten werden über die Children-Eigenschaft zugewiesen ContentPage MasterDetailPage NavigationPage < Back TabbedPage
  34. PAGES EIGENSCHAFTEN TITEL & ICON ▪ Title-/Icon-Eigenschaft HINTERGRUND ▪ BackgroundColor-

    & ▪ BackgroundImage-Eigenschaft ABSTAND ▪ Padding-Eigenschaft AKTIVITÄT ▪ IsBusy-Eigenschaft EVENTS ERSCHEINEN ▪ Appearing-Event VERLASSEN ▪ Disappearing-Event LAYOUT ▪ LayoutChanged-Event
  35. DEMO

  36. LISTEN & DATENBINDUNG VIEWS ▪ ListView & TableView DATENBINDUNG ▪

    Datenquelle zuweisen: ItemsSource-Eigenschaft ▪ Data Template zuweisen: ItemTemplate-Eigenschaft ▪ Markup-Extension {Binding}, Value Converter, ... <ListView RowHeight="70" ItemTapped="OnItemTapped" ItemsSource="{Binding Sessions}"> <ListView.ItemTemplate> <DataTemplate> <ImageCell ImageSource="{Binding Photo}" Text="{Binding Title}" Detail="{Binding Description}"/> </DataTemplate> </ListView.ItemTemplate> </ListView>
  37. LISTEN & DATENBINDUNG DATA TEMPLATES ▪ Die Zeilen einer Liste

    werden mit speziellen Cell-Elementen definiert ▪ Diese können einfacher in die jeweiligen Plattform-Konstrukte umgewandelt werden CELL TYPES ▪ Spezielle Cell-Elemente für Text-, Image-, oder Eingabezellen ▪ TextCell, ImageCell, EntryCell, SwitchCell, ViewCell, ...
  38. DEMO

  39. NAVIGATION FUNKTIONSWEISE ▪ Page muss innerhalb einer NavigationPage laufen ▪

    Zugriff erfolgt über Navigation- Eigenschaft der Page NAVIGATION ▪ PushAsync(), PushModalAsync() ▪ PopAsync(), PopModalAsync(), PopToRootAsync() PARAMETERÜBERGABE ▪ Übergabedaten müssen direkt zugewiesen werden ▪ Constructor oder Eigenschaft der Zielseite BEISPIEL var page = new MyPage(data); this.Navigation.PushAsync(page);
  40. DEMO

  41. RESSOURCEN Jedes UI-Element hat eine Resources-Eigenschaft ▪ vom Typ ResourceDictionary

    ▪ Kann beliebige Schlüssel-/Wertpaare enthalten ▪ Kann über TryGetValue()-Methode rekursiv ermittelt werden Referenzierung über Markup Extension StaticResource ▪ Lookup-Mechanismus zum Suchen in der Elementhierarchie <ContentPage …> <ContentPage.Resources> <ResourceDictionary> <x:Double x:Key="height">10</x:Double> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <ListView HeightRequest="{StaticResource height}"/> </ContentPage.Content> </ContentPage>
  42. STYLES STYLES ▪ Style-Definitionen in XAML ▪ Implizite und explizite

    Styles ▪ Vererbung möglich <ContentPage …> <ContentPage.Resources> <ResourceDictionary> <Style x:Key="buttonStyle" TargetType="Button"> <Setter Property="HorizontalOptions" Value="Center" /> <Setter Property="VerticalOptions" Value="Center" /> </Style> </ResourceDictionary> </ContentPage.Resources> <Button Style="{StaticResource buttonStyle}"/> </ContentPage>
  43. DEVICE STYLES DEVICE.STYLES-KLASSE ▪ Plattform-spezifisches Styling (Fonts, Größen, Farben, …)

    ▪ Können Label-Elementen zugewiesen werden ▪ BodyStyle, CaptionStyle, ListItemDetailTextStyle, ListItemTextStyle, SubtitleStyle, TitleStyle ▪ Bindung sollte dynamisch erfolgen ▪ So können OS-weite Änderungen zur Laufzeit reflektiert werden <Label Text="Titel“ Style="{DynamicResource TitleStyle}"/>
  44. DEVICE STYLES STYLES ANPASSEN ▪ Ein Style kann von einem

    Device-Style erben ▪ Style.BaseResourceKey-Eigenschaft <Style TargetType="Label" BaseResourceKey="TitleStyle"> <Setter Property="TextColor" Value="Gray"/> </Style>
  45. DEMO

  46. PLATTFORM- SPEZIFISCHE ANPASSUNGEN

  47. PLATTFORMSPEZIFISCHE ANPASSUNGEN PLATTFORM ABFRAGEN ▪ Statische Eigenschaft: Device.RuntimePlatform DEVICE-TYP ABFRAGEN

    ▪ Device.Idiom-Eigenschaft ▪ Liefert Desktop, Phone oder Tablet if (Device.RuntimePlatform == Device.iOS) { … } else if (Device.RuntimePlatform == Device.Android) { … }
  48. PLATTFORMSPEZIFISCHE ANPASSUNGEN ANPASSUNGEN PER MARKUP ▪ OnPlattform-Element <Label Text="{Binding}"> <Label.Font>

    <OnPlatform x:TypeArguments="Font"> <On Platform=”iOS" Value="Medium"/> <On Platform=”Android" Value="Small"/> </OnPlatform> </Label.Font> <Label.IsVisible> <OnPlatform x:TypeArguments="x:Boolean"> <On Platform=”iOS, WinPhone" Value="True"/> <On Platform=”Android" Value="False"/> </OnPlatform> </Label.IsVisible> </Label>
  49. DEMO

  50. CUSTOM VIEWS ENTWICKELN PORTABLE CLASS LIBRARY ANDROID PROJEKT MyRenderer iOS

    PROJEKT MyRenderer WINDOWS PROJEKT MyRenderer MyView Klasse zur Verwendung in XAML; stellt Bindable Properties bereit Implementierung der plattformspezifischen UI
  51. CUSTOM RENDERERS IMPLEMENTIERUNG ▪ Renderer-Klasse von ViewRenderer<T1,T2> ableiten ▪ OnElementChanged():

    Neue Instanz erstellen ▪ Draw(): Oberfläche rendern ▪ OnElementPropertyChanged(): Eigenschaften geändert ALTERNATIV ▪ Renderer-Klasse von einem bestehenden Renderer ableiten ▪ Implementierung überschreiben RENDERER VERÖFFENTLICHEN ▪ ExportRenderer-Attribut deklarieren
  52. DEMO

  53. EFFECTS VORHANDENE VIEWS ANPASSEN ▪ Weniger aufwändig als Custom Renderer

    ▪ Sinnvoll, wenn nur einzelne Eigenschaften des Controls geändert werden müssen ▪ Basisklasse PlatformEffect ▪ Zuweisung über Effects-Eigenschaft der View PORTABLE CLASS LIBRARY ANDROID PROJEKT MyEffect iOS PROJEKT MyEffect WINDOWS PROJEKT MyEffect MyEffect Klasse zur Verwendung in XAML Implementierung der plattformspezifischen UI
  54. DEMO

  55. UI+APIs UI + APIs UI + APIs Battery GPS Lights

    Notifications Settings Text To Speech Battery GPS Lights Notifications Settings Text To Speech Battery GPS Lights Notifications Settings Text To Speech PLATFORMSPEZIFISCHER CODE
  56. SpeechSynthesizer TextToSpeech AVSpeechSynthesizer TextToSpeech.Speak(“Hello World”);

  57. PLUG-INS FÜR XAMARIN COMMON MOBILE API SPEECH CAMERA SETTINGS CONNECTIVITY

    SMS LOCATION PLATFORM NATIVE APIS
  58. DEPENDENCY SERVICE PLATTFORMFUNKTIONALITÄT NUTZEN ▪ z. B. Sprachausgabe IMPLEMENTIERUNG ▪

    Interface definieren ▪ Plattformspezifische Implementierung bereitstellen ▪ Assembly-Attribut Dependency deklarieren ZUGRIFF ▪ Statische Methode DependencyService.Get<T>() PORTABLE CLASS LIBRARY ANDROID PROJEKT MyService iOS PROJEKT MyService WINDOWS PROJEKT MyService IMyService DEPENDENY SERVICE
  59. DEMO

  60. MESSAGE CENTER NACHRICHTENBASIERTE KOMMUNIKATION ▪ Publisher-/Subscriber-Pattern IMPLEMENTIERUNG ▪ Nachrichten abonnieren:

    MessageCenter.Subscribe<T>() ▪ Nachricht senden: MessageCenter.Send<T>() ▪ Empfänger abmelden: MessageCenter.Unsubscribe<T>()
  61. XAML COMPILATION XAML IN IL-CODE KOMPILIEREN ▪ Bietet Syntax-Checks zur

    Kompilierzeit ▪ Vermeidet XAML-Parsing zur Laufzeit ▪ Verringert die Package-Größe, da keine XAML-Dateien enthalten sind KONFIGURATION ▪ Muss explizit auf Application- oder Page-Ebene aktiviert werden ▪ XamlCompilationOptions-Attribut using Xamarin.Forms.Xaml; ... [assembly: XamlCompilation (XamlCompilationOptions.Compile)] namespace PhotoApp { ... } using Xamarin.Forms.Xaml; ... [XamlCompilation (XamlCompilationOptions.Compile)] public class HomePage : ContentPage { ... }
  62. WEITERE XAMARIN.FORMS-FEATURES ANIMATION API ▪ Simple & Custom Animations MAPS

    ▪ Xamarin.Forms.Maps GESTENERKENNUNG ▪ Gestures TIMERS ▪ Xamarin.Forms.Device.StartTimer() URIS ÖFFNEN ▪ Device.OpenUri() UI THREAD MARSHALLING ▪ Device.BeginInvokeOnMainThread()
  63. FAZIT XAMARIN VEREINFACHT DIE CROSS-PLATTFORM-ENTWICKLUNG ▪ Einheitliches Framework für die

    Entwicklung nativer Apps ▪ Plattformspezifische Anpassungen leicht möglich ▪ Vorhandenes .NET-Wissen kann wiederverwendet werden ▪ Xamarin.Forms ist Open Source ▪ Viele kostenlose Komponenten (Xamarin Plugins, NuGet, …) ▪ Native iOS oder Android Libraries können eingebunden werden ▪ Entwicklung für div. Devices möglich (inkl. Tablets, Watches, Streaming Boxes, …)
  64. www.entwickler-tutorials.de DEIN POTENTIAL – DEIN TRAINING – DEIN VORSPRUNG

  65. https://github.com/xamarin/dev-days-labs

  66. https://github.com/xamarin/dev-days-labs

  67. https://github.com/xamarin/dev-days-labs

  68. https://github.com/xamarin/dev-days-labs

  69. Q & A

  70. RESSOURCEN XAMARIN DEVELOPER CENTER ▪ https://developer.xamarin.com/ LIZENSIERUNG ▪ http://msft.it/6185BWToz XAMARIN

    SDK OPEN SOURCE ▪ http://open.xamarin.com/ XAMARIN.FORMS AUF GITHUB ▪ https://github.com/xamarin/Xamarin.Forms XAMARIN.FORMS SAMPLES ▪ https://developer.xamarin.com/samples/xamarin-forms/all/
  71. XAMARIN FUTURE XAMARIN.FORMS ROADMAP ▪ https://github.com/xamarin/Xamarin.Forms/wiki/Feature-Roadmap XAMARIN.FORMS EVOLUTION ▪ https://forums.xamarin.com/categories/xamarin-forms-evolution

  72. NÜTZLICHE TOOLS & ADD-ONS XAMARIN INSPECTOR ▪ https://developer.xamarin.com/guides/cross-platform/inspector/install/ XAMARIN PREVIEWER

    ▪ https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/ ▪ Liste von 3rd-Party Previewers XAMARIN TEST RECORDER ▪ https://developer.xamarin.com/guides/testcloud/testrecorder/ MFRACTOR ▪ https://www.mfractor.com/
  73. NÜTZLICHE SERVICES VISUAL STUDIO APP CENTER ▪ CI/CD für App-Projekte

    (Build, Deploy, Test, Analyse, …) AZURE MOBILE APPS ▪ Backend-Services, Offline Support, X-Plat Push, Auth, … RAYGUN ▪ A great analytics tool. BITRISE ▪ Build Automation FASTLANE ▪ iOS provisioning & app store deployment
  74. NÜTZLICHE LIBRARIES XAMARIN PLUG-INS ▪ https://github.com/xamarin/XamarinComponents REFIT ▪ Web API

    Clients als Interface definieren ▪ http://paulcbetts.github.io/refit/ POLLY ▪ Verbindungsversuche konfigurieren ▪ http://www.thepollyproject.org/
  75. NÜTZLICHE LIBRARIES 3RD PARTY COMPONENT VENDORS ▪ SyncFusion ▪ Telerik

    ▪ DevExpress ▪ Infragistics ▪ Steema ▪ GrapeCity Infragistics AppMap
  76. TIPPS & TRICKS

  77. XAML COMPILATION XAML IN IL-CODE KOMPILIEREN ▪ Bietet Syntaxchecks zur

    Kompilierzeit ▪ Vermeidet XAML-Parsing zur Laufzeit ▪ Verringert die Package-Größe, da keine XAML-Dateien enthalten sind KONFIGURATION ▪ Muss explizit auf Application- oder Page-Ebene aktiviert werden ▪ XamlCompilationOptions-Attribut using Xamarin.Forms.Xaml; ... [assembly: XamlCompilation (XamlCompilationOptions.Compile)] namespace PhotoApp { ... } using Xamarin.Forms.Xaml; ... [XamlCompilation (XamlCompilationOptions.Compile)] public class HomePage : ContentPage { ... }
  78. GESTENERKENNUNG „GESTURERECOGNIZER“-KLASSE ▪ Gestenerkennung per Code oder XAML verarbeiten ▪

    Unterstützte Gesten: Tap, Pinch & Pan GESTEN WERDEN DER VIEW ZUGEWIESEN ▪ GestureRecognizers-Eigenschaft BEISPIEL var tapGestureRecognizer = new TapGestureRecognizer(); tapGestureRecognizer.Tapped += (s, e) => { // handle the tap }; image.GestureRecognizers.Add(tapGestureRecognizer);
  79. GESTENERKENNUNG PER CODE ZUWEISEN BEISPIEL ▪ Eine Tap-Geste auf einem

    Image erkennen GESTE KONFIGURIEREN ▪ Anzahl der Taps setzen ▪ NumberOfTapsRequired-Eigenschaft var tapGestureRecognizer = new TapGestureRecognizer(); tapGestureRecognizer.Tapped += (s, e) => { // handle the tap }; image.GestureRecognizers.Add(tapGestureRecognizer); tapGestureRecognizer.NumberOfTapsRequired = 2;
  80. GESTENERKENNUNG PER XAML ZUWEISEN BEISPIEL ▪ Zuweisung über die GestureRecognizers-Eigenschaft

    GESTE VERARBEITEN <Image Source="tapped.jpg"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped„ NumberOfTapsRequired="2"/> </Image.GestureRecognizers> </Image> void OnTapGestureRecognizerTapped(object sender, EventArgs args) { tapCount++; var imageSender = (Image)sender; if (tapCount % 2 == 0) imageSender.Source = "tapped.jpg"; else imageSender.Source = "tapped_bw.jpg"; }
  81. GESTENERKENNUNG ÜBER COMMANDS GESTEN KÖNNEN AUCH PER COMMAND VERARBEITET WERDEN

    ▪ Sinnvoll in MVVM-Architekturen <Image Source="tapped.jpg"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="Image1"/> </Image.GestureRecognizers> </Image> public class TapViewModel : INotifyPropertyChanged { int taps = 0; ICommand tapCommand; public TapViewModel () { tapCommand = new Command (OnTapped); } public ICommand TapCommand { get { return tapCommand; } } void OnTapped (object s) { taps++; Debug.WriteLine ("parameter: " + s); } … }
  82. DEMO

  83. ANIMATIONEN ANIMIERBARE SKALIERUNG, ROTATION UND LAYOUT-FUNKTIONEN ▪ Extension Methods für

    die VisualElement-Klasse ▪ Optional können Easing-Funktionen zugewiesen werden
  84. ANIMATIONSTYPEN ROTATION ▪ RotateTo(), RotateXTo(), RotateYTo(), RelRotateTo() SKALIERUNG ▪ ScaleTo(),

    RelScaleTo() LAYOUT ▪ LayoutTo() EIN-/AUSBLENDEN ▪ FadeTo() ANIMATION ABBRECHEN ▪ ViewExtensions.CancelAnimations()
  85. ANIMATIONEN: BEISPIELE ELEMENT ROTIEREN ▪ Syntax ▪ Beispiel: ELEMENT BEWEGEN

    ▪ Syntax ▪ Beispiel: this.boxView.RotateTo(90, 250, Easing.BounceIn); RotateTo(double rotation, uint length = 250, Easing easing = null) var pos = new Rectangle(240, 80, 20, 20); this.boxView.LayoutTo(pos, 2500, Easing.BounceOut); LayoutTo(Rectangle bounds, uint length = 250, Easing easing = null)