顯示具有 Xamarin.Forms 標籤的文章。 顯示所有文章
顯示具有 Xamarin.Forms 標籤的文章。 顯示所有文章

2022年7月30日 星期六

MAUI : 資料綁定 Data Binding - 2 設計基底類別,透過繼承可以使用屬性變更通知

資料綁定 Data Binding - 2 設計基底類別,透過繼承可以使用屬性變更通知

在上一篇 資料綁定 Data Binding - 1 自行建置 INotifyPropertyChanged 介面 文章中,設計了一個類別,為了要能夠知道這個類別所建立的執行個體內的哪個屬性有變更異動發生了,因此,可以觸發一個已經事先訂閱的事件,而這個事件處理常式將會被執行,並且得到究竟是哪個屬性發生了變更行為。

若是採用這樣的設計方式,將會產生一個不好的結果發生,那就是每次要設計一個新的類別,並且該類別想要具有 PropertyChanged 屬性變更通知效果的時候,那就只好在這些新設計的類別上,都要實作出 [INotifyPropertyChanged] 介面,而且,對於該類別內的屬性,都需要使用 完整屬性用法 含有支援欄位的屬性 來進行設計屬性程式碼,而不能夠使用 自動實作的屬性 方式來進行設計屬性程式碼。

從上述的描述可以看出,這樣將會大量使用到 剪貼 技能來進行程式碼的設計,這樣的設計將會是得未來程式碼變得不好維護,因為,在這裡可以選擇使用物件導向程式設計技能,將這些共通的程式碼,設計到一個基底類別 Base Class 內,下次要設計一個新的類別,並且想要提供屬性變更通知這樣機制的時候,便可以繼承這個基底類別即可。

系列文章清單

1 自行建置 INotifyPropertyChanged 介面

2 設計基底類別,透過繼承可以使用屬性變更通知

3 PropertyChanged.Fody 套件,大幅簡化屬性變更通知程式設計碼

4 CommunityToolkit.Mvvm 套件,透過原始碼產生來簡化屬性變更通知程式設計碼

5 在 Maui 專案內,如何得知 ViewModel 內的屬性產生異動,而 View 可以收到通知呢?

建立新專案

  • 開啟 Visual Studio 2022 開發工具
  • 當 [Visual Studio 2022] 對話窗出現的時候
  • 點選右下角的 [建立新的專案] 按鈕選項
  • 現在將看到 [建立新專案] 對話窗
  • 請選擇 [主控台應用程式] 這個專案範本
  • 點選右下角的 [下一步] 按鈕
  • 此時將會看到 [設定新的專案] 對話窗
  • 在 [專案名稱] 欄位,輸入 csBindableBase
  • 點選右下角的 [下一步] 按鈕
  • 最後會看到 [其他資訊] 對話窗
  • 請勾選 [不要使用最上層語句] 這個文字檢查盒控制項
  • 點選右下角的 [建立] 按鈕

設計 BindableBase 基底類別 - 提供屬性綁定需要的相關功能

首先, 先來設計這個基底類別,為了簡化整體解說與操作過程,底下的程式碼將都會設計到 [Program.cs] 檔案內

  • 找到 [namespace csBindableBase] 宣告
  • 請將底下程式碼設計到 [namespace csBindableBase] 宣告之後
public abstract class BindableBase : INotifyPropertyChanged
{
    #region 實作出 INotifyPropertyChanged 的程式碼
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
    {
        PropertyChanged?.Invoke(this, args);
    }
    #endregion

    protected virtual bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        // 先比對新舊的物件值是否相同,若不同,才會觸發 屬性變更 的通知事件
        if (EqualityComparer<T>.Default.Equals(storage, value)) return false;

        // 將此次設定的物件值,指派給該欄位
        storage = value;
        // 觸發 屬性變更 的通知事件
        RaisePropertyChanged(propertyName);

        return true;
    }

    protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
    }
}

現在,已經在這個命名空間內建立一個抽象類別,其名稱為 BindableBase ,該類別需要實作 INotifyPropertyChanged

