How to bind XAML contentView to its code behind

Question

I have Some UI logic and I need to Add them in Code behind. In order to overcome the code duplication, I need to use a property and change it. Normal MVVM thing. But when I try to do it with Codebehind. Mean I bind XAML with my code behind in order to access the isvisible function in several places. Problem is it does not binding or any other problem visibility did not change when action is fired.

My ContentView Xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:customRenderes="clr-namespace:DipsDemoXaml.CustomRenderes;assembly=DipsDemoXaml"
         x:Class="DipsDemoXaml.Views.Page1"
         x:Name="navi">

<StackLayout   BindingContext="{x:Reference Name=navi}">
        <customRenderes:NavigationImageButton Source="MenuSettings"                                                
                                                      x:Name="Button1"                                                        
                                                    Margin="0"                                                       
                                                    IsVisible="{Binding Visibility}"                                                                                                                                                                                                                                                                                                                             
                />

In code behind

public partial class Page1 : ContentView
{
    private bool _expand;

    private bool _visibility;

    public bool Visibility
    {
        get => _visibility;
        set
        {
            _visibility = value;
            OnPropertyChanged();
        }
    }

    public Page1 ()
    {
        InitializeComponent ();        
    }

    private  void  Button1_OnItemTapped(object sender, EventArgs e)
    {
        if (_expand)
        {
            this.Hide();
        }
        else
        {
            this.Expand();
        }
    }

    private async void Expand()
    {
        _expand = true;
        Button5.Opacity = 1;          
        _visibility = true;
        await Button5.RotateTo(180, 200);
    }

    private async void Hide()
    {
        _expand = false;
        Button5.Opacity = 0.4;
        _visibility = false;
        await Button5.RotateTo(360, 200);
    }
}

How to bind this in xamarin forms. Is my binding is wrong or where is the problem

my onpropertychanged method

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        var changed = PropertyChanged;

        changed?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

Answer 1

First of all, PropetyChanged takes an argument,

 OnPropertyChanged("Visibility");

I guess this should work but it is odd to put your ViewModel code in the code behind.

The idea of MVVM is to move the logic from to page, to the ViewModel, allowing you to manage the state of several pages within the same ViewModel with almost, if not, 0 code in the page behind the XAML.

So you probably should create another file that you will call ViewModel, and put you're business logic in it.

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:customRenderes="clr- 
     namespace:DipsDemoXaml.CustomRenderes;assembly=DipsDemoXaml"
     x:Class="DipsDemoXaml.Views.Page1"
     xmlns:vm="clr-namespace:DipsDemoXaml.ViewModels;assembly=DipsDemoXaml"
     x:Class="DipsDemoXaml.Views.Page1"
     x:Name="navi">

<ContentView.BindingContext>
  <vm:MyViewModel/>
</ContentView.BindingContext>
<StackLayout>
<customRenderes:NavigationImageButton Source="MenuSettings"                                                
                                      x:Name="Button1"                                                        
                                      Margin="0"                                                       
                                      IsVisible="{Binding Visibility}"/>                                                                                                                                                                                                                                                                                                                     

And in MyViewModel.cs:

private bool _visibility;

public bool Visibility
{
    get => _visibility;
    set
    {
        _visibility = value;
        OnPropertyChanged("Visibility");
    }
}

So you can deal with any binding you want and use them easily in different pages.

I hope this helps.

Answer 2

Call Visibility, not _visibility , or manually trigger OnPropertyChanged. But the 1st option is preferred. BTW, I don't know what is your OnPropertyChanged implementation, but typically it is called with your property name, as @Maniax mentioned, or using nameof operator, e.g. OnPropertyChanged(nameof(Visibility))