A lot of apps need more customized UI than what is available with the current set of controls. Today we’ll add a customized Check Box control since iOS does not have a Check Box. Some suggest that you use the Switch control as a replacement for the Check Box, but when developing custom apps and the client or boss want a check box, then I tend to implement a check box while others say it cannot be done. I’ll show the basics of creating a custom control for iOS of a check box.
Right click on your Xamarin iOS project and select Add Item.
In the Add New Item Window, Select “UIView” and give it a name for your custom control. After giving your control a name, click the Add button so Visual Studio add the file(s) to your project.
We need to modify the register attribute on the class to add DesignTimeVisible(true)
Now we will add any properties that we’ll need for customizing our new control and we’ll use the Visual Studio code snippet “propfull”. In the class, type propfull and hit the tab key twice.
Visual Studio will add some code to your class with default type of int and named “MyProperty” with the property type, name, name of the class and default value highlighted
You can change the different highlighted options and press the tab key to go from one highlighted option to another. In my case, I wanted a Boolean property named “IsChecked” with a default false as the default value.
We need to add an attribute Export with the property name and the property will be browsable.
Now we can start drawing portion of the custom control. Type override and select the Draw method with the CGRect argument since we’ll need to override the Draw method for the drawing.
Next in the Draw, we can draw the box for our check box control.
You can do whatever you need to do in the Draw method to create your custom control.
A lot of apps need more customized UI that what is available with the current set of controls. Today we’ll add a customized Check Box control since the Android Check Box has some limitation.
Right click on your Xamarin Android project and select Add Item.
In the Add New Item Window, select “View” and give it a name for your custom control. After giving your control a name, click the Add button so Visual Studio add the file(s) to your project.
Add a line to register the new control with an attribute on the class that registers the namespace plus name of the control.
[Register(“ComponentTrak.UI.Droid.TrakCheckBox”)]
public class TrakCheckBox : View
{
Now we will add any properties that we’ll need for customizing our new control and we’ll use the Visual Studio code snippet “propfull”. In the class, type propfull and hit the tab key twice.
Visual Studio will add some code to your class with default type of int and named “MyProperty” with the property type, name, name of the class and default value highlighted
You can change the different highlighted options and press the tab key to go from one highlighted option to another. In my case, I wanted a Boolean property named “IsChecked” with a default false as the default value.
For Xamarin Android controls, if the property will be changing something on the screen then you will need to tell the View to refresh by calling Invalidate(); method on the set of the new property.
If you do not have an attrs.xml file in the Resources/Values folder then you will need to add a new XML file by right clicking on the Values folder and selecting Add New Item. In the Add New Item window, select Data on the left and XML File in the middle. Give the new XML File a name of “attrs.xml” and click the Add button.
In the new XML file, we need to define the properties that we’ll be using to customize the new control. First we’ll need to add a tag of “resources” and inside the resources tag, we’ll need to add a tag of “declare-styleable”. The declare-styleable tag will need an attribute of name that is the name of the new control.
Inside the declare-styleable, we will add a line for each of our custom properties. So we’ll add a attr tag with attributes of name and format. The name attribute is the name of the property and format will be the type of property.
In the constructor of the new control/view, we will need to get the values. I perform this in the Initialize method and pass the context and attrs into the Initialize method. Using the context and attrs variables that are passed into the constructor, we obtain an array of the property values. Use the context, obtain a styled attribute and the method will return a TypedArray.
Next we’ll get the value if defined in the layout and we’ll give the method a default value so if the control property is not given a value in the layout. Using the typedArray instance that we call a Get method based on the type. In my example, I’ll call GetBoolean to get the boolean value for the IsChecked property.
After getting the values, we need to call recycle.
Now we can start drawing portion of the custom control. Type override and select the OnDraw method with the Canvas argument since we’ll need to override the OnDraw method for the drawing.
Next in the OnDraw, we can draw the box for our check box control.
You can do whatever you need to do in the Draw method to create your custom control.
Have fun!
Follow me online to learn about creating custom native controls in Xamarin and iOS plus Xamarin Forms custom view that uses these custom native controls.
Most applications use more than the standard controls. Many businesses have business practices that makes them unique, so they want these practices implemented in the software, but standard controls are typically too limited or have issues. A good example would be the UWP CheckBox. If you do some research, you will find developers having issues customizing the standard UWP CheckBox so you might want your own check box.
To create a custom native UWP control is actually a very simple process.
Right click on the UWP project, and select Add Item
In the Add New Item Window, Select “Templated Control” and give it a name for your custom control. After giving your control a name, click the Add button so Visual Studio add the file(s) to your project.
Visual Studio will create a new cs file in the root of your project using the name you gave it in the Add New Item Window. In my example, it added “CustomCheckBox.cs”. The class will be a simple class initially with it setting the DefaultStyleKey in the constructor.
Under a folder “Themes”, you will see a file “Generic.xaml” which holds the basic style and control template.
If you want to have custom properties to use in XAML for your app, then you need to implement the properties as Bindable Properties. Visual Studio has a code snippet for adding Bindable Properties. In your cs file (my file is CustomCheckBox.cs), type “propdp” and hit the tab key twice. Visual Studio will add some code to your class with default type of int and named “MyProperty” with the property type, name, name of the class and default value highlighted.
You can change the different highlighted options and press the tab key to go from one highlighted option to another. In my case, I wanted a string property named “Text” with a default empty string as the default value.
In the “Generic.xaml” file, now we need to add a text block to print the label for my custom check box. I will add it inside the border.
To get the TextBlock to show the value in our new bindable property, we will give it a “TemplateBinding” and as you are typing in the name, intelliSense will give you a list of bindable properties in your new control. As you can see below, my new “Text” property is on the list.
At this point, our new custom control has a text block with a binding to the Text property in it that will show on the screen whatever string that we put into the XAML when using the control in our project.
To use your custom control in the XAML of your page/control, you will need to declare a namespace to it. If you app was “CustomUWPControl”, then you would add a xmlns of
xmlns:ctrl=”using:CustomUWPControl”
After declaring the namespace, you can use the control in your XAML just like any other control. For my control, I would add
<ctrl:CustomCheckBox Text=”Jeff Wyzard”/>
If you run your app with the new control, you will see the text block with your Text string displayed on the screen.
The ControlTemplate in the “Generic.xaml” can have most any XAML controls or layout that you would want as if you were drawing it out in the xaml of your app. So, you could be a Grid with multiple rows, you can use an Ellipse or other shape methods, etc. in your ControlTemplate to produce a reusable custom control for UWP.
Follow me online to learn about creating custom native controls in Xamarin Android and iOS plus Xamarin Forms custom view that uses these custom native controls.
In December of 2016, I decided that I wanted the Xamarin certification since more of my development projects were on iOS, Android and UWP mobile devices. I am now a Xamarin Certified Mobile Developer as of January 1, 2017.
I wanted to share my experience with Xamarin University and certification testing. I am also Microsoft C# Certified Professional, so that saved time in learning portions of C# that some coming from web technologies would need to learn. Since I’ve been developing with WPF when it was an add-on to Visual Studio 2005, working with XAML, XAML styles, triggers, templates, etc. made the move to Xamarin Forms easier.
If you are a developer who has been wondering about the Xamarin University classes and if they are worth it, the answer is emphatically, YES! Xamarin development tools have never been documented very well, in my opinion (I hear the same comment from other developers), so finding out how to do different routines was a matter of finding the right blog or forum.
Xamarin University has classes on more than the Xamarin tools, which is great. Some of the classes cover using 3rd party tools with Xamarin like SQLite, Azure, C# and classes are mostly 2 to 3 hours each. There are different instructors offering most of the classes at different times of the day/month so a class at one time is bad for you, they probably offer it again at a different time, so no matter where you live or your work schedule, a class should be available. The classes were structured very well with slides, exercises and the instructors, at times, even had flash quiz or two. Most all the instructors were nice, tried to involve the students and were great about answering questions plus at the end of the classes, they would hang around to make sure they answered any questions about the class. If you had questions related to the topic that they could not answer about the class, they followed up very quickly.
The certification exam is much better coverage of the programming matter than other exams that I have taken over the years. Other exams tend to focus on new features or items that the company believes are import even if you do not use those features in your career. I do think the Xamarin certification exam could be improved by removing the opinion based questions where there are multiple methods to accomplish the same goal instead of asking which is better based on one person’s opinion. In the real world, “which is better” will depend on other factors which the test is not able to take into consideration. The Xamarin Certification Exam Study Guide is extremely helpful. Be sure to review it since some material covered on the exam is not covered very well in the certification classes.
Overall the classes and exam were a great and fun experience, highly recommended and I give it two thumbs up!
