How to change page backgroundcolor with switch in Xamarin

Question

I want to change background color on my page when switch is true and false.So far I have

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:App9"
             mc:Ignorable="d"
             x:Class="App9.MainPage" x:Name="main" BackgroundColor="{Binding Display}">
<ContentPage.BindingContext>
    <local:Class1/>
</ContentPage.BindingContext>
<StackLayout>
    <Switch x:Name="toggle" Toggled="Switch_Toggled"/>

</StackLayout> 

Code behind:

private void Switch_Toggled(object sender, ToggledEventArgs e)
        {
            if (toggle.IsToggled == true)
            {
                class1.Display=Color.White;
            }
        }

And class1

public class Class1 : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

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



    private Color display;

    public Color Display
    {
        get
        {
            return display;
        }
        set
        {
            if (display != value)
            {
                display = value;
                NotifyPropertyChanged(nameof(Display));


            }
        }
    }

So when switch is on the background should be white.But it wont changed.I am not sure how to use INotifyPropertyChanged.

Answer 1

I believe the simplest way would be to use triggers for that purpose.

Triggers allow you to express actions declaratively in XAML that change the appearance of controls based on events or property changes. (Source)

You can bind a DataTrigger to the value of a Switch to change the appearance of another control. I built a small example with a Switch that changes the BackgroundColor of a BoxView, just for demonstration purposes:

<StackLayout>
    <Switch x:Name="Switch" />
    <BoxView BackgroundColor="Crimson">
        <BoxView.Triggers>
            <DataTrigger TargetType="BoxView"  
                         Binding="{Binding Source={x:Reference Switch}, Path=IsToggled}"
                         Value="True">
                <Setter Property="BackgroundColor" Value="CornflowerBlue" />
            </DataTrigger>
        </BoxView.Triggers>
    </BoxView>
</StackLayout>

I've added a DataTrigger to BoxView.Triggers that reacts to the Switch.IsToggled property. If it's set to True (see the Value property), the Setter will be applied to the BoxView and BackgroundColor will be set to CornflowerBlue.

In your case it'd be something like

<ContentPage.Triggers>
    <DataTrigger TargetType="ContentPage"  
                 Binding="{Binding Source={x:Reference Switch}, Path=IsToggled}"
                 Value="True">
        <Setter Property="BackgroundColor" Value="White" />
    </DataTrigger>
</ContentPage.Triggers>

There is no need for using BindingContext in this case.

Works: