Building Xamarin.Forms
apps with Prism and MVVM
MICHAEL MELUSKY - @MRJAVASCRIPT
CENTRAL PENN .NET – APRIL 17 2018
About Speaker
 Michael Melusky –
 Software Developer for Audacious Inquiry in Baltimore, MD
 Instructor at Penn State Harrisburg / Franklin and Marshall College
Why Xamarin.Forms?
Why this topic?
 I spoke here on React Native back in January…
 Also manage a Xamarin.Forms app on the side
 Was developed w/o best practices and wanted to rewrite it using approaches
recommended by Microsoft
Topics
 Intro to Xamarin.Forms
 Create a Xamarin.Forms app using Visual Studio
 Discussion on .NET Standard
 Go over core concepts:
 XAML
 Navigation
 MVVM (Model-View-ViewModel)
 Introduce Prism (with Unity for the DI container)
Additional Topics (Time Permitting)
 Pick and choose! (demo the app built for Philly.NET)
 SQLite integration (a “preferences” screen)
 Android widgets
 Facebook Connect
 Splash Screens and animation
 Jenkins and CI
 Xamarin UI.Test
What is Xamarin.Forms?
Xamarin.Forms
 A cross platform framework for building native iOS/Android/UWP apps
 Acquired by Microsoft in February 2016
 Product made “free” thereafter
