Cross Platform App Development mit Xamarin.Forms

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)