Skip to main content

Xamarin Forms: XAML Creating Custom Controls The MVVM Way

Intro

For a growing UI page there always comes a need to create sub views that can be used inside a bigger view, and for that we need custom controls, which are controls that are derived either from a layout or a simple view which is the basic control for almost any UI component in Xamarin forms, and therefore for a start i will use that as an example.
And in such example we will create a custom control with a set of bindable properties and explain how they work, also how to add an event that can also be bound to Commands

Lets Create the control 

I have just went ahead and created a custom control that inherits from Xamarin.Forms.View and have some properties such color and checked all properties to be bound to by the ViewModel serving as the datacontext of the this control. here is the code below


using System;
using Xamarin.Forms;

namespace UserControls
{
    public class CustomView : View
    {
        public Color Color
        {
            get ;
            set ;
        }

        public bool Checked
        {
            get ;
            set ;
        }
    }
}


And For the Above code we see we have a few properties that can be set from the xaml code like for instance as below



<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:Avira.Afm.Forms.Controls;assembly=Avira.Afm.Forms"
    xmlns:contentViews="clr-namespace:Avira.Afm.Forms.Views;assembly=Avira.Afm.Forms"
    x:Class="Avira.Afm.Forms.Views.MainPage"> 
    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0" ColumnSpacing="0">
<controls:CustomView Checked="{Binding Checked}" Color="{Binding Color}"/>
</Grid>
</ContentPage>


While this could be valid from the first glance but if you know xaml you know that this will never work as there is no way the UI will know how to map the values to these properties, and that is why we have the Dependency properties,

Dependency Property:

Is a property that acts as an observer for other properties that are mapped to the UI notifying from and to UI the changes that happen to this property to the type that defined that property, and how it is implemented ? 
it is like as follow for instance the two properties we have 



using System;
using Xamarin.Forms;

namespace UserControls
{
    public class CustomView : View
    {
        public static readonly BindableProperty ColorProperty = BindableProperty.Create(propertyName: nameof(this.Color), returnType: typeof(Color), declaringType: typeof(CircleButtonView), defaultValue: Color.White);

        public static readonly BindableProperty CheckedProperty = BindableProperty.Create(propertyName: nameof(IsMouseOver), returnType: typeof(bool), declaringType: typeof(CircleButtonView), defaultValue: false);

        public Color Color
        {
            get { return (Color)GetValue(ColorProperty); }
            set { SetValue(ColorProperty, value); }
        }

        public bool Checked
        {
            get { return (bool)GetValue(CheckedProperty); }
            set { SetValue(CheckedProperty, value); }
        }
    }
}


Dependency properties must be static and read-only because they can only be set once
The setters and getters of the Mapped properties should be updated to update the corresponding dependency properties, also casting needs to be done because dependency properties are always dealing with objects.
After this update we can have the XAML code working

now for how to use events ?

Custom Events 

In Order to have an active even first we need to define the eventhandler  and the handler that will invoke it. and it should be as follows and then we can user the the even to behavior command to do bind the event to the commands in Xaml



 public event EventHandler Clicked;    
 protected virtual void OnClicked(EventArgs e)
 {
    Clicked?.Invoke(this, e);
 }

That's it for this one :)



Comments

Popular posts from this blog

Xamarin Forms Core components Part 1 Dependency Service

Intro Xamarin Forms is a collection of controls that can be used and rendered on multiple platforms, and in order of them to function as they are suppose to, they do need a set of core components that defines the way these controls, in how they are created, how they are rendered to how they are used, of course every platform is different and sometimes a platform specific extra configuration is required, specially that there are so many differences between the different platforms in matter of design, user experience and operating system behavior. So one of the core components of  Xamarin  Forms is the Dependency Service, and by the name suggest it does act as the dependency resolver for all forms controls, if you are not familiar with IOC " I nversion O f C ontrol" and Dependency Injection please refer to the link for a quick intro i wrote a while ago on IOC  IOC Part 1 - Inversion of control Principle .  And as of such the Dependency Service is the concrete inboxe

Windows Phone 8 - Application bar command binding MVVM

This is a short post in which i will explain how on Windows phone 8 to bind the application bar button or menu item, first this is only a fix for the  BindableApplicationbar  which supports windows phone 7 only, i just made it support windows 8 no features added or anything. i have uploaded the dll file here so it can be accessible easily here is the link to download http://sdrv.ms/RApUal now that you got the link lets check how we gonna use it you can refer to BinableApplicationbar  or check out the code here that i actually used in my app and i already read it there !  Add a reference to the BindableApplicationBar library here is the link again  http://sdrv.ms/RApUal Add XML namespace declaration in your page's XAML: xmlns : bar ="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar" Set Bindable.ApplicationBar property on your page code as in the snippet below: < phone : PhoneApplicationPage >     …     < bar : Bindable.App