Cross Platform App Development mit Xamarin.Forms

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

JÖRG NEUMANN THEMEN ▪ Mobile Development ▪ Frontend Technologien ▪ Machine Learning ▪ Consulting, Coaching, Training KONTAKT ▪ Mail: [email protected] ▪ Twitter: @JoergNeumann ▪ GitHub: https://github.com/JoergNeumann ▪ Blog: www.HeadWriteLine.BlogSpot.com

Slide 3

Slide 3 text

AGENDA 1. Was ist Xamarin? 2. Development Setup 3. Xamarin.Forms Basics 4. Eine einfache App entwickeln 5. Plattformspezifische Anpassungen

Slide 4

Slide 4 text

SILO APPROACH iOS WINDOWS ANDROID Objective-C Xcode C# Visual Studio Java Android Studio Kein gemeinsamer Code • Viele Sprachen & Entwicklungsumgebungen • Mehrere Teams

Slide 5

Slide 5 text

Tausende iOS- und Android-APIs Public Web APIs Backend Integration Third-Party-Bibliotheken Speicher-, CPU- und Netzwerkeinschränkungen APP COMPLEXITY

Slide 6

Slide 6 text

THE CROSS-PLATFORM CHALLENGE SMART PHONES TABLETS HYBRID NOTEBOOKS DESKTOPS WATCHES VR HEADSETS FITNESS TRACKERS MEDIA STREAMERS SPIELEKONSOLEN iOS ANDROID WINDOWS … IOT DEVICES

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

XAMARIN APPROACH Windows-specific C# Android-specific C# iOS-specific C# Shared C# Logic

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Quelle: Harry Cheung

Slide 13

Slide 13 text

Quelle: Harry Cheung

Slide 14

Slide 14 text

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#

Slide 15

Slide 15 text

VORTEILE C#-FEATURES ▪ LINQ, async/await, … .NET ECOSYSTEM ▪ Base Class Library ▪ Portable Class Libraries ▪ NuGet Packages ▪ Xamarin Component Store ▪ 3rd Parties

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

DEVELOPMENT SETUP MAC PC LAN MAC

Slide 19

Slide 19 text

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/

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

XAMARIN.FORMS BASICS

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

NATIVE UI / SHARED CODE …

Slide 25

Slide 25 text

BEISPIEL XAML: CODE: iOS: ANDROID: WINDOWS: 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" }); } }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

VIEWS

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

DEMO

Slide 36

Slide 36 text

LISTEN & DATENBINDUNG VIEWS ▪ ListView & TableView DATENBINDUNG ▪ Datenquelle zuweisen: ItemsSource-Eigenschaft ▪ Data Template zuweisen: ItemTemplate-Eigenschaft ▪ Markup-Extension {Binding}, Value Converter, ...

Slide 37

Slide 37 text

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, ...

Slide 38

Slide 38 text

DEMO

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

DEMO

Slide 41

Slide 41 text

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 10

Slide 42

Slide 42 text

STYLES STYLES ▪ Style-Definitionen in XAML ▪ Implizite und explizite Styles ▪ Vererbung möglich <Setter Property="HorizontalOptions" Value="Center" /> <Setter Property="VerticalOptions" Value="Center" />

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

DEVICE STYLES STYLES ANPASSEN ▪ Ein Style kann von einem Device-Style erben ▪ Style.BaseResourceKey-Eigenschaft <Setter Property="TextColor" Value="Gray"/>

Slide 45

Slide 45 text

DEMO

Slide 46

Slide 46 text

PLATTFORM- SPEZIFISCHE ANPASSUNGEN

Slide 47

Slide 47 text

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) { … }

Slide 48

Slide 48 text

PLATTFORMSPEZIFISCHE ANPASSUNGEN ANPASSUNGEN PER MARKUP ▪ OnPlattform-Element

Slide 49

Slide 49 text

DEMO

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

CUSTOM RENDERERS IMPLEMENTIERUNG ▪ Renderer-Klasse von ViewRenderer 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

Slide 52

Slide 52 text

DEMO

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

DEMO

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

SpeechSynthesizer TextToSpeech AVSpeechSynthesizer TextToSpeech.Speak(“Hello World”);

Slide 57

Slide 57 text

PLUG-INS FÜR XAMARIN COMMON MOBILE API SPEECH CAMERA SETTINGS CONNECTIVITY SMS LOCATION PLATFORM NATIVE APIS

Slide 58

Slide 58 text

DEPENDENCY SERVICE PLATTFORMFUNKTIONALITÄT NUTZEN ▪ z. B. Sprachausgabe IMPLEMENTIERUNG ▪ Interface definieren ▪ Plattformspezifische Implementierung bereitstellen ▪ Assembly-Attribut Dependency deklarieren ZUGRIFF ▪ Statische Methode DependencyService.Get() PORTABLE CLASS LIBRARY ANDROID PROJEKT MyService iOS PROJEKT MyService WINDOWS PROJEKT MyService IMyService DEPENDENY SERVICE

Slide 59

Slide 59 text

DEMO

Slide 60

Slide 60 text

MESSAGE CENTER NACHRICHTENBASIERTE KOMMUNIKATION ▪ Publisher-/Subscriber-Pattern IMPLEMENTIERUNG ▪ Nachrichten abonnieren: MessageCenter.Subscribe() ▪ Nachricht senden: MessageCenter.Send() ▪ Empfänger abmelden: MessageCenter.Unsubscribe()

Slide 61

Slide 61 text

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 { ... }

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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, …)

Slide 64

Slide 64 text

www.entwickler-tutorials.de DEIN POTENTIAL – DEIN TRAINING – DEIN VORSPRUNG

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Q & A

Slide 70

Slide 70 text

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/

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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/

Slide 75

Slide 75 text

NÜTZLICHE LIBRARIES 3RD PARTY COMPONENT VENDORS ▪ SyncFusion ▪ Telerik ▪ DevExpress ▪ Infragistics ▪ Steema ▪ GrapeCity Infragistics AppMap

Slide 76

Slide 76 text

TIPPS & TRICKS

Slide 77

Slide 77 text

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 { ... }

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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;

Slide 80

Slide 80 text

GESTENERKENNUNG PER XAML ZUWEISEN BEISPIEL ▪ Zuweisung über die GestureRecognizers-Eigenschaft GESTE VERARBEITEN 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"; }

Slide 81

Slide 81 text

GESTENERKENNUNG ÜBER COMMANDS GESTEN KÖNNEN AUCH PER COMMAND VERARBEITET WERDEN ▪ Sinnvoll in MVVM-Architekturen 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); } … }

Slide 82

Slide 82 text

DEMO

Slide 83

Slide 83 text

ANIMATIONEN ANIMIERBARE SKALIERUNG, ROTATION UND LAYOUT-FUNKTIONEN ▪ Extension Methods für die VisualElement-Klasse ▪ Optional können Easing-Funktionen zugewiesen werden

Slide 84

Slide 84 text

ANIMATIONSTYPEN ROTATION ▪ RotateTo(), RotateXTo(), RotateYTo(), RelRotateTo() SKALIERUNG ▪ ScaleTo(), RelScaleTo() LAYOUT ▪ LayoutTo() EIN-/AUSBLENDEN ▪ FadeTo() ANIMATION ABBRECHEN ▪ ViewExtensions.CancelAnimations()

Slide 85

Slide 85 text

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)