SlideShare une entreprise Scribd logo
Xamarin.Forms
Montreal Mobile .NET Developers 10 Juin 2015
Laurent Duveau
laurent@ldex.ca
AngularJS, Azure et
Xamarin
MVP / MCT / RD @laurentduveau Montrealldex.ca
2Xamarin.Forms – Montreal Mobile .NET Developers
Mes services
Besoin
d’aide?
Web/HTML5/AngularJS
Xamarin
Contactez moi!
www.LDEX.ca
ASP.NET
3Xamarin.Forms – Montreal Mobile .NET Developers
Agenda
 Introduction
 Développement mobile multi-plateformes
 Xamarin.Forms
 Présentation
 Principes de fonctionnement
 XAML pour les écrans
 Étendre les fonctionnalités
Android, iOS et Windows…
UX iOS != Android != Windows
6Xamarin.Forms – Montreal Mobile .NET Developers
UX Différente
7Xamarin.Forms – Montreal Mobile .NET Developers
UX Différente
8Xamarin.Forms – Montreal Mobile .NET Developers
Navigation
iOS (iPhone) Android OS
Application Applicatif + hardware
1 bouton système 3-4 boutons systèmes
9Xamarin.Forms – Montreal Mobile .NET Developers
Navigation
iOS: pas de bouton “précédent” physique.
10Xamarin.Forms – Montreal Mobile .NET Developers
Affichage et résolutions
iOS Android OS
3 Devices 1000+ Devices
6 résolutions Écrans: 3,7’ – 10,1’
Multitude de resolutions!!
iPhone iPod iPad
11Xamarin.Forms – Montreal Mobile .NET Developers
Vocabulaire
Android iOS Windows Phone
Layout (.axml) UIView (.xib ou
storyboard)
View (.xaml)
Activity UIViewController Page
Fragment UIView UserControl
Intent UINavigationController Frame
- UIApplication Application
Xamarin.Forms
13Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms:
Partage étendu à la couche UI!
approche Xamarin traditionnelle
Shared UI Code
Xamarin et Xamarin.Forms
14Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms
Bâtir une app native iOS, Android et Windows à partir
d’une base de code C# unique.
15Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms
Partage aussi l’interface graphique!
Intégration possible de code spécifique à une
plateforme
Prise en main facile, pas de connaissance
spécifique des OS
Plus de 40 contrôles graphiques disponibles
16Xamarin.Forms – Montreal Mobile .NET Developers
Comment ça marche ?
A l’exécution, chaque élément
graphique Xamarin.Forms est
généré dans son équivalent
spécifique à la plateforme cible
Une seule API pour générer
des interfaces natives et
spécifiques à l’OS
17Xamarin.Forms – Montreal Mobile .NET Developers
 Pages, Layouts, et Contrôles
 En code ou en XAML (MVVM)
 Data Binding bidirectionnel
 Navigation
 API commune d’animation
 Messaging Center
 Accès aux API natives avec des
CustomRenderers et
DependencyService
 Camera, GPS, …
 NFC, … sur Android
 PassKit, … sur iOS
 Tiles, … sur WP
Shared UI Code
Qu’est ce qui est disponible?
18Xamarin.Forms – Montreal Mobile .NET Developers
Content MasterDetail Navigation Tabbed Carousel
Pages
19Xamarin.Forms – Montreal Mobile .NET Developers
Stack Absolute Relative Grid ContentView ScrollView Frame
Layouts
20Xamarin.Forms – Montreal Mobile .NET Developers
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell
Contrôles
21Xamarin.Forms – Montreal Mobile .NET Developers
Ecosystème de contrôles
DEMONSTRATION
Une première app Xamarin.Forms
23Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms est un package NuGet
 Le mettre à jour! (même sur un nouveau projet)
