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

星期四, 8月 27, 2020

[X.Form] MVVM - 顏色變化

MVVM 練習，透過 Xaml 搭配 DataTrigger 來變化 View 顏色，也加深對 DataTrigger 的理解

ColorDemoViewModel

using System.ComponentModel;
using System.Windows.Input;
using Xamarin.Forms;

namespace MVVMColorDemo
{
    public class ColorDemoViewModel : INotifyPropertyChanged
    {
        private int _score;
        public int Score
        {
            get { return _score; }
            set
            {
                _score = value;
                OnPropertyChanged(nameof(Score));
            }
        }

        /// <summary>
        /// LabelView.DataTrigger Binding 該 Property 來進行顏色變化
        /// </summary>
        public bool IsScoreOver60
        {
            get { return Score >= 60; }
        }

        public string _result;
        public string Result
        {
            get { return _result; }
            set
            {
                _result = value;
                OnPropertyChanged(nameof(Result));
                // 在這通知 View IsScoreOver60 Property 有變化啦
                OnPropertyChanged(nameof(IsScoreOver60));
            }
        }

        public ICommand ShowScoreCommand
        {
            get
            {
                return new Command(() =>
                {
                    Result = $"使用者輸入分數為：{Score}";
                });
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

MainPage.Xaml

<?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:MVVMColorDemo"
             mc:Ignorable="d"
             x:Class="MVVMColorDemo.MainPage">

    <!--直接在 Xaml 內設定 BindingContext-->
    <ContentPage.BindingContext>
        <local:ColorDemoViewModel/>
    </ContentPage.BindingContext>

    <StackLayout>
        <Entry Placeholder="請輸入分數" FontSize="Large" Text="{Binding Score, Mode=TwoWay}"/>
        <Button Text="顯示輸入分數" Command="{Binding ShowScoreCommand}" FontSize="Large"/>
        <!--Label 顏色預設為 Red-->
        <Label Text="{Binding Result}" TextColor="Red" FontSize="Large">
            <!--本次重點 - DataTrigger 的使用-->
            <Label.Triggers>
                <DataTrigger 
                    TargetType="Label" 
                    Binding="{Binding IsScoreOver60}" 
                    Value="True">
                    <Setter Property="TextColor" Value="Green"/>
                </DataTrigger>
            </Label.Triggers>
        </Label>
    </StackLayout>

</ContentPage>

練習時 DataTrigger Binding 時打錯 Property，把 IsScoreOver60 打成 IsOver60，沒想到編譯階段都不會有錯誤發生，是執行階段變色效果一直出不來，回頭 debug 才發現打錯，Orz

初始畫面