O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mastering Xamarin UI Development

Book Description

Build stunning, maintainable, cross-platform mobile application user interfaces with the power of Xamarin

About This Book

  • Create, configure, and customize stunning platform-specific features as well as cross-platform UIs with the power of Xamarin Forms.
  • Maximize the testability, flexibility, and overall quality of your Xamarin apps.
  • Get the most out of Xamarin.Forms and create your own reusable templates with C# scripting in Xamarin.

Who This Book Is For

If you are a mobile developer with basic knowledge of Xamarin and C# coding, then this book is for you.

What You Will Learn

  • Develop stunning native cross-platform apps using the Xamarin.Forms framework
  • Work with the different UI layouts to create customized layouts using the C# programming language and tweak it for a given platform
  • Customize the user interface using DataTemplates and CustomRenderers and the Platform Effects API to change the appearance of control elements
  • Build hybrid apps using the Razor Template Engine and create Razor Models that communicate with a SQLite database
  • Use location based features within your app to display the user's current location
  • Work with the Xamarin.Forms Map control to display Pin placeholders based on the stored latitude and longitude coordinates
  • Understand and use the MVVM pattern architecture to navigate between each of your ViewModels and implement Data Binding to display and update information
  • Work with the Microsoft Azure Platform to incorporate API Data Access using Microsoft Azure App Services and the RESTful API
  • Incorporate third-party features within your app using the Facebook SDK and the Open Graph API
  • Perform unit testing and profile your Xamarin.Forms applications
  • Deploy your apps to the Google Play Store and Apple App Store

In Detail

Xamarin is the most powerful cross-platform mobile development framework. If you are interested in creating stunning user interfaces for the iOS and Android mobile platforms using the power of Xamarin and Xamarin.Forms, then this is your ticket.

This book will provide you the practical skills required to develop real-world Xamarin applications. You will learn how to implement UI structures and layouts, create customized elements, and write C# scripts to customize layouts. You will create UI layouts from scratch so that you can tweak and customize a given UI layout to suit your needs by using Data Templates.

Moving on, you will use third-party libraries – such as the Razor template engine that allows you to create your own HTML5 templates within the Xamarin environment – to build a book library Hybrid solution that uses the SQLite.Net library to store, update, retrieve, and delete information within a SQLite local database. You'll also implement key data-binding techniques that will make your user interfaces dynamic, and create personalized animations and visual effects within your user interfaces using Custom Renderers and the PlatformEffects API to customize and change the appearance of control elements.

At the end of this book, you will test your application UI for robust and consistent behavior and then explore techniques to deploy to different platforms.

Style and approach

