CODEWITHSUNDEEP
data-bindingxamarin.forms
Reihaneh Khaksaran
Reihaneh Khaksaran

Reputation: 228

XF binding data from a popuppage to a contentpage through xaml

I have a popup page in my application which includes some checkboxes, and I also have a ContentPage in my MainPage which contains some stacklayouts, I want to bind the IsVisible Property of my stacklayout to the IsChecked property of my checkbox (which is in another page), but i don't know how to do it, can anybody please help? I've tried this, but it doesn't work

here's the code in my popup page:

 <StackLayout Orientation="Horizontal" Spacing="60">
            <local:Checkbox x:Name="va1Checkbox"  Text="VA1"/>
            <local:Checkbox x:Name="va2Checkbox" Text="VA2"/>             
        </StackLayout>

and this is the piece of code i have in my MainPage:

      <StackLayout   IsVisible="{Binding Source={x:Reference 
                                               va1Checkbox},Path=IsChecked}">

      </StackLayout>

Thanks in advance

Upvotes: 2

Views: 418

Answers (2)

Umair M
Umair M

Reputation: 10750

<StackLayout Orientation="Horizontal" Spacing="60">
    <local:Checkbox x:Name="va1Checkbox"  Text="VA1"/>
    <local:Checkbox x:Name="va2Checkbox" Text="VA2"/>             
</StackLayout>

I believe your popup represents some kind of settings based on which you control your StackLayout in Main Page.

If this is the case, there are two possible solutions.

  1. Create a separate class which is binding for both checkbox and layout. You can use this either with MVVM or without it.

  2. Value Passing: open popup from Main Page and register to its close event. When popup is closed you can use its checkbox's value to enable/disable the layout.

In your Popup.xaml.cs :

create an event action

public event Action<Popup> OnClose;

I believe you will have a way to close it. I don't know you are closing it so I will just use OnBackButtonPressed() here:

protected override bool OnBackButtonPressed()
{
    OnClose?.Invoke(this);
    return base.OnBackButtonPressed();
}

In your MainPage.xaml.cs :

private void OpenPopup()
{
    var popup = new PopupPage();
    popup.OnClose += OnPopupClosed;
}

void OnPopupClosed(Popup popup)
{
    yourStackLayout.IsVisible = popup.va1Checkbox.Value;
}

UPDATE:

You can pass custom data class instead of popup object:

public class PopupData
{
    public bool va1CheckboxValue;
    public bool va1CheckboxValue;
    // other data which you need to access in other page.
}

then 

public event Action<PopupData> OnClose;

and 

protected override bool OnBackButtonPressed()
{
    PopupData data = new PopupData() { va1CheckboxValue = va1Checkbox.Value; }
    OnClose?.Invoke(data);
    return base.OnBackButtonPressed();
}

and in main page:

void OnPopupClosed(PopupData data)
{
    yourStackLayout.IsVisible = data.va1CheckboxValue;
}

Hope this helps.

Upvotes: 2

Alessandro Caliaro
Alessandro Caliaro

Reputation: 5768

I don't know very well XAML and MVVM, but I think you can pass MainPage's ViewModel to Popup... if you change MainPage's ViewModel properties in Popup I think these changes will reflect also to MainPage's binded controls.

If you are not using MVVM (you should...), I think you have to pass a reference to properties used in MainPage to Popup... in this way, Popup can change MainPage's properties and its UI could change

Upvotes: 0

Related Questions