因為有要實作出 INotifyPropertyChanged ,所以需要設計 public event PropertyChangedEventHandler PropertyChanged; 事件成員的宣告,接著,也設計出一個 [OnPropertyChanged] 方法,可以傳入一個 PropertyChangedEventArgs 參數,這將會提供 PropertyChanged 事件的所需要用到的資料。

接下來要簡化與強化 含有支援欄位的屬性 設計上的需求,例如,在前一篇 資料綁定 Data Binding - 1 自行建置 INotifyPropertyChanged 介面 文章中,若設定該屬性的物件值與現行該物件中的欄位值相同的時候,同樣的會觸發屬性變動的事件通知,這樣的設計其實不是很好。

因此,在這個 BindableBase 類別中,將會設計一個 SetProperty<T> 泛型方法 來處理這樣的需求。在這個方法內,將會使用 參考 ref 方式來傳入一個該物件的欄位,接著,傳入這次要變更的新設定值,透過了 EqualityComparer<T>.Default.Equals(storage, value) 表示式 ( 這裡有 EqualityComparer 類別 更多說明 ) ,來確認與比較這兩個值是否相同,若是相同則不會接下來的觸發屬性變更通知的行為。

若新舊值不相同,則會透過 RaisePropertyChanged(propertyName); 方法來觸發屬性變動的事件通知,而這裡的 propertyName 將會是該方法傳入的一個參數,代表此次要變動的屬性名稱,而在這個 propertyName 參數前面,使用了 CallerMemberName , 這是一個 C# 屬性 [Attribute] ,其目的是可讓您取得方法呼叫端的方法或屬性名稱,這個屬性是在 C# 6.0 推出的新功能,相當的好用,可以簡化過多不必要的程式碼,減少寫錯的機會,提升整體專案可維護性;因此,透過了 CallerMemberName 功能,無縫取得當時的屬性名稱字串,便可以將這個屬性字串名稱送到屬性變更的觸發事件引數內。

在 RaisePropertyChanged 方法內,將會建立 PropertyChange 事件會用到的 PropertyChangedEventArgs 參數,該型別的參數需要一個字串,這裡的字串將會表示現在正在變動的屬性名稱,如此,便可以透過 [OnPropertyChanged] 方法來執行 PropertyChanged?.Invoke(this, args); 敘述,拋出該屬性異動的事件通知訊息了。

重新設計 Person 類別

接下來將會要把前一篇 資料綁定 Data Binding - 1 自行建置 INotifyPropertyChanged 介面 文章,所設計的 Person 類別重新設計一遍,底下將會是設計完成後的程式碼。

public class Person : BindableBase
{
    #region 針對每個具有 PropertyChanged 的屬性,都需要有底下的程式碼設計方式

    #region 姓名
    private string name;

    public string Name
    {
        get { return name; }
        set { SetProperty(ref name, value); }
    }
    #endregion

    #region 年紀
    private int age;

    public int Age
    {
        get { return age; }
        set { SetProperty(ref age, value); }
    }

    #endregion
    #endregion
}

首先,在 Person 類別將不再直接實作 [INotifyPropertyChanged] 這個介面,而是修該成為繼承剛剛設計好的 [BindableBase] 抽象類別,在這個抽象類別內,將會已經有實作出 [INotifyPropertyChanged] 這個介面。

在這個類別內的兩個屬性,姓名與年紀,同樣的還是需要使用 含有支援欄位的屬性 方式來進行屬性成員的設計,也就是說,要先設計一個 欄位 field 成員,接著,使用 get 存取子 與 set 存取子 來設計這個屬性的讀寫動作。

在讀取這個屬性的時候,對於 [get 存取子] 程式碼沒有變動,還是直接回傳指定欄位的值,不過,對於 [set 存取子] 而言,將會修該成為呼叫該方法 SetProperty(ref name, value); ;從這個敘述可以看出,在這裡呼叫了 SetProperty 這個泛型型別方法,並且傳入的姓名欄欄位的參考,如此,在這個 SetProperty 方法內,便可以直接地變更、修正這裡傳入的 name 變數值,第二個引數將會是現在這個屬性所持有的值,第三個引數在這裡沒有寫出來,可是,在 SetProperty 的函式簽章中,可以看出第三個參數的型別定義為 [CallerMemberName] string propertyName = null ,因此,第三個參數將會得到這個 姓名 屬性的名稱,在這個例子中,將會是 Name 這個字串

