~楓花雪岳~: [X.Form] MVVM

星期五, 8月 28, 2020

[X.Form] MVVM - Picker

在 MVVM 內練習 Picker 的使用

ColorViewModel

using System.Drawing;

namespace MVVMEnumDemo
{
    public class ColorViewModel
    {
        public Color Color { get; set; }

        public string DisplayName { get; set; }
    }
}

EnumDemoViewModel

using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using Xamarin.Forms.Internals;
using System.Linq;

namespace MVVMEnumDemo
{
    public class EnumDemoViewModel : INotifyPropertyChanged
    {

        public EnumDemoViewModel()
        {
            this.ColorsList = new List<ColorViewModel>()
            {
                new ColorViewModel(){ Color = Color.Gray , DisplayName = "灰色"} ,
                new ColorViewModel(){ Color = Color.Red , DisplayName = "紅色"} ,
                new ColorViewModel(){ Color = Color.Green , DisplayName = "綠色"} ,
                new ColorViewModel(){ Color = Color.Yellow , DisplayName = "黃色"}
            };

            // 初始化顏色
            SelectedColor = Color.Black;
        }

        public IEnumerable<ColorViewModel> ColorsList { get; private set; }

        /// <summary>
        /// 資料來源
        /// </summary>
        private Color _selectedcolor;
        public Color SelectedColor
        {
            get { return _selectedcolor; }
            set
            {
                _selectedcolor = value;
                OnPropertyChanged(nameof(SelectedColor));
            }
        }

        /// <summary>
        /// 負責 Picker Index 轉換
        /// </summary>
        public int SelectedIndex
        {
            get { return this.ColorsList.IndexOf(c => c.Color == this.SelectedColor); }
            set
            {
                this.SelectedColor = this.ColorsList.ElementAt(value).Color;
                OnPropertyChanged(nameof(SelectedIndex));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Xaml View 配置

<?xml version="1.0" encoding="utf-8" ?>
<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:MVVMEnumDemo"
             mc:Ignorable="d"
             x:Class="MVVMEnumDemo.MainPage">

    <ContentPage.BindingContext>
        <local:EnumDemoViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Margin="20,20,20,20">
        
        <Picker        
            FontSize="Large"
            ItemsSource="{Binding ColorsList}" 
            ItemDisplayBinding="{Binding DisplayName}" 
            SelectedIndex="{Binding SelectedIndex,Mode=TwoWay}"/>

        <BoxView Color="{Binding SelectedColor}"
             CornerRadius="10"
             WidthRequest="300"
             HeightRequest="300"
             VerticalOptions="Center"
             HorizontalOptions="Center" />

    </StackLayout>
</ContentPage>

啟動畫面