Как изменить цвет фона страницы с помощью переключателя в Xamarin

Question

Я хочу изменить цвет фона на моей странице, когда переключатель имеет значение true и false. До сих пор у меня есть

<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> 

Код:

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

И 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));


            }
        }
    }

Поэтому, когда переключатель включен, фон должен быть белым. Но он не изменится. Я не уверен, как использовать INotifyPropertyChanged.

Answer 1

Я считаю, что самым простым способом было бы использовать для этой цели триггеры.

Триггеры позволяют декларативно express действий в XAML, которые изменяют внешний вид элементов управления на основе событий или изменений свойств. ( Источник )

Вы можете привязать DataTrigger к значению Switch, чтобы изменить внешний вид другого элемента управления. Я построил небольшой пример с Switch, который изменяет BackgroundColor из BoxView, только для демонстрационных целей:

<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>

Я добавил DataTrigger к BoxView.Triggers, который реагирует в собственность Switch.IsToggled. Если он установлен на True (см. Свойство Value), Setter будет применен к BoxView, а BackgroundColor будет установлен на CornflowerBlue.

В вашем случае это будет что-то вроде

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

Нет необходимости использовать BindingContext в этом случае.

Работы: