Mobile Applications with a Shared UI

About this course

Build Native Cross-Platform Mobile Applications with a Shared UI for iOS, Android, and UWP in C# .NET with Xamarin.Forms.

This course teaches C# .NET developers how to build cross-platform mobile applications with a shared UI for iOS, Android, and UWP using Xamarin. Topics include entry-level mobile development, leveraging platform-specific features, and storing and displaying data. Students will also learn advanced topics such as using effects and renderers.

Audience profile

This course teaches C# .NET developers how to build cross-platform mobile applications with a shared UI for iOS, Android, and UWP using Xamarin.This course is intended for developers with at least basic C# knowledge with 6-12 months of .NET experience.
Hardware/Software:

• IOS development requires a Mac running the latest OS, with XCode and Visual Studio installed
• Windows development requires a Windows 10 PC with Visual Studio 2017 and the Mobile development with .NET workload installed
• Android development requires either a Mac or PC with Visual Studio installed (see requirements above)
• An iOS and an Android device are highly recommended

At course completion

After completing this course, students will be able to:

• Create cross-platform mobile applications that run on iOS, Android, and UWP using the Xamarin tools for Visual Studio.
• Access REST services, store data locally in a SQLite database and visual data using a shared XAML UI definition.
  

Prerequisites:

Before attending this course, students must have:
Basic knowledge of C# and six months of experience developing using .NET.

Course Outline

Module 1: Getting Started with Xamarin (XAM101)

By the end of this module, you will be able to choose the Xamarin approach that is right for you. You will also set up your development machine and run an app on Windows, the iOS simulator, and an Android emulator.
Lessons

• Define the state of mobile technology today
• Discuss mobile app trends
• Identify approaches to development
• Discover the Xamarin Approach
• Set up your development environment

Lab : Building Cross-Platform Applications with Xamarin

• Demonstration - Cross-Platform Applications with Xamarin
• Demonstration – View a Xamarin.Forms Project
• Setup Validation – Validate your development environment is ready

After completing this course, students will be able to:

• Identify mobile development trends.
• Identify the different approaches to mobile development.
• Describe the Xamarin approach to development.
• Set up and validate their development environment.

Module 2: Introduction to Xamarin.Forms (XAM120)

During this module, you will create a new Xamarin.Forms application and define your shared UI in code. You will also see how to access platform-specific features such as the phone dialer that do not have a shared-programming model integrated into Xamarin.Forms.
Lessons

• Create a single screen cross-platform application
• Cross-Platform Applications with Xamarin
• Arrange the UI using Layouts
• Use platform-specific features in shared code

Lab : Using Xamarin.Forms to build a single screen cross-platform application

• Create your first Xamarin.Forms application (Group Exercise)
• Create Xamarin.Forms Phoneword
• Add support for dialing the phone

After completing this module, students will be able to:

• Create a single screen cross-platform application.
• Cross Platform Applications with Xamarin.
• Arrange the UI using Layouts.
• Use platform-specific features in shared code.

Module 3: XAML in Xamarin.Forms (XAM130)

This module shows you how to define your UI in XAML. You will create pages and add controls, all in markup. You will also see how to access UI elements from code so you can subscribe to UI events and update UI properties as your data changes.
Lessons

• Examine XAML Syntax
• Add behavior to XAML-based pages
• Explore XAML capabilities

Lab : Create a XAML-based calculator app with behavior and tailor the UI to each platform

• Create a XAML-based version of a calculator
• Add behavior to the app
• Clean up the XAML code and tailor the UI to the platform

After completing this module, students will be able to:

• Identify the differences between Microsoft XAML and XAML for Xamarin.Forms.
• Write XAML for Xamarin.Forms.
• Access elements in code behind.
• Handle events.
• Use device-specific values.
• Use markup extensions.
• Use ContentView to share XAML.
• Compile XAML.

Module 4: Layout in Xamarin.Forms (XAM135)

This module contains in-depth coverage of StackLayout and Grid, the two most popular layout containers in Xamarin.Forms. You will also learn how to add support for scrolling when your UI is too large for the available screen area.
Lessons

• Specify the size of a view
• Arrange views with StackLayout
• Apply Attached Properties
• Arrange views with Grid
• Scroll a layout with ScrollView

Lab : Build user interfaces using stack and grid layouts

• Use StackLayout to build a UI
• Use a Grid Layout to build a UI

After completing this module, students will be able to:

