Mastering Xamarin UI Development

Build robust and a maintainable cross-platform mobile UI with Xamarin and C# 7, 2nd Edition

Steven F. Daniel

• Editorial: Packt Publishing
• Año: 2018
• ISBN:
  9781788998529
• Edición: 2
• Categoría: Computer Science
• Categoría: Programming Mobile Devices

Learn how to build stunning, maintainable, cross-platform mobile application user interfaces using C# 7 with the power of both the Xamarin and Xamarin.Forms frameworks.

Key Features

• Build effective native and cross-platform user interfaces using the Xamarin frameworks for iOS and Android, as well as Xamarin.Forms
• Maximize the testability, flexibility, and overall quality of your Xamarin mobile apps
• Step-by-Steps guide that is packed with real-world scenarios and solutions, to build professional grade mobile apps and games for the iOS and Android platforms, using C# 7

Book Description

This book will provide you with the knowledge and practical skills that are required to develop real-world Xamarin and Xamarin.Forms applications. You'll learn how to create native Android app that will interact with the device camera and photo gallery, and then create a native iOS sliding tiles game. You will learn how to implement complex UI layouts and create customizable control elements based on the platform, using XAML and C# 7 code to interact with control elements within your XAML ContentPages.

You'll learn how to add location-based features by to your apps by creating a LocationService class and using the Xam.Plugin.Geolocator cross-platform library, that will be used to obtain the current device location. Next, you'll learn how to work with and implement animations and visual effects within your UI using the PlatformEffects API, using C# code.

At the end of this book, you'll learn how to integrate Microsoft Azure App Services and use the Twitter APIs within your app. You will work with the Razor Templating Engine to build a book library HTML5 solution that will use a SQLite.net library to store, update, retrieve, and delete information within a local SQLite database. Finally, you will learn how to write unit tests using the NUnit and UITest frameworks.

What you will learn

• Downloading and Installing the Visual Studio for Mac IDE
• Overview and Understanding of the Xamarin Mobile Platform
• Understand the MVVM architectural pattern and how to implement this with your apps
• Build a NavigationService class to enable navigation between your ViewModels
• Implement Data-Binding to control elements within your XAML pages and ViewModels
• Create and Implement Xamarin.Forms Animations within your applications
• Work with the Microsoft Azure App Services Platform and the Facebook SDK

Who this book is for

This book is intended for readers who have experience using at least the C# 6.0 programming language and interested in learning how to create stunning native, and cross-platform user interfaces for the iOS and Android platforms using the Xamarin and Xamarin.Forms frameworks using C# 7.

Customizing the User Interface

In the previous chapter, we learned how to incorporate platform-specific features into the TrackMyWalks application, depending on the mobile platform that is being run, as well as how to incorporate the NuGet package into the shared-core project solution.

You learned how to create a LocationService Interface and Class, which included a number of class instance methods used by our iOS and Android platforms to handle location-based features and obtain current GPS coordinates, as well as handling location updates in the background on the mobile device. You learned how to make relevant changes to both WalkEntryPageViewModel and WalkDistancePageViewModel to allow for location-based features to work, before moving on to creating a CustomMapOverlay class that will be used to display a native Map control, based on the current platform.

Lastly, you updated WalkDistancePage.xaml and the code-behind file to handle location updates so that it will automatically update the native Map control whenever new location coordinates are obtained.

In this chapter, you'll learn how to customize DataTemplates to lay out your Views beautifully and neatly in your application's user interface by modifying your ContentPages (Views). You will also learn how to create and implement various styles in your XAML pages, prior to getting accustomed to working with the PlatformEffects API to customize the appearance, as well as styling native control elements for each platform.

Finally, you'll learn how to set up your margins and padding for each platform using the OnPlatform XAML tag, before moving on to learning how to manipulate the visual appearance of data-bound fields using ValueConverters and ImageConverters.

This chapter will cover the following points:

• Customizing the DataTemplate in the WalksMainPage to lay out content neatly
• Customizing Padding and Margins in your XAML pages
• Creating and implementing various Xamarin.Forms Styles in your XAML Pages
• Implementing RoutingEffects to access platform-specific PlatformEffects using C#
• Implementing PlatformEffects to customize the appearance of control elements using C#
• Implementing ValueConverters and ImageConverters in your app using C#
• Updating the BaseViewModel class to include additional properties using C#

Customizing the DataTemplate in the WalksMainPage

