Укладка фона Цветное связывание с MVVM

Question

Я пытаюсь разобраться с MVVM с помощью XamarinForms, и меня немного смущает правильное разбиение функциональности:

У меня есть главная страница, MainPage.xaml, которая включает в себя макет стека:

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

В этом стеке у меня есть средство выбора, которое связано следующим образом:

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

После статьи из Microsoft (https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-monkeyapppicker/): у меня есть «Вид», который в основном определяет макет моей страницы.

«ViewModel», которая содержит IList «MyColours» и переменную «SelectedBackGroundColour».

«Модель», которая определяет класс MyColour. MyColour имеет строковое имя и Xamarin.Forms.Color (из шестнадцатеричного значения, оба заполняются при запуске).

Все это прекрасно работает. Я могу запустить приложение, и средство выбора заполняется цветами, которые я добавляю в «MyColours». Если я изменяю индекс, то мой SelectedBackGroundColour также обновляется, имеет правильное имя и другое значение RGB.

Однако я теряюсь относительно того, где бы я был ie при обновлении фактического цвета фона. MainPageStackLayout. Представление (MainPage.xaml.cs) получает событие «BackGroundColourPicker_SelectedIndexChanged», но какова стандартная практика чтения из модели представления (где цвет SelectedBackGround действительно определен?)

У меня такое чувство, что я могу связать Цвет фона в представлении MainPageStackLayout xaml, поэтому мне не нужно перехватывать выбранное событие изменения индекса.

Спасибо всем.

Answer 1

Согласно вашему описанию, я думаю, что вы хотите изменить цвет MainPage StackLayout BackGround на значение Picker, я прав?

Если да, пожалуйста, следуйте инструкциям ниже.

Во-первых, Пожалуйста, подтвердите, что вы реализуете 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; }
}

Скриншот: