Creating Custom Controls in Xamarin.Forms

Learn how to extend and enhance Xamarin.Forms applications with custom controls, XAML extensions, and use of platform-specific capabilities.
Course info
Rating
(43)
Level
Intermediate
Updated
Dec 2, 2015
Duration
45m
Table of contents
Description
Course info
Rating
(43)
Level
Intermediate
Updated
Dec 2, 2015
Duration
45m
Description

In this course, you will learn how to extend and enhance Xamarin.Forms applications with custom controls. We'll also explore XAML extensions to enhance what can be done in markup. Finally, we'll utilize platform-specific capabilities, such as iOS's support for Social Media.

About the author
About the author

Jesse Liberty is a Senior Consultant at Wintellect, where he specializes in Xamarin, Azure and Web development. He is a Certified Xamarin Developer, a Xamarin MVP and a Microsoft MVP.

More from the author
Visual Studio for Mac
Beginner
1h 19m
Apr 16, 2018
More courses by Jesse Liberty
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hi, this is Jesse Liberty for Pluralsight, and this course is Creating Custom Controls in Xamarin. Forms, this module is the Introduction. Let's start by discussing whether this is the right course for you. We assume some comfort with C#, and that you know XAML, and that you're comfortable with Xamarin. Forms. As you know, Xamarin. Forms are a powerful framework, however they do have their limitations, especially the views, which can be limited in their appearance and their capabilities. To overcome that, you can create customized controls using custom rendering. You can also extend XAML, as we will explore in this course, and we will take a look at how you can reach down into the platform and utilize platform-specific capabilities, such as the iOS support for Twitter. To get the most out of this course, you will need either Xamarin Studio, on a PC or a Mac, or Visual Studio with the Xamarin plug-in.

Creating Basic Custom Controls
Hi, this is Jesse Liberty for Pluralsight, and this module is Creating Basic Custom Controls. In this module we're going to take a look at customizing the button, so that it looks more like a standard button, as you see in this illustration. Whenever you are customizing a control there are two parts to it, the element and the platform-specific renderer. An element can be any view, such as a button, and that button is going to be rendered on each platform differently. This is how Xamarin. Forms accomplishes having one UI for multiple platforms, if we want to create a custom button, however, we're going to need to take care of that rendering on each platform ourselves. To do so we simply create a new class, derive that class from an existing class, and then create a custom renderer on each platform. The key method we want to keep an eye on is, OnElementChanged as you'll see in the upcoming demonstration. Creating the SharedButton class is as simple as declaring it to derive from Button. The shared ButtonRenderer is, of course, a little bit more complex, it derives from ButtonRenderer, and as we mentioned, it overrides OnElementChanged, and what it's doing there is whatever work has to be done on rendering the difference in the ShadedButtonRenderer, in this case setting the BackgroundColor to Gray because we're starting with a very simple example. Let's take a look at a demonstration of how all this gets put together.

Implementing Advanced Rendering
Hi, this is Jesse Liberty for Pluralsight, and this module is Implementing Advanced Rendering. In this module, we are going to use a BoxView to stand in for our list of tasks. BoxViews don't have a border, but we're going to give it one. In addition, we're going to look at handling data binding, a powerful and important feature. In order to provide bindable properties, we're going to need to create a readonly property and the associated public property. Here is the readonly property, and you can see that it is called BorderColorProperty. The associated property to BorderColorProperty is going to be called BorderColor and is going to return and set values based on the underlying BorderColorProperty. We'll see this in practice in the demo.

Extending XAML with Markup Extensions
Hi, this is Jesse Liberty from Pluralsight, and this module is Extending XAML with Markup Extensions. XAML is an extremely powerful and flexible markup language, but it is finite, and so there are extensions to XAML, some of which we use all the time, such as StaticResource and Binding. While the implementation of those two are private, the extensions themselves are recognized by the XAML parser, but we can go further than that. When the markup does not provide the features that we need, we can create custom markup extensions. We might also do this as a convenience rather than writing a conversion method. To create a markup extension, all you need to do is implement the interface IMarkupExtension, you're going to pass in an IServiceProvider, and implement the method ProvideValue. Here's an example of a markup extension. Notice that ColorFromRGBExtension implements IMarkupExtension, has three properties, and the required ProvideValue, which returns the result of calling ColorFromRGB and passing in the three properties. Once the extension is created it's functionally part of XAML, and so here we're able to use it to set the background color on a label.

Accessing Platform Services
Hi, this is Jesse Liberty, from Pluralsight, and this module is Accessing Platform Services. Each platform has specific capabilities that are not necessarily available elsewhere. We start with an interface, and then use the dependency service to talk to the platform-specific service. For example, there is a Twitter service on iOS, and so we can create an interface, ITwitter, and talk to the iOS Twitter implementation.

Summary and Next Steps
Hi, this is Jesse Liberty for Pluralsight, and this final module is Summary and Next Steps. We looked at how customized controls can give you greater control over the appearance and behavior of the views that you're using in forms. We also noted that customizing a control requires an element and a customized renderer. You can and should make your controls bindable in the way that we noted earliest in this course, using paired properties. And we took a look at how XAML extensions can provide new functionality to XAML itself. Finally, we examined how using the DependencyService allows you to reach down into native capabilities as we did with the Twitter service. From here there are a number of resources available to you. There are, of course, additional Pluralsight courses. You can find extensive documentation at Xamarin. com, and this course itself has a conversation or discussion area, where you can ask questions and contribute to the ongoing discussion.