This easy to follow guide will walk you through building a real world Xamarin.Forms mobile app from start to finish. Each chapter builds upon the app using a step-by-step methodology that applies new advanced functionalities, design patterns, and best practices.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Mastering Xamarin UI Development
    1. Mastering Xamarin UI Development
    2. Credits
    3. About the Author
    4. Acknowledgments
    5. About the Reviewers
    6. www.PacktPub.com
      1. Why subscribe?
    7. Customer Feedback
    8. Dedication
    9. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    10. 1. Creating the TrackMyWalks Native App
      1. Creating the TrackMyWalks solution
        1. Updating the TrackMyWalks solution packages
      2. Creating the TrackMyWalks model
      3. Creating the walks main page
      4. Creating the new walk entry content page
      5. Creating the walk trail content page
        1. Adding the Xamarin.Forms.Maps NuGet package
      6. Creating the DistanceTravelledPage content page
      7. Creating the Splash screen content page
        1. Updating the Xamarin.Forms App class
      8. Differences between Xamarin Studio and Visual Studio
      9. Running the TrackMyWalks app using the simulator
      10. Summary
    11. 2. MVVM and Data Binding
      1. Understanding the MVVM pattern architecture
      2. Implementing the MVVM ViewModels within your app
      3. Creating the WalkBaseViewModel for the TrackMyWalks app
      4. Implementing the WalksPageViewModel
        1. Updating the walks main page to use the MVVM model
      5. Implementing the walks entry page ViewModel
        1. Updating the WalksEntryPage to use the MVVM model
      6. Implementing the walk trail page ViewModel
        1. Updating the WalksTrailPage to use the MVVM model
      7. Implementing the DistanceTravelledViewModel
        1. Updating the DistanceTravelledPage to use the MVVM model
      8. Summary
    12. 3. Navigating within the MVVM Model - The Xamarin.Forms Way
      1. Understanding the Xamarin.Forms Navigation API
      2. Differences between the navigation and ViewModel approaches
      3. Implementing the navigation service within your app
        1. Creating the navigation service interface for the TrackMyWalks app
        2. Creating a navigation service to navigate within our ViewModels
        3. Updating the WalkBaseViewModel to use our navigation service
        4. Updating the walks main page ViewModel and navigation service
        5. Updating the walks main page to use the updated ViewModel
        6. Updating the walks entry page ViewModel and navigation service
        7. Updating the WalksEntryPage to use the updated ViewModel
        8. Updating the walks trail page ViewModel and navigation service
        9. Updating the WalksTrailPage to use the updated ViewModel
        10. Updating the distance travelled ViewModel and navigation service
        11. Updating the DistanceTravelledPage to use the updated ViewModel
        12. Updating the Xamarin.Forms.App class to use the navigation service
      4. Summary
    13. 4. Adding Location-Based Features within Your App
      1. Creating and using platform-specific services
        1. Creating the Location Service Interface for the TrackMyWalks app
        2. Creating the Location Service class for the Android platform
        3. Creating the Location Service class for the iOS platform
        4. Enabling background updates and getting the user's current location
        5. Updating the WalkEntryViewModel to use the location service
        6. Updating the DistanceTravelledViewModel to use the location service
        7. Updating the SplashPage to register our ViewModels
        8. Updating the MainActivity class to use Xamarin.Forms.Maps
        9. Updating the Xamarin.Forms App class to use platform specifics
      2. Summary
    14. 5. Customizing the User Interface
      1. Creating the DataTemplate class for the TrackMyWalks app
        1. Updating the walks main page to use the data template
      2. Creating a TableView EntryCell custom picker for the iOS platform
      3. Creating the custom picker renderer class for the iOS platform
        1. Updating the WalksEntryPage to use the custom picker renderer
      4. Creating PlatformEffects using the Effects API for the iOS platform
      5. Creating PlatformEffects using the Effects API for the Android platform
      6. Implementing value converters within the TrackMyWalks app
        1. Updating the WalkBaseViewModel to use our Boolean converter
        2. Updating the WalksPageViewModel to use our Boolean converter
        3. Updating the walks main page to use the updated ViewModel
        4. Updating the WalksTrailPage to use the updated ViewModel
        5. Updating the DistanceTravelledPage to use the updated ViewModel
        6. Updating the WalkCellDataTemplate class to use PlatformEffects
      7. Summary
    15. 6. Working with Razor Templates
      1. Understanding the Razor template engine
      2. Creating and implementing Razor templates within Xamarin Studio
        1. Adding the SQLite.Net package to the BookLibrary solution
      3. Creating and implementing the book library database model
      4. Creating and implementing the book database wrapper
      5. Creating and implementing the BookLibrary database wrapper
      6. Creating and implementing the book listing main page
      7. Creating and implementing the BookLibraryAdd Razor template
      8. Creating and implementing the BookLibraryEdit Razor template
      9. Creating and implementing the WebViewController class
        1. Updating the book library Cascading Style Sheet (CSS)
      10. Summary
    16. 7. Incorporating API Data Access Using Microsoft Azure App Services
      1. Setting up our TrackMyWalks app using Microsoft Azure
        1. Adding the Json.Net NuGet package to the TrackMyWalks app
        2. Adding the HttpClient NuGet package to the TrackMyWalks app
        3. Updating the WalkEntries model to use the Json.Net framework
      2. Creating the HTTP web service class for the TrackMyWalks app
      3. Creating the DataService API for the TrackMyWalks app
      4. Creating the DataService API class for the TrackMyWalks app
        1. Updating the WalkBaseViewModel to use our DataService API
        2. Updating the WalkEntryViewModel to use our DataService API
        3. Updating the WalksPageViewModel to use our DataService API
        4. Updating the WalksPage to use the updated ViewModel
        5. Updating the custom picker renderer class for the iOS platform
        6. Updating the WalksEntryPage to use the updated custom picker
      5. Summary
    17. 8. Making Our App Social - Using the Facebook API
      1. Setting up and registering the TrackMyWalks app with Facebook
        1. Adding the Xamarin.Auth NuGet package to the TrackMyWalks app
        2. Adding the FaceBook SDK library to the TrackMyWalks app
      2. Creating a Facebook user model for the TrackMyWalks app
        1. Creating a FacebookCredentials class for the TrackMyWalks app
        2. Creating the Facebook Sign In to use within our TrackMyWalks app
        3. Creating the Facebook Sign In Class for TrackMyWalks (iOS) app
      3. Updating the NavigationService Interface for the TrackMyWalks app
        1. Updating the NavigationService class for the TrackMyWalks app
      4. Updating the WalksPage to properly handle Facebook Sign In
        1. Updating the WalksPage ViewModel to use our FaceBookApiUser
        2. Updating the DistanceTravelledPage for the TrackMyWalks app
        3. Updating the Xamarin.Forms App class to handle Facebook Sign In
        4. Enabling Facebook functionality within the TrackMyWalks app
      5. Summary
    18. 9. Unit Testing Your Xamarin.Forms Apps Using the NUnit and UITest Frameworks
      1. Creating a unit test solution folder using Xamarin Studio
      2. Creating a unit test project using Xamarin Studio
        1. Adding the Moq NuGet package to the unit test project
        2. Adding the TrackMyWalks project to TrackMyWalks.UnitTests
        3. Creating and implementing the WalksTrailViewModel NUnit test class
        4. Creating and implementing the WalkEntryViewModel NUnit test class
        5. Running the TrackMyWalks.UnitTests using Xamarin Studio
      3. Creating a UI test project using Xamarin Studio
      4. Understanding the commonly used UITest methods
        1. Setting up and initializing our TrackMyWalks app for UITest
        2. Implementing the CreateNewWalkEntry using the UITest.Framework
      5. Adding the Xamarin Test Cloud Agent to the iOS project
        1. Updating the TrackMyWalks AppDelegate class to handle Xamarin Test Cloud Agent
      6. Running the TrackMyWalks UITests using Xamarin Studio
      7. Summary
    19. 10. Packaging and Deploying Your Xamarin.Forms Applications
      1. Creating and setting up your iOS development team
      2. Creating the TrackMyWalks iOS development certificate
        1. Obtaining the iOS development certificate from Apple
        2. Creating the App ID for the TrackMyWalks (iOS) application
      3. Creating the TrackMyWalks development provisioning profile
      4. Preparing the TrackMyWalks (iOS) app for submission
        1. Submitting the TrackMyWalks (iOS) app to iTunes Connect using Xamarin Studio
      5. Summary