24Xamarin.Forms – Montreal Mobile .NET Developers
C# ou XAML
var red = new Label
{
Text = "Stop",
BackgroundColor = Color.Red,
FontSize = 20,
WidthRequest = 100
};
var yellow = new Label
{
Text = "Slow down",
BackgroundColor = Color.Yellow,
FontSize = 20,
WidthRequest = 100
};
var green = new Label
{
Text = "Go",
BackgroundColor = Color.Green,
FontSize = 20,
WidthRequest = 200
};
Content = new StackLayout
{
Spacing = 10,
VerticalOptions = LayoutOptions.Center,
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.Center,
Children = { red, yellow, green }
};
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample3"
Padding="20">
<StackLayout Spacing="10"
VerticalOptions="Center"
Orientation="Horizontal"
HorizontalOptions="Center">
<Label Text="Stop"
BackgroundColor="Red"
FontSize="20"
WidthRequest="100" />
<Label Text="Slow down"
BackgroundColor="Yellow"
FontSize="20"
WidthRequest="100" />
<Label Text="Go"
BackgroundColor="Green"
FontSize="20"
WidthRequest="200" />
</StackLayout>
</ContentPage>
25Xamarin.Forms – Montreal Mobile .NET Developers
XAML
 XAML différent du XAML Microsoft
 => Pas de designer Visual Studio!
26Xamarin.Forms – Montreal Mobile .NET Developers
Code spécifique
if (Device.OS == TargetPlatform.WinPhone) // ou iOS, Android
{ ...
}
if (Device.Idiom == TargetIdiom.Phone) // ou .Tablet
{ ...
}
27Xamarin.Forms – Montreal Mobile .NET Developers
Code spécifique
Device.OnPlatform (
iOS: () => {
page.BackgroundImage = "back.png";
label.FontFamily = "HelveticaNeue-Thin";
label.FontSize = 20;
},
Android: () => {
page.BackgroundColor = Color.FromHex ("#AA66CC");
label.FontFamily = "sans-serif-condensed";
label.FontSize = Device.GetNamedSize (NamedSize.Medium, label);
}
);
28Xamarin.Forms – Montreal Mobile .NET Developers
Code spécifique
Device.OnPlatform (
iOS: () => {
page.BackgroundImage = "back.png";
label.FontFamily = "HelveticaNeue-Thin";
label.FontSize = 20;
},
Android: () => {
page.BackgroundColor = Color.FromHex ("#AA66CC");
label.FontFamily = "sans-serif-condensed";
label.FontSize = Device.GetNamedSize (NamedSize.Medium, label);
}
);
29Xamarin.Forms – Montreal Mobile .NET Developers
En XAML
<BoxView HorizontalOptions="Center">
<BoxView.Color>
<OnPlatform x:TypeArguments="Color"
iOS="Green"
Android="#738182"
WinPhone="Accent" />
</BoxView.Color>
<BoxView.WidthRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="40"
WinPhone="50" />
</BoxView.WidthRequest>
</BoxView>
30Xamarin.Forms – Montreal Mobile .NET Developers
Navigation
 Root Page
 Utiliser un NavigationPage: implémente Ia navigation dans les
pages
 Navigation Standard
 Navigation.PushAsync(nextPage);
 Navigation.PopAsync();
 Navigation Modale
 Navigation.PushModalAsync(modalPage);
 Navigation.PopModalAsync();
DEMONSTRATION
XAML, navigation et code spécifique
32Xamarin.Forms – Montreal Mobile .NET Developers
Model-View-ViewModel
ModelView ViewModel
Affichage Intéraction avec la
vue
Objets du domaine
d’affaire
Events
Data
Data
33Xamarin.Forms – Montreal Mobile .NET Developers
Model-View-ViewModel
ModelView ViewModel
Data Binding
Xamarin.Forms
Events
Data
34Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
35Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
36Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
37Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
binding bi-directionnel:
DEMONSTRATION
App Stock
Étendre Xamarin.Forms
41Xamarin.Forms – Montreal Mobile .NET Developers
Étendre Xamarin.Forms
 Créer ou personnaliser les contrôles UI
 Custom Renderers
 Utiliser des services à implémentation spécifique pour chaque
plateforme
 Dependency Service
42Xamarin.Forms – Montreal Mobile .NET Developers
Extensibilité
Custom Renderer
 Hériter d’un contrôle existant
 Créer un nouveau contrôle
 Ajout de propriétés bindable
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/
43Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
 Contrôle de saisie de base que l’on désire étendre:
44Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
Étape 1: Créer le contrôle étendu
 Dans le projet commun (PCL):
45Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
Étape 2: L’utiliser dans une page
 Dans le projet commun (PCL):
46Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
Étape 3: Implémenter le code du renderer
 Dans les projets pour chaque plateforme