Building Android and iOS apps
 Android:
 Built using Java/Kotlin
 iOS:
 Built using Swift/Objective-C
 Xamarin.Forms lets you build one code base (C#/XAML) to target both iOS and
Android
Who is using
Xamarin.Forms?
Who is using Xamarin.Forms?
 Many are!
 https://www.xamarin.com/customers
 Microsoft built their new MSN News app:
 https://channel9.msdn.com/Shows/XamarinShow/Building-the-New-MSN-News-App-
with-Xamarin
So how do we build a Xamarin.Forms app?
 Let’s build one ourselves!
 ** DEMO **
.NET Standard
.NET Standard (vs .NET Core)
 .NET Core is a framework from Microsoft for producing applications that can run
on any target (Windows, Linux, OSX)
 Microsoft breaks these down into:
 Console application
 MVC application
 .NET Standard is a specification of “class libraries” between various Microsoft
application frameworks
 Meant to replace PCL (portable class library)
.NET
Standard
.NET Standard Analogy
 An analogy:
 If .NET Standard is a bird
 .NET Core is an eagle
 More features than the generic “bird”
 .NET 4.6.1 is a cat
 No features in common with the “bird”
XAML
Xamarin.Forms Views
 Xamarin.Forms views are built using XAML:
 “eXtensible Application Markup Language”
 If you’ve ever built a Silverlight or a WPF application, you should be at home
 However some controls in Xamarin.Forms differ from traditional XAML controls in
WPF/Silverlight
Xamarin.Forms Controls
Xamarin.Forms Controls
 Broken down into four components:
 Pages
 Layouts
 Views
 Cells
Pages
Layouts
Views
Views
Views
Views
Views that
Initiate
Commands
Views for
Setting
Values
Views for
Setting
Values
Views for Setting Values
Views for
Editing
Text
Views for
Editing
Text
Views for
Displaying
Collections
Views that Display Collections
Cells
Cells
Cells
MVVM
Model-View-ViewModel
 This is a design pattern that separates the XAML user interface (View) from the
underlying data (Model)
 This intermediary between the two is called the View Model
 The view is a XAML file that references properties defined in the view model via
bindings
 The View Model controls the logic of the presentation tier
 The view’s binding context is an instance of the view model
MVVM
MVVM
 ** Demo **
 Integrate INotifyPropertyChanged
ViewModel Commanding
 The view needs to contain buttons that trigger various actions in the view model (e.g. page navigation)
 We don’t want the view models to contain “Clicked” handlers for the buttons since that would tie the
View Model to a particular UI paradigm
 To allow this view model independence, a command interface exists and is supported by the following:
 Button
 MenuItem
 ToolbarItem
 SearchBar
 TextCell / ImageCell
 ListView
 TapGestureRecognizer
ICommand
MVVM Data Binding
 Design pattern to keep logic out of the classes that extend ContentPage.
 You can in theory write everything in the page class.
 Click events for the buttons
 Code that extracts elements from the view
 Let’s use data bindings instead
Button Click Event
Data Binding
 Consists of two components:
 A source object that provides the data
 A target object which will consume and display the data
Data Binding
Data Binding
 When using data binding, there are three modes:
 The Mode property is used to specify the direction in which property value
changes will propagate:
 A OneWay binding propagates changes from the source to the target.
 A TwoWay binding propagates changes in both directions, ensuring that the source
and target objects are always synchronized.
 A OneWayToSource binding propagates changes from the target to the source, and is
mainly used for read-only bindable properties.
 In Xamarin.Forms, the Mode property defaults to OneWay, and can be omitted
unless a different BindingMode is required.
Data Binding
 ** DEMO **
Dependency Injection
Dependency Injection
 Typically when a constructor is invoked, any values that the object needs are
passed to the constructor
 .NET Core uses this in particular (Constructor Injection)
 Any dependencies that the object needs are injected into the constructor
 A “service” is a good candidate for dependency injection
 Dependency Injection is a specialized version of the Inversion of Control Pattern
(IoC)
 Another class is responsible for injecting the dependencies at runtime!
Dependency Injection
Dependency Injection
 There are a number of MVVM frameworks today to make things easier
 Prism, MvvmLight, FreshMvvm, et al.
 Let’s use Prism, but we need to pick a dependency injection container.
 Unity
 Autofac
 Ninject
 Dryloc
 Unity is the most popular container, let’s use this.
 ** DEMO REWRITE USING PRISM **
Prism
 Recommended by Microsoft Patterns and Practices
 A number of key pieces in the framework:
 BindableBase:
 Similar to our ViewModelBase, our view models can extend this
 DelegateCommand:
 Base class that implements ICommand interface
 INavigationService:
 Interface that can be injected in our view models to handle navigation
 IPageDialogService:
 Interface that can be injected in our view models for “modal” alert support
Open Topics
Pick and Choose!
 Xamarin.Auth and Authentication
 Facebook Authentication
 SQLite integration (user preferences)
 Xamarin UI.Test
 Jenkins and CI
 Android Splash Page
 Android Widgets
Thanks for coming
 Code on github
 Slides on slideshare
 @mrjavascript

More Related Content

PPTX
MVVM Design Pattern NDC2009
PPTX
Training: MVVM Pattern
PPTX
Slide Presentation of MVP Pattern Concept
PPTX
MVVM ( Model View ViewModel )
PPTX
Model View Presenter (MVP) In Aspnet
PPTX
MVVM - Model View ViewModel
PPTX
Introduction to WPF and MVVM
PPTX
Model view controller (mvc)
MVVM Design Pattern NDC2009
Training: MVVM Pattern
Slide Presentation of MVP Pattern Concept
MVVM ( Model View ViewModel )
Model View Presenter (MVP) In Aspnet
MVVM - Model View ViewModel
Introduction to WPF and MVVM
Model view controller (mvc)

What's hot (20)

PPTX
Design Pattern - MVC, MVP and MVVM
PDF
MVC Seminar Presantation
PPTX
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
PPTX
Model viewviewmodel2
PPTX
ASP .NET MVC Introduction & Guidelines
PPTX
MVVM with WPF
 
PPT
MVC(Model View Controller),Web,Enterprise,Mobile
PPTX
ASP.NET MVC Presentation
PPTX
ASP.NET MVC.
 
PPTX
Introduction to mvc architecture
PPT
Mvc 130330091359-phpapp01
DOCX
A report on mvc using the information
ODP
What is MVC?
PPT
MSDN - ASP.NET MVC
PPT
MVC
PPTX
Introduction To Model View Presenter
PPTX
Mvc pattern and implementation in java fair
PDF
ASP.NET MVC 3
PDF
Model view view model
Design Pattern - MVC, MVP and MVVM
MVC Seminar Presantation
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Model viewviewmodel2
ASP .NET MVC Introduction & Guidelines
MVVM with WPF
 
MVC(Model View Controller),Web,Enterprise,Mobile
ASP.NET MVC Presentation
ASP.NET MVC.
 
Introduction to mvc architecture
Mvc 130330091359-phpapp01
A report on mvc using the information
What is MVC?
MSDN - ASP.NET MVC
MVC
Introduction To Model View Presenter
Mvc pattern and implementation in java fair
ASP.NET MVC 3
Model view view model
Ad

Similar to Building xamarin.forms apps with prism and mvvm (20)

PPTX
.NET,ASP .NET, Angular Js,LinQ
PPT
Code Camp 06 Model View Presenter Architecture
PPTX
Stephen Kennedy Silverlight 3 Deep Dive
PPT
Overview of CSharp MVC3 and EF4
PPTX
No brainer
PPT
Metamorphosis from Forms to Java: A technical lead's perspective, part II
PPTX
Spring (1)
PDF
Diving Into Xamarin.Forms
PPTX
Xamarin Development
PPTX
Modern ASP.NET Webskills
PDF
Building richwebapplicationsusingasp
PPTX
Real world apps with Xamarin and MVVM
PPTX
Javascript from beginning to modern
DOCX
Learning MVC Part 3 Creating MVC Application with EntityFramework
PPT
ios basics
PPT
Automated Unit Testing in Silverlight for Windows Phone 7
PDF
Jinal desai .net
PDF
Cross platform Xamarin Apps With MVVM
PDF
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
PDF
Sybase sup hybrid_web_container_article_wp
.NET,ASP .NET, Angular Js,LinQ
Code Camp 06 Model View Presenter Architecture
Stephen Kennedy Silverlight 3 Deep Dive
Overview of CSharp MVC3 and EF4
No brainer
Metamorphosis from Forms to Java: A technical lead's perspective, part II
Spring (1)
Diving Into Xamarin.Forms
Xamarin Development
Modern ASP.NET Webskills
Building richwebapplicationsusingasp
Real world apps with Xamarin and MVVM
Javascript from beginning to modern
Learning MVC Part 3 Creating MVC Application with EntityFramework
ios basics
Automated Unit Testing in Silverlight for Windows Phone 7
Jinal desai .net
Cross platform Xamarin Apps With MVVM
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
Sybase sup hybrid_web_container_article_wp
Ad

More from Mike Melusky (20)

PPTX
Container Orchestration for .NET Developers
PPTX
Containerize all the things!
PPTX
Building a Google Cloud Firestore API with dotnet core
PPTX
Effective .NET Core Unit Testing with SQLite and Dapper
PPTX
Effective .NET Core Unit Testing with SQLite and Dapper
PPTX
Reactive Web Development with Spring Boot 2
PPTX
Introduction to react native with redux
PPTX
Xamarin.Forms Bootcamp
PPTX
An evening with React Native
PPTX
Progressive Web Apps and React
PPTX
Into to Docker (Central PA Java User Group - 8/14/2017)
PPTX
An afternoon with angular 2
PPTX
An evening with Angular 2
PPTX
Securing your azure web app with asp.net core data protection
PPTX
Ember.js and .NET Integration
PPTX
Building Native “apps” with Visual Studio 2015
PPTX
Emberjs and ASP.NET
PPTX
Fun with lambda expressions
PPTX
An evening with querydsl
PPTX
Fun with lambda expressions
Container Orchestration for .NET Developers
Containerize all the things!
Building a Google Cloud Firestore API with dotnet core
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
Reactive Web Development with Spring Boot 2
Introduction to react native with redux
Xamarin.Forms Bootcamp
An evening with React Native
Progressive Web Apps and React
Into to Docker (Central PA Java User Group - 8/14/2017)
An afternoon with angular 2
An evening with Angular 2
Securing your azure web app with asp.net core data protection
Ember.js and .NET Integration
Building Native “apps” with Visual Studio 2015
Emberjs and ASP.NET
Fun with lambda expressions
An evening with querydsl
Fun with lambda expressions

Recently uploaded (20)

PDF
Optimizing bioinformatics applications: a novel approach with human protein d...
PPTX
From XAI to XEE through Influence and Provenance.Controlling model fairness o...
PDF
GDG Cloud Southlake #45: Patrick Debois: The Impact of GenAI on Development a...
PDF
substrate PowerPoint Presentation basic one
PPTX
How to use fields_get method in Odoo 18
PPTX
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
PDF
Introduction to c language from lecture slides
PDF
EIS-Webinar-Regulated-Industries-2025-08.pdf
PDF
Be ready for tomorrow’s needs with a longer-lasting, higher-performing PC
PDF
Internet of Things (IoT) – Definition, Types, and Uses
PDF
Intravenous drug administration application for pediatric patients via augmen...
PDF
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
PDF
Streamline Vulnerability Management From Minimal Images to SBOMs
PDF
ment.tech-Siri Delay Opens AI Startup Opportunity in 2025.pdf
PPTX
Presentation - Principles of Instructional Design.pptx
PPTX
maintenance powerrpoint for adaprive and preventive
PDF
Examining Bias in AI Generated News Content.pdf
PDF
TicketRoot: Event Tech Solutions Deck 2025
PPTX
Information-Technology-in-Human-Society.pptx
PDF
CEH Module 2 Footprinting CEH V13, concepts
Optimizing bioinformatics applications: a novel approach with human protein d...
From XAI to XEE through Influence and Provenance.Controlling model fairness o...
GDG Cloud Southlake #45: Patrick Debois: The Impact of GenAI on Development a...
substrate PowerPoint Presentation basic one
How to use fields_get method in Odoo 18
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
Introduction to c language from lecture slides
EIS-Webinar-Regulated-Industries-2025-08.pdf
Be ready for tomorrow’s needs with a longer-lasting, higher-performing PC
Internet of Things (IoT) – Definition, Types, and Uses
Intravenous drug administration application for pediatric patients via augmen...
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
Streamline Vulnerability Management From Minimal Images to SBOMs
ment.tech-Siri Delay Opens AI Startup Opportunity in 2025.pdf
Presentation - Principles of Instructional Design.pptx
maintenance powerrpoint for adaprive and preventive
Examining Bias in AI Generated News Content.pdf
TicketRoot: Event Tech Solutions Deck 2025
Information-Technology-in-Human-Society.pptx
CEH Module 2 Footprinting CEH V13, concepts

Building xamarin.forms apps with prism and mvvm

  • 1. Building Xamarin.Forms apps with Prism and MVVM MICHAEL MELUSKY - @MRJAVASCRIPT CENTRAL PENN .NET – APRIL 17 2018
  • 2. About Speaker  Michael Melusky –  Software Developer for Audacious Inquiry in Baltimore, MD  Instructor at Penn State Harrisburg / Franklin and Marshall College
  • 4. Why this topic?  I spoke here on React Native back in January…  Also manage a Xamarin.Forms app on the side  Was developed w/o best practices and wanted to rewrite it using approaches recommended by Microsoft
  • 5. Topics  Intro to Xamarin.Forms  Create a Xamarin.Forms app using Visual Studio  Discussion on .NET Standard  Go over core concepts:  XAML  Navigation  MVVM (Model-View-ViewModel)  Introduce Prism (with Unity for the DI container)
  • 6. Additional Topics (Time Permitting)  Pick and choose! (demo the app built for Philly.NET)  SQLite integration (a “preferences” screen)  Android widgets  Facebook Connect  Splash Screens and animation  Jenkins and CI  Xamarin UI.Test
  • 8. Xamarin.Forms  A cross platform framework for building native iOS/Android/UWP apps  Acquired by Microsoft in February 2016  Product made “free” thereafter
  • 9. Building Android and iOS apps  Android:  Built using Java/Kotlin  iOS:  Built using Swift/Objective-C  Xamarin.Forms lets you build one code base (C#/XAML) to target both iOS and Android
  • 11. Who is using Xamarin.Forms?  Many are!  https://www.xamarin.com/customers  Microsoft built their new MSN News app:  https://channel9.msdn.com/Shows/XamarinShow/Building-the-New-MSN-News-App- with-Xamarin
  • 12. So how do we build a Xamarin.Forms app?  Let’s build one ourselves!  ** DEMO **
  • 14. .NET Standard (vs .NET Core)  .NET Core is a framework from Microsoft for producing applications that can run on any target (Windows, Linux, OSX)  Microsoft breaks these down into:  Console application  MVC application  .NET Standard is a specification of “class libraries” between various Microsoft application frameworks  Meant to replace PCL (portable class library)
  • 16. .NET Standard Analogy  An analogy:  If .NET Standard is a bird  .NET Core is an eagle  More features than the generic “bird”  .NET 4.6.1 is a cat  No features in common with the “bird”
  • 17. XAML
  • 18. Xamarin.Forms Views  Xamarin.Forms views are built using XAML:  “eXtensible Application Markup Language”  If you’ve ever built a Silverlight or a WPF application, you should be at home  However some controls in Xamarin.Forms differ from traditional XAML controls in WPF/Silverlight
  • 20. Xamarin.Forms Controls  Broken down into four components:  Pages  Layouts  Views  Cells
  • 21. Pages
  • 23. Views
  • 24. Views
  • 25. Views
  • 26. Views
  • 34. Views that Display Collections
  • 35. Cells
  • 36. Cells
  • 37. Cells
  • 38. MVVM
  • 39. Model-View-ViewModel  This is a design pattern that separates the XAML user interface (View) from the underlying data (Model)  This intermediary between the two is called the View Model  The view is a XAML file that references properties defined in the view model via bindings  The View Model controls the logic of the presentation tier  The view’s binding context is an instance of the view model
  • 40. MVVM
  • 41. MVVM  ** Demo **  Integrate INotifyPropertyChanged
  • 42. ViewModel Commanding  The view needs to contain buttons that trigger various actions in the view model (e.g. page navigation)  We don’t want the view models to contain “Clicked” handlers for the buttons since that would tie the View Model to a particular UI paradigm  To allow this view model independence, a command interface exists and is supported by the following:  Button  MenuItem  ToolbarItem  SearchBar  TextCell / ImageCell  ListView  TapGestureRecognizer
  • 44. MVVM Data Binding  Design pattern to keep logic out of the classes that extend ContentPage.  You can in theory write everything in the page class.  Click events for the buttons  Code that extracts elements from the view  Let’s use data bindings instead
  • 46. Data Binding  Consists of two components:  A source object that provides the data  A target object which will consume and display the data
  • 48. Data Binding  When using data binding, there are three modes:  The Mode property is used to specify the direction in which property value changes will propagate:  A OneWay binding propagates changes from the source to the target.  A TwoWay binding propagates changes in both directions, ensuring that the source and target objects are always synchronized.  A OneWayToSource binding propagates changes from the target to the source, and is mainly used for read-only bindable properties.  In Xamarin.Forms, the Mode property defaults to OneWay, and can be omitted unless a different BindingMode is required.
  • 51. Dependency Injection  Typically when a constructor is invoked, any values that the object needs are passed to the constructor  .NET Core uses this in particular (Constructor Injection)  Any dependencies that the object needs are injected into the constructor  A “service” is a good candidate for dependency injection  Dependency Injection is a specialized version of the Inversion of Control Pattern (IoC)  Another class is responsible for injecting the dependencies at runtime!
  • 53. Dependency Injection  There are a number of MVVM frameworks today to make things easier  Prism, MvvmLight, FreshMvvm, et al.  Let’s use Prism, but we need to pick a dependency injection container.  Unity  Autofac  Ninject  Dryloc  Unity is the most popular container, let’s use this.  ** DEMO REWRITE USING PRISM **
  • 54. Prism  Recommended by Microsoft Patterns and Practices  A number of key pieces in the framework:  BindableBase:  Similar to our ViewModelBase, our view models can extend this  DelegateCommand:  Base class that implements ICommand interface  INavigationService:  Interface that can be injected in our view models to handle navigation  IPageDialogService:  Interface that can be injected in our view models for “modal” alert support
  • 56. Pick and Choose!  Xamarin.Auth and Authentication  Facebook Authentication  SQLite integration (user preferences)  Xamarin UI.Test  Jenkins and CI  Android Splash Page  Android Widgets
  • 57. Thanks for coming  Code on github  Slides on slideshare  @mrjavascript