Stacklayout 背景与 MVVM 的颜色绑定答案

【问题标题】：Stacklayout backgroundColor binding with MVVMStacklayout 背景与 MVVM 的颜色绑定
【发布时间】：2020-04-20 18:42:54
【问题描述】：

我正在尝试使用 XamarinForms 了解 MVVM，但我对功能的正确分区有点困惑：

我有一个主页 MainPage.xaml，其中包括一个堆栈布局：

<StackLayout x:Name="MainPageStackLayout">
...
</StackLayout>

在这个 stacklayout 中我有 Picker，它的绑定如下：

<Picker Title="Select a background colour"
        TitleColor="Black"
        TextColor="Black"
        ItemsSource="{Binding MyColours}"
        ItemDisplayBinding="{Binding Name}"
        SelectedItem="{Binding selectedBackGroundColour}" SelectedIndexChanged="BackGroundColourPicker_SelectedIndexChanged"/>

根据微软 (https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-monkeyapppicker/) 的文章：我有一个“视图”，它基本上定义了我的页面布局。

一个“ViewModel”，它包含一个 IList“MyColours”和一个变量“SelectedBackGroundColour”。

定义 MyColour 类的“模型”。 MyColour 有一个字符串名称和一个 Xamarin.Forms.Color（来自一个十六进制值，两者都在启动时填充）。

这一切都很好。我可以启动应用程序，然后 Picker 会填充我添加到“MyColours”中的颜色。如果我更改索引，那么我的 SelectedBackGroundColour 也会更新，具有正确的名称和不同的 RGB 值。

但是，我不知道应该在哪里更新 MainPageStackLayout 的实际背景颜色。视图（MainPage.xaml.cs）拾取“BackGroundColourPicker_SelectedIndexChanged”事件，但从视图模型读取的标准做法是什么（实际定义了 SelectedBackGround 颜色？）

我觉得我可以在 MainPageStackLayout xaml 视图中绑定背景颜色，这样我就不必捕获选定的索引更改事件。

谢谢大家。

【问题讨论】：

标签： xaml xamarin mvvm

【解决方案1】：

根据您的描述，我猜您想通过 Picker 值更改 MainPage StackLayout 背景颜色，对吗？

如果是，请按照以下步骤操作。

首先，请确认你实现了INotifyPropertyChanged接口来通知SelectedBackGroundColour改变。

然后有完整代码，请看：

<StackLayout x:Name="MainPageStacklayout" BackgroundColor="{Binding selectedBackGroundColour.color}">
        <Picker
            x:Name="picker1"
            Title="Select a background colour"
            ItemDisplayBinding="{Binding name}"
            ItemsSource="{Binding MyColours}"
            SelectedItem="{Binding selectedBackGroundColour}"
            TextColor="Black"
            TitleColor="Black" />
    </StackLayout>

public partial class Page5 : ContentPage, INotifyPropertyChanged
{
    public ObservableCollection<MyColour> MyColours { get; set; }
    private MyColour _selectedBackGroundColour;

    public MyColour selectedBackGroundColour
    {
        get { return _selectedBackGroundColour; }
        set
        {
            _selectedBackGroundColour = value;
            RaisePropertyChanged("selectedBackGroundColour");
        }
    }

    public Page5()
    {
        InitializeComponent();
        MyColours = new ObservableCollection<MyColour>()
        {
            new MyColour(){name="red",color=Color.Red},
            new MyColour(){name="gray",color=Color.Gray},
            new MyColour(){name="BlueViolet",color=Color.BlueViolet}
        };
        selectedBackGroundColour = MyColours[0];
        this.BindingContext = this;
    }


    public event PropertyChangedEventHandler PropertyChanged;       
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class MyColour
{
    public string name { get; set; }
    public Color color { get; set; }
}

截图：

【讨论】：