47Xamarin.Forms – Montreal Mobile .NET Developers
Étape 4: Exporter le renderer
 Dans les projets pour chaque plateforme:
Custom Renderer
48Xamarin.Forms – Montreal Mobile .NET Developers
Extensibilité
Dependency Service
Partager les fonctionnalités spécifiques aux
plateformes à l’aide d’interfaces.
49Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 1: Créer une interface
 Dans le projet commun (PCL):
50Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 2: Implémenter le code spécifique
 Dans les projets pour chaque plateforme:
51Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 3: Exposer le service
 Dans les projets pour chaque plateforme:
52Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 4: Utiliser depuis le code commun
 Dans le projet commun (PCL):
DEMONSTRATION
Synthétiseur vocal
54Xamarin.Forms – Montreal Mobile .NET Developers
Animations
 API d’animation multi-plateforme
 Asynchrone (async/await)
www.github.com/JamesMontemagno/FormsAnimations
57Xamarin.Forms – Montreal Mobile .NET Developers
Messaging Center
 MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback);
 MessagingCenter.Send(T item, string message);
58Xamarin.Forms – Montreal Mobile .NET Developers
Messaging Center
Page maître:
Page détails:
59Xamarin.Forms – Montreal Mobile .NET Developers
Pour aller plus loin…
 Documentation
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/
 XAML
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml-
for-xamarin-forms/
 Exemples
https://github.com/xamarin/xamarin-forms-samples
60Xamarin.Forms – Montreal Mobile .NET Developers

Contenu connexe

Tendances

La plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsLa plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nuls
Microsoft
 
Visual studio 2017 Launch keynote - Afterworks@Noumea
Visual studio 2017 Launch keynote - Afterworks@NoumeaVisual studio 2017 Launch keynote - Afterworks@Noumea
Visual studio 2017 Launch keynote - Afterworks@Noumea
Julien Chable
 
[XamarinDay] Deep dive des produits Xamarin part 1
[XamarinDay] Deep dive des produits Xamarin part 1[XamarinDay] Deep dive des produits Xamarin part 1
[XamarinDay] Deep dive des produits Xamarin part 1
Cellenza
 
Symfony à la télé
Symfony à la téléSymfony à la télé
Symfony à la télé
Olivier Mansour
 
Les nouveautés de Xamarin et Visual Studio App Center
Les nouveautés de Xamarin et Visual Studio App CenterLes nouveautés de Xamarin et Visual Studio App Center
Les nouveautés de Xamarin et Visual Studio App Center
Hamida Rebai Trabelsi
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
SOAT
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
ekino
 
Native script
Native scriptNative script
Native script
Neticoa Sénégal
 
[XamarinDay] Xamarin pour votre entreprise
[XamarinDay] Xamarin pour votre entreprise [XamarinDay] Xamarin pour votre entreprise
[XamarinDay] Xamarin pour votre entreprise
Cellenza
 
Introduction au développement Windows 8 et Windows Phone 8
Introduction au développement Windows 8 et Windows Phone 8Introduction au développement Windows 8 et Windows Phone 8
Introduction au développement Windows 8 et Windows Phone 8
Microsoft
 
[XamarinDay] Pipeline DevOps sur un projet Xamarin
[XamarinDay] Pipeline DevOps sur un projet Xamarin[XamarinDay] Pipeline DevOps sur un projet Xamarin
[XamarinDay] Pipeline DevOps sur un projet Xamarin
Cellenza
 
Introduction dev office 365 2015 group usagers SharePoint Montreal
Introduction dev office 365 2015 group usagers SharePoint MontrealIntroduction dev office 365 2015 group usagers SharePoint Montreal
Introduction dev office 365 2015 group usagers SharePoint Montreal
Vincent Biret
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
Martin Arvisais
 
[XamarinDay] Retours sur Evolve 2016
[XamarinDay] Retours sur Evolve 2016[XamarinDay] Retours sur Evolve 2016
[XamarinDay] Retours sur Evolve 2016
Cellenza
 
[XamarinDay] Développez de manière 100% native avec Xamarin
[XamarinDay] Développez de manière 100% native avec Xamarin[XamarinDay] Développez de manière 100% native avec Xamarin
[XamarinDay] Développez de manière 100% native avec Xamarin
Cellenza
 
