Bind a custom view to page model in xamarin forms

user2081328

I am trying to create a custom view that will be used as a header in some of the pages in the application. A custom view has a button to save info, and an image to show if the info was saved, but I can also receive info from the API if the info was saved. (this is a simplified version of the scenario)

So, I have MainPage.xaml (any page that will use the custom view)

ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:Messages"
         xmlns:controls="clr-namespace:Messages.Controls"
         x:Class="Messages.MainPage">
<StackLayout Spacing="5">

    <controls:HeaderMenu x:Name="menu" HorizontalOptions="FillAndExpand" VerticalOptions="Start" SaveCommand="{Binding MyCommand}" IsControlClosed="{Binding ControlClosedValue, Mode=TwoWay}" />

    .....

</StackLayout>

MainPageViewModel.cs

public class MainPageViewModel : INotifyPropertyChanged
{
    public ICommand MyCommand { get; set; }

    private bool _controlClosedvalue;

    public bool ControlClosedValue
    {
        get => _controlClosedvalue;
        set
        {
            _controlClosedvalue = value;
            OnPropertyChanged(nameof(ControlClosedValue));
        }
    }

    public MainPageViewModel()
    {
        MyCommand = new Command(MyCommandExecute);
        _controlClosedvalue = false;
    }

    private void MyCommandExecute()
    {
        // do stuff

        _controlClosedvalue = true; //change value to change the value of control
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

HeaderMenu.xaml

<Grid>   

<Image Source="save.png" HeightRequest="25" WidthRequest="25">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="SaveImage_OnTapped" />
                    </Image.GestureRecognizers>
                </Image>

 <Image  IsVisible="{Binding IsControlClosed}" Source="check.png" HeightRequest="30" WidthRequest="30" />

HeaderMenu.xaml.cs

public partial class HeaderMenu : ContentView
{
    public HeaderMenu ()
    {
        InitializeComponent();
        imgControlClosed.BindingContext = this;
    }

    public static readonly BindableProperty SaveCommandProperty =
        BindableProperty.Create(nameof(SaveCommand), typeof(ICommand), typeof(HeaderMenu));

    public static readonly BindableProperty IsControlClosedProperty =
        BindableProperty.Create(nameof(IsControlClosed), typeof(bool), typeof(HeaderMenu), false, BindingMode.TwoWay, null, ControlClosed_OnPropertyChanged);

    public ICommand SaveCommand
    {
        get => (ICommand) GetValue(SaveCommandProperty);
        set => SetValue(SaveCommandProperty, value);
    }

    public bool IsControlClosed
    {
        get => (bool) GetValue(IsControlClosedProperty);
        set => SetValue(IsControlClosedProperty, value);
    }

    private static void ControlClosed_OnPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is HeaderMenu control)
        {
            control.imgControlClosed.IsVisible = (bool)newValue;
        }
    }

    private void SaveImage_OnTapped(object sender, EventArgs e)
    {
        if (SaveCommand != null && SaveCommand.CanExecute(null))
        {
            SaveCommand.Execute(null);
        }
    }
}

So, what I need is that when the save command is tapped to execute some code in the page that is using control, and binding of SaveCommand works as expected. But after the code is executed, or in some different cases, I wish to change the property in the page model and this should change the property on the custom view, but this does not work.

Does anyone know what is wrong with this code?

If I just put True or False when consuming control it works.

<controls:HeaderMenu x:Name="menu" HorizontalOptions="FillAndExpand" VerticalOptions="Start" SaveCommand="{Binding MyCommand}" IsControlClosed="True" />

But it does not work when binding it to the property.

user2081328

I have found out what an issue was. A stupid mistake, I was setting the value of the variable instead of property.

In the main page view model, instead of

_controlClosedvalue = false; // or true

it should be

ControlClosedValue = false; // or true

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to bind SwitchCell text color to view model in Xamarin.Forms

From Dev

Binding a Custom View In Xamarin.Forms