One of the features that comes as part of the Xamarin.Forms platform is the ability to manipulate the user interface by leveraging the various platform-specific APIs that are available, whether it be manipulating the appearance of controls and their elements using custom renderers or changing the appearance and styling of native control elements.

In this section, we will begin by updating the DataTemplate in our WalksMainPage, using XAML to apply additional features to change the appearance of control elements, such as updating font sizes based on the platform that our app is running on and using the OnPlatform argument.

Let's start by updating the user interface for our WalksMainPage by performing the following steps:

1. Locate and open the WalksMainPage.xaml file, which is located in the Views folder, ensure that it is displayed in the code editor, and enter the following highlighted code sections:

 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
 x:Class="TrackMyWalks.Views.WalksMainPage">
 <ContentPage.ToolbarItems>
 <ToolbarItem Text="Add" Clicked="AddWalk_Clicked" />
 </ContentPage.ToolbarItems>
 <StackLayout>
 <ListView x:Name="WalkEntriesListView" HasUnevenRows="true" 
 SeparatorColor="#ddd" ItemTapped="myWalkEntries_ItemTapped">
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>
 <ViewCell.ContextActions>
 <MenuItem Clicked="OnEditItem" 
 CommandParameter="{Binding .}" Text="Edit" 
 IsDestructive="False" />
 <MenuItem Clicked="OnDeleteItem" 
 CommandParameter="{Binding .}" Text="Delete" 
 IsDestructive="True" />
 </ViewCell.ContextActions>
 <StackLayout x:Name="cellLayout" Padding="2,2" 
 Orientation="Horizontal" HorizontalOptions="FillAndExpand">
  <Image Aspect="AspectFill" Source="{Binding ImageUrl}" 
 WidthRequest="140" HeightRequest="140" 
 VerticalOptions="FillAndExpand" 
 HorizontalOptions="FillAndExpand" />
 <StackLayout x:Name="DetailsLayout" Padding="5,0" 
 HorizontalOptions="FillAndExpand">
 <Label Text="{Binding Title}" 
 FontAttributes="Bold" 
 TextColor="Black">
 <Label.FontSize>
 <OnPlatform x:TypeArguments="x:Double">
 <On Platform="Android, WinPhone" Value="14" />
 <On Platform="iOS" Value="16" />
 </OnPlatform>
 </Label.FontSize>
 </Label>
 <Label Text="{Binding Distance, 
 StringFormat='Kilometers: {0} km'}" 
 FontAttributes="Bold" FontSize="12" 
 TextColor="#666" />
 <Label Text="{Binding Difficulty, 
 StringFormat='Difficulty: {0}'}" 
 FontAttributes="Bold" FontSize="12" 
 TextColor="Black" />
 <StackLayout Spacing="3" Orientation="Vertical">
 <Label Text="{Binding Description}" 
 FontAttributes="None" FontSize="12" 
 TextColor="Blue" 
 VerticalOptions="FillAndExpand" />
 </StackLayout>
 </StackLayout>
 </StackLayout>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackLayout>
 </ContentPage>

Let's now take a look at what we defined in the preceding XAML:

1. We started by making some minor changes to our DataTemplate by defining a Label.FontSize attribute, which will set the FontSize based on the platform that our app is running on using the OnPlatform and specifying the x:TypeArguments of Double
2. We used the On Platform attribute, passed in each platform that we want to check for, and assigned the font size value for each platform prior to defining the Spacing and Orientation values for our StackLayout to display the Description that is associated with each trail

Applying padding and margins to XAML layouts

In this section, we will take a look at how to apply and set Padding and Margins in each of your XAML Pages. The advantage of applying padding and setting margins in your XAML pages is that it allows you to customize the presentation of your control elements, so that those elements will display nicely in your user interface, based on the platform that your app is being run on.

Updating the WalksMainPage user interface using XAML

In this section, we will take a look at how to update the user interface for our WalksMainPage to apply padding and set margins in your XAML, so that our control elements will display neatly in our user interface, based on the platform that is being run and using the OnPlatform tag.

Let's start by updating the user interface for our WalksMainPage by performing the following steps:

1. Locate and open the WalksMainPage.xaml file, which is located in the Views folder, ensure that it is displayed in the code editor, and enter the following highlighted code sections:

 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
 x:Class="TrackMyWalks.Views.WalksMainPage">
 <ContentPage.ToolbarItems>
 <ToolbarItem Text="Add" Clicked="AddWalk_Clicked" />
 </ContentPage.ToolbarItems>
 <StackLay...