Les nouveautés de Xamarin 4
Les nouveautés de Xamarin 4Les nouveautés de Xamarin 4
Les nouveautés de Xamarin 4
Christian Hissibini
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
Wygwam
 
Silverlight
SilverlightSilverlight
Silverlight
Soumow Dollon
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Bosco Basabana
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Microsoft
 

Tendances (20)

La plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsLa plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nuls
 
Visual studio 2017 Launch keynote - Afterworks@Noumea
Visual studio 2017 Launch keynote - Afterworks@NoumeaVisual studio 2017 Launch keynote - Afterworks@Noumea
Visual studio 2017 Launch keynote - Afterworks@Noumea
 
[XamarinDay] Deep dive des produits Xamarin part 1
[XamarinDay] Deep dive des produits Xamarin part 1[XamarinDay] Deep dive des produits Xamarin part 1
[XamarinDay] Deep dive des produits Xamarin part 1
 
Symfony à la télé
Symfony à la téléSymfony à la télé
Symfony à la télé
 
Les nouveautés de Xamarin et Visual Studio App Center
Les nouveautés de Xamarin et Visual Studio App CenterLes nouveautés de Xamarin et Visual Studio App Center
Les nouveautés de Xamarin et Visual Studio App Center
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
Native script
Native scriptNative script
Native script
 
[XamarinDay] Xamarin pour votre entreprise
[XamarinDay] Xamarin pour votre entreprise [XamarinDay] Xamarin pour votre entreprise
[XamarinDay] Xamarin pour votre entreprise
 
Introduction au développement Windows 8 et Windows Phone 8
Introduction au développement Windows 8 et Windows Phone 8Introduction au développement Windows 8 et Windows Phone 8
Introduction au développement Windows 8 et Windows Phone 8
 
[XamarinDay] Pipeline DevOps sur un projet Xamarin
[XamarinDay] Pipeline DevOps sur un projet Xamarin[XamarinDay] Pipeline DevOps sur un projet Xamarin
[XamarinDay] Pipeline DevOps sur un projet Xamarin
 
Introduction dev office 365 2015 group usagers SharePoint Montreal
Introduction dev office 365 2015 group usagers SharePoint MontrealIntroduction dev office 365 2015 group usagers SharePoint Montreal
Introduction dev office 365 2015 group usagers SharePoint Montreal
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 
[XamarinDay] Retours sur Evolve 2016
[XamarinDay] Retours sur Evolve 2016[XamarinDay] Retours sur Evolve 2016
[XamarinDay] Retours sur Evolve 2016
 
[XamarinDay] Développez de manière 100% native avec Xamarin
[XamarinDay] Développez de manière 100% native avec Xamarin[XamarinDay] Développez de manière 100% native avec Xamarin
[XamarinDay] Développez de manière 100% native avec Xamarin
 
Les nouveautés de Xamarin 4
Les nouveautés de Xamarin 4Les nouveautés de Xamarin 4
Les nouveautés de Xamarin 4
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
 
Silverlight
SilverlightSilverlight
Silverlight
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 

En vedette

Desde mi cruz
Desde mi cruzDesde mi cruz
Desde mi cruz
Jose Gomez
 
Los niñOs son iguales
Los niñOs son igualesLos niñOs son iguales
Los niñOs son iguales
Rommell López Dongo
 
69 mortal
69 mortal69 mortal
69 mortal
Oscar revoltoso
 
ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...
ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...
ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...
Dogstudio pour le BEP
 
Booster sa carrière avec les réseaux sociaux - Sandra Kasaby
Booster sa carrière avec les réseaux sociaux - Sandra KasabyBooster sa carrière avec les réseaux sociaux - Sandra Kasaby
Booster sa carrière avec les réseaux sociaux - Sandra Kasaby
Aperobiz
 
4N-Atelier 2
4N-Atelier 24N-Atelier 2
4N-Atelier 2
Dogstudio pour le BEP
 
Encuentro GeneXus 2006 Collaborative Projects
Encuentro GeneXus 2006 Collaborative ProjectsEncuentro GeneXus 2006 Collaborative Projects
Encuentro GeneXus 2006 Collaborative Projects
Enrique Almeida
 
Llamame
LlamameLlamame
Llamame
Jose Gomez
 
Europa cerrada
Europa cerrada Europa cerrada
Europa cerrada
Oscar revoltoso
 