From Dev

How to create a custom bindable View in Xamarin Forms?

From Dev

How to create a custom bindable View in Xamarin Forms?

From Dev

How to redirect to next view page in Xamarin Forms?

From Dev

How to data bind from view to view model in Xamarin?

From Dev

Xamarin Forms - Access Prism INavigationService in View Model for Content View

From Dev

How to bind to this in a xamarin-forms xaml-based view class

From Dev

How to bind to this in a xamarin-forms xaml-based view class

From Dev

Xamarin Forms Registering Customer Services with Unity for View Model Constructors

From Dev

Prism Xamarin Forms View is not updated after changing the model in OnNavigatedTo

From Dev

How to render a xamarin.forms view in a custom renderer

From Dev

Force redraw of Xamarin.Forms View with custom renderer

From Dev

Integrate Android View as custom control into Xamarin.Forms

From Dev

Custom View with Bindable Property not binding properly on Xamarin.Forms SAP

From Dev

Custom View with Bindable Property not binding properly on Xamarin.Forms SAP

From Dev

How to access method from view inside a Xamarin Forms custom renderer?

From Dev

How to bind custom dependecy property to control's view model?

From Dev

How to bind custom dependecy property to control's view model?

From Dev

how to implement mapbox on custom page renderer in xamarin forms?

From Dev

Xamarin Forms - custom renderer to centre page title in ios

From Dev

Xamarin Forms - Tabbed View?

From Dev

Xamarin Forms TemplateSelector for View

From Dev

Backbone bind Model to View

From Dev

Xamarin Forms - Custom Autocomplete

From Dev

Xamarin Forms page navigation

From Dev

Xamarin iOS custom view

From Dev

Scroll editor in Xamarin Forms into view

From Dev

Is there TOP VIEW(or window) on xamarin forms?

Related Related

  1. 1

    How to bind SwitchCell text color to view model in Xamarin.Forms

  2. 2

    Binding a Custom View In Xamarin.Forms

  3. 3

    How to create a custom bindable View in Xamarin Forms?

  4. 4

    How to create a custom bindable View in Xamarin Forms?

  5. 5

    How to redirect to next view page in Xamarin Forms?

  6. 6

    How to data bind from view to view model in Xamarin?

  7. 7

    Xamarin Forms - Access Prism INavigationService in View Model for Content View

  8. 8

    How to bind to this in a xamarin-forms xaml-based view class

  9. 9

    How to bind to this in a xamarin-forms xaml-based view class

  10. 10

    Xamarin Forms Registering Customer Services with Unity for View Model Constructors

  11. 11

    Prism Xamarin Forms View is not updated after changing the model in OnNavigatedTo

  12. 12

    How to render a xamarin.forms view in a custom renderer

  13. 13

    Force redraw of Xamarin.Forms View with custom renderer

  14. 14

    Integrate Android View as custom control into Xamarin.Forms

  15. 15

    Custom View with Bindable Property not binding properly on Xamarin.Forms SAP

  16. 16

    Custom View with Bindable Property not binding properly on Xamarin.Forms SAP

  17. 17

    How to access method from view inside a Xamarin Forms custom renderer?

  18. 18

    How to bind custom dependecy property to control's view model?

  19. 19

    How to bind custom dependecy property to control's view model?

  20. 20

    how to implement mapbox on custom page renderer in xamarin forms?

  21. 21

    Xamarin Forms - custom renderer to centre page title in ios

  22. 22

    Xamarin Forms - Tabbed View?

  23. 23

    Xamarin Forms TemplateSelector for View

  24. 24

    Backbone bind Model to View

  25. 25

    Xamarin Forms - Custom Autocomplete

  26. 26

    Xamarin Forms page navigation

  27. 27

    Xamarin iOS custom view

  28. 28

    Scroll editor in Xamarin Forms into view

  29. 29

    Is there TOP VIEW(or window) on xamarin forms?

HotTag

Archive