這樣設計出來的 Person 類別程式碼,是否已經清爽許多,而且不再存在弱型別的問題,因為,若是有弱型別而產生的問題,將會導致於在執行階段產生詭異現象或者得到不正確的執行結果,甚至有可能得到例外異常而導致該應用程式崩潰。

確認採用 BindableBase 抽象類別的設計是否可正常運作

在這裡將會採用同樣的測試程式碼,如下所示

internal class Program
{
    static void Main(string[] args)
    {
        Person person = new Person();
        person.PropertyChanged += (s, e) =>
        {
            WriteLine($"屬性 {e.PropertyName} 已經變更");
        };

        WriteLine("準備要修改 Name 屬性值");
        person.Name = "Vulcan Lee";

        WriteLine("Press any key for continuing...");
        ReadKey();

        WriteLine("準備要修改 Age 屬性值");
        person.Age = 25;

        WriteLine("Press any key for continuing...");
        ReadKey();
    }
}

在這裡先建立一個型別為 [Person] 的物件,指派給 person 變數內

接著,因為每個 [Person] 物件,都有個公開的 [PropertyChanged] 事件,因此,在此將需要訂閱這個事件,在此使用 Lambda 運算式 設計一個匿名委派方法來綁定這個事件,如此,當有屬性變更的事件產生的時候,將會觸發這裡綁定的 Lambda 委派方法,也就是會在螢幕上顯示出哪個屬性值已經變更了。

完成的變更屬性的事件訂閱與綁定設計,接下來就是要開始針對這個 person 物件的兩個屬性值進行變動,看看是否會有屬性變動通知事件產生,底下是執行後的結果內容。

這裡將會是整個完整的測試程式碼

public abstract class BindableBase : INotifyPropertyChanged
{
    #region 實作出 INotifyPropertyChanged 的程式碼
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
    {
        PropertyChanged?.Invoke(this, args);
    }
    #endregion

    protected virtual bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        // 先比對新舊的物件值是否相同,若不同,才會觸發 屬性變更 的通知事件
        if (EqualityComparer<T>.Default.Equals(storage, value)) return false;

        // 將此次設定的物件值,指派給該欄位
        storage = value;
        // 觸發 屬性變更 的通知事件
        RaisePropertyChanged(propertyName);

        return true;
    }

    protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
    }
}

public class Person : BindableBase
{
    #region 針對每個具有 PropertyChanged 的屬性,都需要有底下的程式碼設計方式

    #region 姓名
    private string name;

    public string Name
    {
        get { return name; }
        set { SetProperty(ref name, value); }
    }
    #endregion

    #region 年紀
    private int age;

    public int Age
    {
        get { return age; }
        set { SetProperty(ref age, value); }
    }

    #endregion
    #endregion
}

internal class Program
{
    static void Main(string[] args)
    {
        Person person = new Person();
        person.PropertyChanged += (s, e) =>
        {
            WriteLine($"屬性 {e.PropertyName} 已經變更");
        };

        WriteLine("準備要修改 Name 屬性值");
        person.Name = "Vulcan Lee";

        WriteLine("Press any key for continuing...");
        ReadKey();

        WriteLine("準備要修改 Age 屬性值");
        person.Age = 25;

        WriteLine("Press any key for continuing...");
        ReadKey();
    }
}






2022年7月29日 星期五

MAUI : 資料綁定 Data Binding - 1 自行建置 INotifyPropertyChanged 介面

資料綁定 Data Binding - 1 自行建置 INotifyPropertyChanged 介面

當在學習 毛伊 MAUI 跨平台開發工具來進行 Android , iOS , WinUI 等平台應用程式開發的時候,對於 MVVM Model View ViewModel 這樣的設計模式一定十分孰悉與精通 ,而在 MVVM 設計模式下的 資料綁定 Data Binding 觀念與實作技術,也務必要徹底了解,這樣的技術是怎麼運行起來的,可以提供甚麼樣的好處。