• Size views.
• Add views to a StackLayout in code and XAML.
• Specify layout orientation.
• Use Expands to request extra space.
• Apply an Attached Property in code.
• Apply an Attached Property in XAML.
• Specify grid row and column sizes.
• Add children to grid cells.
• Use ScrollView to add scrolling.
• Set the scroll direction.

Module 5: Consuming REST-based Web Services (XAM150)

In this module, you will learn some common strategies for dealing with the unique challenges that mobile devices face when communicating over the network.
Lessons

• Obtain the device’s network capabilities
• Introduce REST
• Consume REST services with Xamarin
• Integrate with platform-specific network features

Lab : Use, consume, and communicate with REST services

• Determine the network connectivity
• Communicate with a Book Service
• Demonstration: Leverage the native platform network stack

After completing this module, students will be able to:

• Determine if the device has a connection.
• Obtain the device’s connection type.
• Determine when network availability changes.
• Identify REST services.
• Utilize URLs in REST.
• Describe guidelines for using REST.
• Identify REST services.
• Utilize URLs in REST.
• Describe guidelines for using REST.
• Customize the HttpClient handler.
• Leverage platform network stacks.
• Use App Transport Security on iOS.

Module 6: SQLite and Mobile Data (XAM160)

During this module, you will learn how to identify the proper location for your database file and how to insert, update, retrieve, and delete data efficiently using asynchronous I/O calls.
Lessons

• Choose a data storage strategy
• Store data locally with SQLite
• Use SQLite asynchronously

Lab : Utilize SQLite to store and access data

• Determine your database file path
• Add SQLite.Net to your projects
• Access a SQLite database with SQLite.Net
• Access a SQLite database using asynchronous methods

After completing this module, students will be able to:

• Identify data storage options.
• Select a storage location.
• Get the storage path for each platform.
• Add a SQLite Portable Class Library to the project.
• Define SQLite table schema using attributes.
• Create and connect to a SQLite database.
• Perform basic CRUD operations.
• Refactor database connection to use SQLiteAsyncConnection.
• Refactor table creation to use Async counterpart.
• Refactor CRUD operations to use Async counterparts.

Module 7: Data Binding in Xamarin.Forms (XAM270)

Use Data Binding in Xamarin.Forms to connect your application's data to your UI.
Lessons

• Use data binding to decouple code-behind from UI
• Use value converters to bind incompatible types

Lab : Use Data Binding in Xamarin.Forms

• Group Exercise: Use Data Binding in a Xamarin.Forms Application
• Keep the UI and data in sync using Bindings
• Use Value Converters

After completing this module, students will be able to:

• Map data to visuals.
• Create bindings in code.
• Create bindings in XAML.
• Work with binding context.
• Change binding modes.
• Implement property change notifications.
• Perform textual conversions in XAML.
• Create a value converter.
• Apply a value converter in XAML.

Module 8: Using ListView in Xamarin.Forms (XAM280)

Use the Xamarin.Forms ListView control to display scrolling lists of interactive data.
Lessons

• Display a collection with ListView
• Add and remove items dynamically
• Customize ListView rows

Lab : Use ListView in Xamarin.Forms

• Display a list of items with a ListView
• Select a row
• Work with mutable lists
• Add Pull to Refresh support

After completing this module, students will be able to:

• Provide data to a ListView.
• Manage selection in a ListView.
• Add, remove, and update data in the ListView.
• Make UI-safe collection changes.
• Modify collections in the background.
• Alter the row visuals.
• Use Data Templates.
• Change the ListView separator.
• Use built-in cell templates.

Module 9: Using Effects in Xamarin.Forms (XAM330)

This module teaches you how to use Effects to access and customize the native peer controls. This gives you the same power to modify the appearance of your UI as a native developer.
Lessons

• Customize control appearance
• Apply effects to controls
• Create an effect

Lab : Implement Effects in Xamarin.Forms

• Use platform-specific themes
• Add and use an existing effect
• Create a RoutingEffect
• Create a custom Effect
• Add an attached property

After completing this module, students will be able to:

• Change element properties.
• Use platform themes to update native control appearance.
• Resolve an effect.
• Apply an effect programmatically.
• Wrap an effect with RoutingEffect.
• Apply an effect in XAML.
• Create an effect.
• Update platform specific UI.
• Respond to UI changes and notifications.
• Export an effect.
• Add attached properties to an effect.
• Use and update attached properties.