You read that title correct – you can create an app for three different platforms all at once using Xamarin.Forms. Xamarin.Forms has come a long way since the days of when its recommended use was for simple apps and prototyping only and in this session, I will show you the advances made and how to utilize them to create beautiful apps yourself. You will see the basic structure of a Xamarin.Forms app and how to use XAML and the built-in controls to create a UI. You’ll learn about the MVVM pattern and data binding so information can be presented and modified in the UI and app logic layer with ease. You’ll walk through accessing platform specific native controls – from XAML! At the end of this session – you’ll be able to create a beautiful app – make that three beautiful apps – with Xamarin.Forms.

1. @codemillmatt
@codemillmatt codemilltech.com
SR CLOUD DEVELOPER ADVOCATE - MICROSOFT
Matthew Soucoup
INTRODUCTION TO XAMARIN.FORMS
Creating Three Beautiful Apps at Once

2. @codemillmatt

3. @codemillmatt
Matt Soucoup
matt.soucoup@microsoft.com
@codemillmatt codemilltech.com
Who is this guy?

4. Azure
Red Shirt
Dev Tour ‘17
A free code-focused five hour demo of Azure by Scott Guthrie
October 16th, Chicago
October 17th, Dallas
October 18th, Atlanta
October 19th, Boston
October 20th, New York City
Reserve your spot now: http://aka.ms/rst

5. @codemillmatt
Where to Find Stuff
Slides
slideshare.net/matthewsoucoup
Code
github.code/codemillmatt/conferencetalks
@codemillmatt - matt.soucoup@microsoft.com - codemilltech.com

6. @codemillmatt

7. @codemillmatt

8. @codemillmatt

9. @codemillmatt

10. @codemillmatt
Additional
Features and
Platform Access
MVVMUser Interface
Intro to Xamarin.Forms Agenda

11. @codemillmatt
User Interface

12. @codemillmatt
Pages
Content Navigation Master/Detail Tabbed Carousel

13. @codemillmatt
Navigation
Navigation
Page
Root Page
INavigation
Child 2
INavigation
Child 3
INavigation
Modal 1
INavigation
PushAsync()
PushAsync() PushModalAsync()

14. @codemillmatt
Navigation
Navigation
Page
Root Page
INavigation
Child 2
INavigation
Child 3
INavigation
Modal 1
INavigation
PopAsync()
PopAsync() PopModalAsync()

15. @codemillmatt
Layouts - Stack
Vertical Horizontal

16. @codemillmatt
Layouts - Grid

17. @codemillmatt
ListView

18. @codemillmatt
TableView

19. @codemillmatt
Controls
Image
ToolbarItem
BoxView
Label
Button

20. @codemillmatt
Controls
Entry
ToolbarItem
Switch
Picker
Editor

21. @codemillmatt
UI Demo
Controls
TableView
ListView

22. @codemillmatt
MVVM

23. @codemillmatt
MVVM
Model ViewView-Model
Uses
Shapes for display
Commands
(UI events)Service
Updates values

24. @codemillmatt
Databinding
ViewView-Model
Displays values
Updates values
Propagates
Automatically

25. @codemillmatt
public class RecipeViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
string _recipeName;
public string RecipeName
{
get { return _recipeName; }
set
{
if (_recipeName == value)
return;
_recipeName = value;
OnPropertyChanged();
}
}
public void OnPropertyChanged([CallerMemberName]string memberName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(memberName));
}
INotifyPropertyChanged

26. @codemillmatt
public void OnPropertyChanged([CallerMemberName]string memberName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(memberName)
);
Cuz it was at the bottom

27. @codemillmatt
<Label Text="{Binding RecipeName}" />
...
<Label Text="{Binding Time, StringFormat='{0} prep'}" />
Data Binding - XAML
BindingContext set on parent or control
Binding keyword
Reference view model property

28. @codemillmatt
Commanding
ViewView-Model
Commands
(UI events)
Service Data Binding

29. @codemillmatt
public ICommand AddRecipeCommand { get; } =
new Command(async (obj) => await Navigation.PushModalAsync(
new NavigationPage(new EditRecipePage()))
);
Command – View Model
ICommand interface
Action when invoked
Optional bool function for enabling

30. @codemillmatt
<Button Text="Add" Command="{Binding AddRecipeCommand}" />
Command - XAML
Command property
Binding keyword
One command per control

31. @codemillmatt
MVVM Demo
Data binding
Commanding

32. @codemillmatt
Additional Features & Platform Access

33. @codemillmatt
Messaging Center
Messaging
Center
Object A Object B
SubscribeSend Receive

34. @codemillmatt
Shared code calls
DependencyService
Register with
DependencyService
Implement on each platformDefine interface
Dependency Service
Platform Specific Functionality in Shared Code

35. @codemillmatt
public interface IFormsCamera
{
void LaunchCamera();
}
Dependency Service
Define the interface

36. @codemillmatt
[assembly: Dependency(typeof(AppleCamera))]
namespace Foodie.iOS
{
public class AppleCamera : IFormsCamera
{
public void LaunchCamera()
{
// Some camera stuff
}
}
}
Dependency Service
Platform implementation

37. @codemillmatt
public void TakePhoto()
{
var camera = DependencyService.Get<IFormsCamera>();
camera.LaunchCamera();
}
Dependency Service - Consume
DependencyService static object

38. @codemillmatt
Can handle native eventsBindable properties
Referenced in XAMLNative defined control
Bindable Native Views

39. @codemillmatt
Native View Demo
Referencing
Binding
MessagingCenter

40. @codemillmatt
Platform Access
• Messaging Center
• Dependency Service
• Bindable Native Views
MVVM
• Data binding
• Commanding
User Interface
• Pages
• Navigation
• Layouts
• Controls
Xamarin.Forms

41. @codemillmatt

42. @codemillmatt
Learn More!
Pluralsight: Moving Beyond the Basics with Xamarin.Forms
https://www.pluralsight.com/courses/xamarin-forms-moving-beyond-basics

43. @codemillmatt
Where to Find Stuff
Slides
slideshare.net/matthewsoucoup
Code
github.code/codemillmatt/conferencetalks
@codemillmatt - matt.soucoup@microsoft.com - codemilltech.com

44. @codemillmatt
@codemillmatt codemilltech.com
SR CLOUD DEVELOPER ADVOCATE - MICROSOFT
Matthew Soucoup
INTRODUCTION TO XAMARIN.FORMS
Creating Three Beautiful Apps at Once