資料綁定 Data Binding 的技術背後將會需要實作出 INotifyPropertyChanged 介面,這個型別早就已經存在於 .NET Framework 2.0 內了,所以,這並不是甚麼十分嶄新的技術與觀念,為了要能夠體會與理解 INotifyPropertyChanged 介面,現在就實際來動手實作看看。

系列文章清單

1 自行建置 INotifyPropertyChanged 介面

2 設計基底類別,透過繼承可以使用屬性變更通知

3 PropertyChanged.Fody 套件,大幅簡化屬性變更通知程式設計碼

4 CommunityToolkit.Mvvm 套件,透過原始碼產生來簡化屬性變更通知程式設計碼

5 在 Maui 專案內,如何得知 ViewModel 內的屬性產生異動,而 View 可以收到通知呢?

實作 INotifyPropertyChanged 介面

  • 開啟 Visual Studio 2022 開發工具

  • 當 [Visual Studio 2022] 對話窗出現的時候

  • 點選右下角的 [建立新的專案] 按鈕選項

  • 現在將看到 [建立新專案] 對話窗

  • 請選擇 [主控台應用程式] 這個專案範本

  • 點選右下角的 [下一步] 按鈕

  • 此時將會看到 [設定新的專案] 對話窗

  • 在 [專案名稱] 欄位,輸入 csINotifyPropertyChanged

  • 點選右下角的 [下一步] 按鈕

  • 最後會看到 [其他資訊] 對話窗

  • 請勾選 [不要使用最上層語句] 這個文字檢查盒控制項

  • 點選右下角的 [建立] 按鈕

為了要簡化過程,因此,將會把相關程式碼都寫入到 Program.cs 這個檔案內,當然,也可以把等下要建立的新類別 [Person] 建立到新的 [Person.cs] 檔案內。

  • 請在 [Program.cs] 檔案內 namespace csINotifyPropertyChanged 這個命名空間宣告的最前面,加入一個 [Person] 類別宣告,程式碼如下:
public class Person : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

在這個 [Person] 類別內,將需要實作 INotifyPropertyChanged 這個介面,在這個 INotifyPropertyChanged 介面內,只有宣告一個 event PropertyChangedEventHandler? PropertyChanged; 成員,因此,這裡將會加入這樣的 public event PropertyChangedEventHandler? PropertyChanged; 程式碼宣告

在剛剛加入的 [PropertyChanged] 事件成員,將會用來讓外部參考與使用這個類別執行個體的其他物件,可以訂閱 [PropertyChanged] 這個事件,而當這個 [Person] 類別的內部狀態 (相關 欄位 Field) 有變動的時候,將會觸發這個 [PropertyChanged] 事件,如此,便可以讓有訂閱這個事件的其他物件,可以收到此執行個體的狀態有變更的通知,這就是 INotifyPropertyChanged 這個介面最主要的價值與目的。

為了要方便隨時可以觸發 [PropertyChanged] 事件,因此,在這裡設計了一個 [OnPropertyChanged] 方法,該方法可以接收一個字串參數,這個字串參數表示了是哪個屬性名稱發生了異動,而在這個 [OnPropertyChanged] 方法內,僅有一行敘述,這樣的寫法是為了要避免在多執行緒程式碼執行下,具有執行緒安全的特性。

好了,有了基本的 INotifyPropertyChanged 實作程式碼,現在可以來進行這個 [Person] 類別的成員設計,在這個類別內,其實僅設計兩個成員,一個是具有字串型別的 [Name] 屬性,表示這個 Person 物件的姓名,另外一個是具有整數型別的 [Age] 屬性,表示這個 Person 物件的年紀。

不過,為了能夠做出,當這兩個屬性值發生異動的時候,可以觸發 [PropertyChanged] 事件,在這裡是不能夠使用 自動實作的屬性 ,而是要使用 屬性 的方式來設計,也就是要使用 set 與 get 存取子和一個欄位成員來定義出這個屬性。

