Xamarin Custom View Button Binding

Question

I have a custom view with 2 button in it - One on the left and one on the right.

I want to have a bindable property to dictate which function will be called by each button, but the function I want to call is in the original content page, not the custom control.

I'm aware that you can't have a void as the bindable property so I'm not sure how to achieve this.

Here's my custom control xaml:

And here's the backend code:

using System;
using System.Collections.Generic;
using System.Windows.Input;
using Xamarin.Forms;

namespace EngineerApp
{
    public partial class HeaderBar : RelativeLayout
    {

        public HeaderBar()
        {

            InitializeComponent();
        }

    }
}

And finally I'm including the custom new as normal with

How could I bind each of the 2 buttons click events to a method in my Content Page?

Sharada · Accepted Answer

Solution-1

You can expose a couple of events in your custom control.

Steps:

Create 2 events in your custom HeaderBar control.

public event EventHandler RightButtonClickEvent;
public event EventHandler LeftButtonClickEvent;

Assign Clicked event-handlers in XAML, and invoke these events in them

void RightButton_Clicked(object sender, EventArgs e)
{
    RightButtonClickEvent?.Invoke(sender, e);
}

void LeftButton_Clicked(object sender, EventArgs e)
{
    LeftButtonClickEvent?.Invoke(sender, e);
}

Bind custom events with event handlers in your ContentPage

Sample code - HeaderBar.xaml.cs

public partial class HeaderBar : RelativeLayout
{
    public HeaderBar()
    {
        InitializeComponent();
    }

    public event EventHandler RightButtonClickEvent;
    public event EventHandler LeftButtonClickEvent;

    void RightButton_Clicked(object sender, EventArgs e)
    {
        RightButtonClickEvent?.Invoke(sender, e);
    }

    void LeftButton_Clicked(object sender, EventArgs e)
    {
        LeftButtonClickEvent?.Invoke(sender, e);
    }
}

Updated sample code - HeaderBar.xaml

Sample code - MyContentPage.xaml

Sample code - MyContentPage.xaml.cs

public partial class MyContentPage : ContentPage
{
    public MyContentPage()
    {
        InitializeComponent();
    }

    void OnRightButtonClick(object sender, EventArgs e)
    {
        //handle right-button click here
    }

    void OnLeftButtonClick(object sender, EventArgs e)
    {
        //handle left-button click here
    }
}

Solution-2 (recommended if you are using MVVM)

Expose two commands as bindable properties (which in turn will be bound to inner button controls). You can then bind these new commands to properties in your ContentPage's ViewModel

Sample code - Header.xaml.cs

public partial class HeaderBar : RelativeLayout
{
    public HeaderBar()
    {
        InitializeComponent();

        //create binding between parent control and child controls
        btnLeft.SetBinding(Button.CommandProperty, new Binding(nameof(LeftButtonCommand), source: this));
        btnRight.SetBinding(Button.CommandProperty, new Binding(nameof(RightButtonCommand), source: this));
    }

    public static readonly BindableProperty LeftButtonCommandProperty =
        BindableProperty.Create(
        "ILeftButtonCommand", typeof(ICommand), typeof(HeaderBar),
            defaultValue: null);

    public ICommand LeftButtonCommand
    {
        get { return (ICommand)GetValue(LeftButtonCommandProperty); }
        set { SetValue(LeftButtonCommandProperty, value); }
    }

    public static readonly BindableProperty RightButtonCommandProperty =
        BindableProperty.Create(
        "RightButtonCommand", typeof(ICommand), typeof(HeaderBar),
            defaultValue: null);

    public ICommand RightButtonCommand
    {
        get { return (ICommand)GetValue(RightButtonCommandProperty); }
        set { SetValue(RightButtonCommandProperty, value); }
    }
}

Sample code - MyContentPage.xaml

Sample code - MyContentPageViewModel.cs

public class MyContentPageViewModel : ViewModelBase //base implementation for INotifyPropertyChanged
{
    private ICommand _leftClickCommand; 
    public ICommand LeftClickCommand
    {
        get
        {
            return _leftClickCommand ??
                (_leftClickCommand = new Command((obj) =>
                {
                    //handle left button click here.
                }));
        }
    }

    private ICommand _rightClickCommand;
    public ICommand RightClickCommand
    {
        get
        {
            return _rightClickCommand ??
                (_rightClickCommand = new Command((obj) =>
                {
                    //handle right button click here.
                }));
        }   
    }
}

Xamarin Custom View Button Binding

Answers (2)

Solution-1

Solution-2 (recommended if you are using MVVM)

Related Questions