Control template Binding Not working in MVVM Cross Xamarin Forms

Question

I am currently working on a Xamarin Forms project which is using MVVMCross. In App.xaml i created a control template as follows

   <ControlTemplate x:Key="ContentPageTemplate">
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0" RowDefinitions="Auto,Auto,*">

                <!--StackLayout as Header-->
                <StackLayout Grid.Row="0" HeightRequest="6" BackgroundColor="{StaticResource SecondaryBrandColor}"></StackLayout>
               <Frame Padding="0" Grid.Row="1" >
                <Label Grid.Row="1" Text="Server Not Available" BindingContext="{TemplateBinding BindingContext}"
                       Style="{StaticResource ServerAvailableLabel}"
                       IsVisible="{TemplateBinding Parent.BindingContext.IsServerAvailableLabelVisible}"/>
                </Frame>
                <!--Content Page Body-->
                <ContentPresenter Grid.Row="2" BackgroundColor="{StaticResource PrimaryBodyColor}">

                </ContentPresenter>
            </Grid>

        </ControlTemplate>

Now i am using this control template in contentPage as follows

<views:MvxContentPage  xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
                       xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="Project.UI.Views.ReqView"
                       ControlTemplate="{StaticResource ContentPageTemplate}"
                       Title="Reqs">
</views:MvxContentPage>

In the view model i am trying to make the label visible and invisible as follows

    public bool _isServerAvailableLabelVisible = false;
        public bool IsServerAvailableLabelVisible
        {
            get
            {
                return _isServerAvailableLabelVisible;
            }
            set
            {
                SetProperty(ref _isServerAvailableLabelVisible, value);
            }
        }

The problem i am facing now is, by default the label is being visible and also it is not updating even when i am setting the value as false.

What am i missing ?

Answer 1

I had exactly the same issue ! After one day I found the following solution which works for me.

I added BindingContext="{TemplateBinding BindingContext.DataContext}"into the Grid and change the IsVisible property by IsVisible="{Binding IsServerAvailableLabelVisible}"

Here the recap that you can try, hope it will work for you too ! For information I use Xamarin.Forms 4.8.0 & MvvmCross 6.3.1

  <ControlTemplate x:Key="ContentPageTemplate">
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0" RowDefinitions="Auto,Auto,*"
              BindingContext="{TemplateBinding BindingContext.DataContext}">

            <!--StackLayout as Header-->
            <StackLayout Grid.Row="0" HeightRequest="6" BackgroundColor="{StaticResource SecondaryBrandColor}"></StackLayout>
           <Frame Padding="0" Grid.Row="1" >
            <Label Grid.Row="1" Text="Server Not Available"
                   Style="{StaticResource ServerAvailableLabel}"
                   IsVisible="{Binding IsServerAvailableLabelVisible}"/>
            </Frame>
            <!--Content Page Body-->
            <ContentPresenter Grid.Row="2" BackgroundColor="{StaticResource PrimaryBodyColor}">

            </ContentPresenter>
        </Grid>

    </ControlTemplate>

Answer 2

Are you sure that the OnPropertyChanged Event gets fired when you chcange the value?

If yes then you need to check the binding context of the view

If no you need to fire it manually (as mentioned in the MVVMCross documentation)

private string _myProperty;
public string MyProperty
{
    get => _myProperty;
    set
    {
        _myProperty = value;
        RaisePropertyChanged(() => MyProperty);
        // take any additional actions here which are required when MyProperty is updated
    }
}