Comment optimiser son réseau - Dimitri Ngoye
Comment optimiser son réseau - Dimitri NgoyeComment optimiser son réseau - Dimitri Ngoye
Comment optimiser son réseau - Dimitri Ngoye
Aperobiz
 
Aunque Tengas El Iphone, No Atiendas
Aunque Tengas El Iphone, No AtiendasAunque Tengas El Iphone, No Atiendas
Aunque Tengas El Iphone, No Atiendas
esanorbridge
 
La personalidad
La personalidadLa personalidad
La personalidad
casiel
 
Forest Walk
Forest WalkForest Walk
Forest Walk
Jose Gomez
 
Guia derechos-victimas-viogen-espa
Guia derechos-victimas-viogen-espaGuia derechos-victimas-viogen-espa
Guia derechos-victimas-viogen-espa
Sykrayo
 
L'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursL'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeurs
Laurent Duveau
 
Hoy
HoyHoy
Salidas Profesionales De La Educacion Social
Salidas Profesionales De La Educacion SocialSalidas Profesionales De La Educacion Social
Salidas Profesionales De La Educacion Social
mcresan
 
L'enfant d'aujourd'hui 12.09.01
L'enfant d'aujourd'hui 12.09.01L'enfant d'aujourd'hui 12.09.01
L'enfant d'aujourd'hui 12.09.01Josué Binet
 
Bel N En Las Palmas
Bel N En Las PalmasBel N En Las Palmas
Bel N En Las Palmas
Jose Gomez
 

En vedette (20)

Desde mi cruz
Desde mi cruzDesde mi cruz
Desde mi cruz
 
Los niñOs son iguales
Los niñOs son igualesLos niñOs son iguales
Los niñOs son iguales
 
69 mortal
69 mortal69 mortal
69 mortal
 
ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...
ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...
ANT2 - La mise en place d'un calendrier tactique e-touristique par Frédéric G...
 
Booster sa carrière avec les réseaux sociaux - Sandra Kasaby
Booster sa carrière avec les réseaux sociaux - Sandra KasabyBooster sa carrière avec les réseaux sociaux - Sandra Kasaby
Booster sa carrière avec les réseaux sociaux - Sandra Kasaby
 
4N-Atelier 2
4N-Atelier 24N-Atelier 2
4N-Atelier 2
 
Encuentro GeneXus 2006 Collaborative Projects
Encuentro GeneXus 2006 Collaborative ProjectsEncuentro GeneXus 2006 Collaborative Projects
Encuentro GeneXus 2006 Collaborative Projects
 
Llamame
LlamameLlamame
Llamame
 
Roulette
RouletteRoulette
Roulette
 
Europa cerrada
Europa cerrada Europa cerrada
Europa cerrada
 
Comment optimiser son réseau - Dimitri Ngoye
Comment optimiser son réseau - Dimitri NgoyeComment optimiser son réseau - Dimitri Ngoye
Comment optimiser son réseau - Dimitri Ngoye
 
Aunque Tengas El Iphone, No Atiendas
Aunque Tengas El Iphone, No AtiendasAunque Tengas El Iphone, No Atiendas
Aunque Tengas El Iphone, No Atiendas
 
La personalidad
La personalidadLa personalidad
La personalidad
 
Forest Walk
Forest WalkForest Walk
Forest Walk
 
Guia derechos-victimas-viogen-espa
Guia derechos-victimas-viogen-espaGuia derechos-victimas-viogen-espa
Guia derechos-victimas-viogen-espa
 
L'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursL'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeurs
 
Hoy
HoyHoy
Hoy
 
Salidas Profesionales De La Educacion Social
Salidas Profesionales De La Educacion SocialSalidas Profesionales De La Educacion Social
Salidas Profesionales De La Educacion Social
 
L'enfant d'aujourd'hui 12.09.01
L'enfant d'aujourd'hui 12.09.01L'enfant d'aujourd'hui 12.09.01
L'enfant d'aujourd'hui 12.09.01
 
Bel N En Las Palmas
Bel N En Las PalmasBel N En Las Palmas
Bel N En Las Palmas
 

Similaire à Xamarin.Forms [french]

Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin
Christian Hissibini
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Tech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobiles
TelecomValley
 
Windows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer TalksWindows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer Talks
Jean-Sébastien Dupuy
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
Microsoft
 
Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
Thierry Buisson
 