底下將會是 [Person] 這個類別內,準備要新加入的兩個屬性定義程式碼

public class Person : INotifyPropertyChanged
{

   ...

    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            OnPropertyChanged("Name");
        }
    }

    private int age;
    public int Age
    {
        get { return age; }
        set
        {
            age = value;
            OnPropertyChanged("Age");
        }
    }
}

在此,將先採用姓名這個屬性來說明設計過程,首先,宣告一個 欄位 成員,使用 private string name; 這樣程式碼,很清楚的,因為這是個欄位,因此,需要加入 private 修飾詞,避免外部其他物件來存取,僅供這個類別所建立的執行個體內的程式碼可以存取。

緊接著使用 含有支援欄位的屬性 來設計一個 Name 新屬性。對於這個新的 Name 屬性,其 get 存取子 將會直接回傳 name 這個欄位值,而對於 set 這個存取子,除了一定要將傳入進來的值,設定給 name 這個欄位之外,還需要使用 OnPropertyChanged("Name"); 敘述來觸發該屬性值已經發生變更的行為通知。

同樣的,也需要設計一個 Age 屬性與 age 欄位,參考上述 姓名 的做法,設計出年紀的屬性程式碼。

現在可以開始來體驗 INotifyPropertyChanged 這個介面所帶來的好處與方便性

現在,請在 Main 方法內,加入底下程式碼

Person person = new Person();
person.PropertyChanged += (s, e) =>
{
    WriteLine($"屬性 {e.PropertyName} 已經變更");
};
WriteLine("準備要修改 Name 屬性值");
person.Name = "Vulcan Lee";
WriteLine("Press any key for continuing...");
ReadKey();
WriteLine("準備要修改 Age 屬性值");
person.Age = 25;
WriteLine("Press any key for continuing...");
ReadKey();

在這裡先建立一個型別為 [Person] 的物件,指派給 person 變數內

接著,因為每個 [Person] 物件,都有個公開的 [PropertyChanged] 事件,因此,在此將需要訂閱這個事件,在此使用 Lambda 運算式 設計一個匿名委派方法來綁定這個事件,如此,當有屬性變更的事件產生的時候,將會觸發這裡綁定的 Lambda 委派方法,也就是會在螢幕上顯示出哪個屬性值已經變更了。

完成的變更屬性的事件訂閱與綁定設計,接下來就是要開始針對這個 person 物件的兩個屬性值進行變動,看看是否會有屬性變動通知事件產生,底下是執行後的結果內容。

這裡將會是整個完整的測試程式碼

global using static System.Console;
using System.ComponentModel;

namespace csINotifyPropertyChanged
{
    public class Person : INotifyPropertyChanged
    {
        #region 實作出 INotifyPropertyChanged 的程式碼
        // 在這個 INotifyPropertyChanged 介面內,只有宣告一個 event PropertyChangedEventHandler? PropertyChanged; 成員
        public event PropertyChangedEventHandler? PropertyChanged;
        // 設計底下的方法,是要方便可以觸發 PropertyChanged 這個事件
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion

        private int myVar;

        public int MyProperty
        {
            get { return myVar; }
            set { myVar = value; }
        }

        #region 針對每個具有 PropertyChanged 的屬性,都需要有底下的程式碼設計方式

        #region 姓名
        private string name;

        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }
        #endregion

        #region 年紀
        private int age;

        public int Age
        {
            get { return age; }
            set
            {
                age = value;
                OnPropertyChanged("Age");
            }
        }

        #endregion
        #endregion
    }


    internal class Program
    {
        static void Main(string[] args)
        {
            Person person = new Person();
            person.PropertyChanged += (s, e) =>
            {
                WriteLine($"屬性 {e.PropertyName} 已經變更");
            };

            WriteLine("準備要修改 Name 屬性值");
            person.Name = "Vulcan Lee";

            WriteLine("Press any key for continuing...");
            ReadKey();

            WriteLine("準備要修改 Age 屬性值");
            person.Age = 25;

            WriteLine("Press any key for continuing...");
            ReadKey();
        }
    }
}