Binding Bindable Property Command Not working In Xamarin forms

Question

I have a custom view with bindable properties.

i am trying to bind the command in my Main Page View Model.

here is the way i have done but the binding is not working.

<ContentView.Content>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Label
                Grid.Column="0"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="StartAndExpand"
                FontFamily="{StaticResource Filled}"
                TextColor="{StaticResource PrimaryLight}"
                FontSize="25"
                Text="{Binding Source={x:Reference TitleView}, Path=LeftIcon}">

                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </Label.GestureRecognizers>

            </Label>

            <Label
                Grid.Column="0"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="CenterAndExpand"
                FontAttributes="Bold"
                HorizontalTextAlignment="Center"
                FontSize="{StaticResource FontSize16}"
                TextColor="{StaticResource PrimaryLight}"
                Text="{Binding Source={x:Reference TitleView}, Path=Title}"/>

            <Label
                Grid.Column="0"
                Margin="0,0,16,0"
                HorizontalOptions="End"
                VerticalOptions="CenterAndExpand"
                FontFamily="{StaticResource FontIconsFamily}"
                TextColor="{StaticResource PrimaryLight}"
                FontSize="25"
                Text="{Binding Source={x:Reference TitleView}, Path=RightIcon}">

                <Label.Triggers>
                    <DataTrigger
                        TargetType="Label" 
                          Binding="{Binding Source={x:Reference TitleView}, Path=IsFilledFontFamily}" Value="true">
                        <Setter Property="FontFamily" Value="{StaticResource Filled}" />
                    </DataTrigger>
                </Label.Triggers>

                <Label.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding FilterCommand}"/>
                </Label.GestureRecognizers>

            </Label>
        </Grid>

  </ContentView.Content>

My .cs file is like below

public partial class NavigationBarTitleView : ContentView
    {
        public static readonly BindableProperty LeftIconProperty = BindableProperty.Create(
            nameof(LeftIcon),
            typeof(string),
            typeof(NavigationBarTitleView),
            string.Empty);

        public static readonly BindableProperty RightIconProperty = BindableProperty.Create(
            nameof(RightIcon),
            typeof(string),
            typeof(NavigationBarTitleView),
            string.Empty);

        public static readonly BindableProperty TitleProperty = BindableProperty.Create(
            nameof(Title),
            typeof(string),
            typeof(NavigationBarTitleView),
            string.Empty);

        public static readonly BindableProperty IsFilledFontFamilySelectorProperty = BindableProperty.Create(
            nameof(IsFilledFontFamily),
            typeof(bool),
            typeof(NavigationBarTitleView),
            false);

        public static readonly BindableProperty LeftIconCommandProperty = BindableProperty.Create(
            nameof(LeftIconCommand),
            typeof(ICommand),
            typeof(NavigationBarTitleView), default(ICommand));

        //private static void OnTapCommandPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        //{
        //    if (bindable is NavigationBarTitleView headerTemplate && newValue is ICommand command)
        //    {
        //        headerTemplate.LeftIconCommand = command;
        //    }
        //}

        public NavigationBarTitleView()
        {
            InitializeComponent();
        }

        public string LeftIcon
        {
            get => (string)GetValue(LeftIconProperty);
            set => SetValue(LeftIconProperty, value);
        }

        public string RightIcon
        {
            get => (string)GetValue(RightIconProperty);
            set => SetValue(RightIconProperty, value);
        }

        public string Title
        {
            get => (string)GetValue(TitleProperty);
            set => SetValue(TitleProperty, value);
        }

        public bool IsFilledFontFamily
        {
            get => (bool)GetValue(IsFilledFontFamilySelectorProperty);
            set => SetValue(IsFilledFontFamilySelectorProperty, value);
        }

        public ICommand LeftIconCommand
        {
            get => (ICommand)GetValue(LeftIconCommandProperty);
            set => SetValue(LeftIconCommandProperty, value);
        }

        private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
        {
            LeftIconCommand?.Execute(null);
        }

I need to bind this in my Main Page as Follows.

<NavigationPage.TitleView>
        <CommonViews:NavigationBarTitleView
            LeftIcon="search"
            Title="My Shipments"
            RightIcon="{StaticResource Filter}"
            LeftIconCommand="{Binding BackNavigationCommand}"/>
    </NavigationPage.TitleView>

My View model i just add a command like

public class ShipmentTabbedPageViewModel
    {
        private Command backNavigationCommand;

        public ICommand BackNavigationCommand => backNavigationCommand
                                       ?? (backNavigationCommand = new Command(() =>
                                       {
                                           Application.Current.MainPage = new NavigationPage(new ShipmentPage());
                                       }));
    }

but my command binding is not working other bindings are ok.

is there anything i am doing wrong??

I tested your code and it works fine on my side . Did the tap event been invoked when you click the label ? — Lucas Zhang, May 08 '20 at 13:22
Looks like a binding issue. Check that you ShipmentTabbedPageViewModel is actually binding to your page. It is named TabbedPageViewModel. Could it be that you use a different binding context for your MainPage other than the one used for your TabbedPage? — xerx, May 08 '20 at 13:29
@ xerx yes there is a binding issue i cannot find where it is — Chandu Ranwala, May 08 '20 at 15:12
Could you share your sample so that I can test it on my side ？ — Lucas Zhang, May 12 '20 at 07:38

score 0 · Accepted Answer · answered May 08 '20 at 19:16

0

Try in your MainPage.xaml.cs file:

public MainPage()
{
    InitializeComponent();
    BindingContext = new ShipmentTabbedPageViewModel();
}

answered May 08 '20 at 19:16

Yevheniy Tymchishin

708
8
19

Binding Bindable Property Command Not working In Xamarin forms

1 Answers1