Développement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelleDéveloppement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelle
REGIONAL ACADEMY OF EDUCATION AND TRAINING
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...
Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...
Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...
Microsoft Technet France
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
Laribi Aicha
 
introAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdfintroAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdf
RihabBENLAMINE
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Philippe Beraud
 
Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8
Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8
Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8
Microsoft
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobile
Eutech SSII
 
Réutilisation de code entre Windows 8 et Windows Phone 8.
Réutilisation de code entre Windows 8 et Windows Phone 8.Réutilisation de code entre Windows 8 et Windows Phone 8.
Réutilisation de code entre Windows 8 et Windows Phone 8.
Microsoft
 
Meetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec AzureMeetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec Azure
Samir Arezki ☁
 
Live Mesh Tech Days Suisse
Live Mesh Tech Days SuisseLive Mesh Tech Days Suisse
Live Mesh Tech Days SuisseGregory Renard
 
Sogeti mdday2010
Sogeti mdday2010Sogeti mdday2010
Sogeti mdday2010MD DAY
 

Similaire à Xamarin.Forms [french] (20)

Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Tech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobiles
 
Windows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer TalksWindows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer Talks
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
Développement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelleDéveloppement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelle
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...
Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...
Scénarios de déploiement d’applications multiplateformes avec Citrix/Microsof...
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
introAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdfintroAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdf
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 
Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8
Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8
Créer des applications métier (LOB) pour Windows 8 et Windows Phone 8
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobile
 
.NET DotNet CF - 1
.NET DotNet CF - 1.NET DotNet CF - 1
.NET DotNet CF - 1
 
Réutilisation de code entre Windows 8 et Windows Phone 8.
Réutilisation de code entre Windows 8 et Windows Phone 8.Réutilisation de code entre Windows 8 et Windows Phone 8.
Réutilisation de code entre Windows 8 et Windows Phone 8.
 
Meetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec AzureMeetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec Azure
 
Live Mesh Tech Days Suisse
Live Mesh Tech Days SuisseLive Mesh Tech Days Suisse
Live Mesh Tech Days Suisse
 
Sogeti mdday2010
Sogeti mdday2010Sogeti mdday2010
Sogeti mdday2010
 

Plus de Laurent Duveau

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
Laurent Duveau
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
Laurent Duveau
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
Laurent Duveau
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
Laurent Duveau
 
Angular Advanced Routing
Angular Advanced RoutingAngular Advanced Routing
Angular Advanced Routing
Laurent Duveau
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
Laurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
Laurent Duveau
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
Laurent Duveau
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
Laurent Duveau
 

Plus de Laurent Duveau (20)

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
Angular Advanced Routing
Angular Advanced RoutingAngular Advanced Routing
Angular Advanced Routing
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
 

Dernier

Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

Xamarin.Forms [french]

  • 1. Xamarin.Forms Montreal Mobile .NET Developers 10 Juin 2015 Laurent Duveau laurent@ldex.ca AngularJS, Azure et Xamarin MVP / MCT / RD @laurentduveau Montrealldex.ca
  • 2. 2Xamarin.Forms – Montreal Mobile .NET Developers Mes services Besoin d’aide? Web/HTML5/AngularJS Xamarin Contactez moi! www.LDEX.ca ASP.NET
  • 3. 3Xamarin.Forms – Montreal Mobile .NET Developers Agenda  Introduction  Développement mobile multi-plateformes  Xamarin.Forms  Présentation  Principes de fonctionnement  XAML pour les écrans  Étendre les fonctionnalités
  • 4. Android, iOS et Windows…
  • 5. UX iOS != Android != Windows
  • 6. 6Xamarin.Forms – Montreal Mobile .NET Developers UX Différente
  • 7. 7Xamarin.Forms – Montreal Mobile .NET Developers UX Différente
  • 8. 8Xamarin.Forms – Montreal Mobile .NET Developers Navigation iOS (iPhone) Android OS Application Applicatif + hardware 1 bouton système 3-4 boutons systèmes
  • 9. 9Xamarin.Forms – Montreal Mobile .NET Developers Navigation iOS: pas de bouton “précédent” physique.
  • 10. 10Xamarin.Forms – Montreal Mobile .NET Developers Affichage et résolutions iOS Android OS 3 Devices 1000+ Devices 6 résolutions Écrans: 3,7’ – 10,1’ Multitude de resolutions!! iPhone iPod iPad
  • 11. 11Xamarin.Forms – Montreal Mobile .NET Developers Vocabulaire Android iOS Windows Phone Layout (.axml) UIView (.xib ou storyboard) View (.xaml) Activity UIViewController Page Fragment UIView UserControl Intent UINavigationController Frame - UIApplication Application
  • 13. 13Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms: Partage étendu à la couche UI! approche Xamarin traditionnelle Shared UI Code Xamarin et Xamarin.Forms
  • 14. 14Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms Bâtir une app native iOS, Android et Windows à partir d’une base de code C# unique.
  • 15. 15Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms Partage aussi l’interface graphique! Intégration possible de code spécifique à une plateforme Prise en main facile, pas de connaissance spécifique des OS Plus de 40 contrôles graphiques disponibles
  • 16. 16Xamarin.Forms – Montreal Mobile .NET Developers Comment ça marche ? A l’exécution, chaque élément graphique Xamarin.Forms est généré dans son équivalent spécifique à la plateforme cible Une seule API pour générer des interfaces natives et spécifiques à l’OS
  • 17. 17Xamarin.Forms – Montreal Mobile .NET Developers  Pages, Layouts, et Contrôles  En code ou en XAML (MVVM)  Data Binding bidirectionnel  Navigation  API commune d’animation  Messaging Center  Accès aux API natives avec des CustomRenderers et DependencyService  Camera, GPS, …  NFC, … sur Android  PassKit, … sur iOS  Tiles, … sur WP Shared UI Code Qu’est ce qui est disponible?
  • 18. 18Xamarin.Forms – Montreal Mobile .NET Developers Content MasterDetail Navigation Tabbed Carousel Pages
  • 19. 19Xamarin.Forms – Montreal Mobile .NET Developers Stack Absolute Relative Grid ContentView ScrollView Frame Layouts
  • 20. 20Xamarin.Forms – Montreal Mobile .NET Developers ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell Contrôles
  • 21. 21Xamarin.Forms – Montreal Mobile .NET Developers Ecosystème de contrôles
  • 23. 23Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms est un package NuGet  Le mettre à jour! (même sur un nouveau projet)
  • 24. 24Xamarin.Forms – Montreal Mobile .NET Developers C# ou XAML var red = new Label { Text = "Stop", BackgroundColor = Color.Red, FontSize = 20, WidthRequest = 100 }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, FontSize = 20, WidthRequest = 100 }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, FontSize = 20, WidthRequest = 200 }; Content = new StackLayout { Spacing = 10, VerticalOptions = LayoutOptions.Center, Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Center, Children = { red, yellow, green } }; <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample3" Padding="20"> <StackLayout Spacing="10" VerticalOptions="Center" Orientation="Horizontal" HorizontalOptions="Center"> <Label Text="Stop" BackgroundColor="Red" FontSize="20" WidthRequest="100" /> <Label Text="Slow down" BackgroundColor="Yellow" FontSize="20" WidthRequest="100" /> <Label Text="Go" BackgroundColor="Green" FontSize="20" WidthRequest="200" /> </StackLayout> </ContentPage>
  • 25. 25Xamarin.Forms – Montreal Mobile .NET Developers XAML  XAML différent du XAML Microsoft  => Pas de designer Visual Studio!
  • 26. 26Xamarin.Forms – Montreal Mobile .NET Developers Code spécifique if (Device.OS == TargetPlatform.WinPhone) // ou iOS, Android { ... } if (Device.Idiom == TargetIdiom.Phone) // ou .Tablet { ... }
  • 27. 27Xamarin.Forms – Montreal Mobile .NET Developers Code spécifique Device.OnPlatform ( iOS: () => { page.BackgroundImage = "back.png"; label.FontFamily = "HelveticaNeue-Thin"; label.FontSize = 20; }, Android: () => { page.BackgroundColor = Color.FromHex ("#AA66CC"); label.FontFamily = "sans-serif-condensed"; label.FontSize = Device.GetNamedSize (NamedSize.Medium, label); } );
  • 28. 28Xamarin.Forms – Montreal Mobile .NET Developers Code spécifique Device.OnPlatform ( iOS: () => { page.BackgroundImage = "back.png"; label.FontFamily = "HelveticaNeue-Thin"; label.FontSize = 20; }, Android: () => { page.BackgroundColor = Color.FromHex ("#AA66CC"); label.FontFamily = "sans-serif-condensed"; label.FontSize = Device.GetNamedSize (NamedSize.Medium, label); } );
  • 29. 29Xamarin.Forms – Montreal Mobile .NET Developers En XAML <BoxView HorizontalOptions="Center"> <BoxView.Color> <OnPlatform x:TypeArguments="Color" iOS="Green" Android="#738182" WinPhone="Accent" /> </BoxView.Color> <BoxView.WidthRequest> <OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="50" /> </BoxView.WidthRequest> </BoxView>
  • 30. 30Xamarin.Forms – Montreal Mobile .NET Developers Navigation  Root Page  Utiliser un NavigationPage: implémente Ia navigation dans les pages  Navigation Standard  Navigation.PushAsync(nextPage);  Navigation.PopAsync();  Navigation Modale  Navigation.PushModalAsync(modalPage);  Navigation.PopModalAsync();
  • 32. 32Xamarin.Forms – Montreal Mobile .NET Developers Model-View-ViewModel ModelView ViewModel Affichage Intéraction avec la vue Objets du domaine d’affaire Events Data Data
  • 33. 33Xamarin.Forms – Montreal Mobile .NET Developers Model-View-ViewModel ModelView ViewModel Data Binding Xamarin.Forms Events Data
  • 34. 34Xamarin.Forms – Montreal Mobile .NET Developers Data Binding
  • 35. 35Xamarin.Forms – Montreal Mobile .NET Developers Data Binding
  • 36. 36Xamarin.Forms – Montreal Mobile .NET Developers Data Binding
  • 37. 37Xamarin.Forms – Montreal Mobile .NET Developers Data Binding binding bi-directionnel:
  • 39.
  • 41. 41Xamarin.Forms – Montreal Mobile .NET Developers Étendre Xamarin.Forms  Créer ou personnaliser les contrôles UI  Custom Renderers  Utiliser des services à implémentation spécifique pour chaque plateforme  Dependency Service
  • 42. 42Xamarin.Forms – Montreal Mobile .NET Developers Extensibilité Custom Renderer  Hériter d’un contrôle existant  Créer un nouveau contrôle  Ajout de propriétés bindable http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/
  • 43. 43Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer  Contrôle de saisie de base que l’on désire étendre:
  • 44. 44Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer Étape 1: Créer le contrôle étendu  Dans le projet commun (PCL):
  • 45. 45Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer Étape 2: L’utiliser dans une page  Dans le projet commun (PCL):
  • 46. 46Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer Étape 3: Implémenter le code du renderer  Dans les projets pour chaque plateforme
  • 47. 47Xamarin.Forms – Montreal Mobile .NET Developers Étape 4: Exporter le renderer  Dans les projets pour chaque plateforme: Custom Renderer
  • 48. 48Xamarin.Forms – Montreal Mobile .NET Developers Extensibilité Dependency Service Partager les fonctionnalités spécifiques aux plateformes à l’aide d’interfaces.
  • 49. 49Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 1: Créer une interface  Dans le projet commun (PCL):
  • 50. 50Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 2: Implémenter le code spécifique  Dans les projets pour chaque plateforme:
  • 51. 51Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 3: Exposer le service  Dans les projets pour chaque plateforme:
  • 52. 52Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 4: Utiliser depuis le code commun  Dans le projet commun (PCL):
  • 54. 54Xamarin.Forms – Montreal Mobile .NET Developers Animations  API d’animation multi-plateforme  Asynchrone (async/await)
  • 56.
  • 57. 57Xamarin.Forms – Montreal Mobile .NET Developers Messaging Center  MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback);  MessagingCenter.Send(T item, string message);
  • 58. 58Xamarin.Forms – Montreal Mobile .NET Developers Messaging Center Page maître: Page détails:
  • 59. 59Xamarin.Forms – Montreal Mobile .NET Developers Pour aller plus loin…  Documentation http://developer.xamarin.com/guides/cross-platform/xamarin-forms/  XAML http://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml- for-xamarin-forms/  Exemples https://github.com/xamarin/xamarin-forms-samples
  • 60. 60Xamarin.Forms – Montreal Mobile .NET Developers