---

前言

.NET 多平臺應(yīng)用 UI (.NET MAUI) 是一個跨平臺框架，用于使用 C# 和 XAML 創(chuàng)建本機(jī)移動和桌面應(yīng)用。
使用 .NET MAUI，可從單個共享代碼庫開發(fā)可在 Android、iOS、macOS 和 Windows 上運(yùn)行的應(yīng)用。

.NET MAUI 是一款開放源代碼應(yīng)用，是 Xamarin.Forms 的進(jìn)化版，從移動場景擴(kuò)展到了桌面場景，并從頭重新生成了 UI 控件，以提高性能和可擴(kuò)展性。 如果以前使用過 Xamarin.Forms 來生成跨平臺用戶界面，那么你會注意到它與 .NET MAUI 有許多相似之處。 但也有一些差異。 通過使用 .NET MAUI，可使用單個項目創(chuàng)建多平臺應(yīng)用，但如果有必要，可以添加特定于平臺的源代碼和資源。 .NET MAUI 的主要目的之一是使你能夠在單個代碼庫中實(shí)現(xiàn)盡可能多的應(yīng)用邏輯和 UI 布局。

一、問題描述

MVVM模式（Model-View-ViewModel）架構(gòu)模式，是將View和ViewModel關(guān)聯(lián)起來，通過雙向數(shù)據(jù)綁定實(shí)現(xiàn)View和ViewModel的同步更新。View負(fù)責(zé)展示數(shù)據(jù)和用戶交互，ViewModel負(fù)責(zé)處理數(shù)據(jù)和業(yè)務(wù)邏輯，Model負(fù)責(zé)存儲數(shù)據(jù)。MVVM的優(yōu)點(diǎn)是能夠降低View和ViewModel之間的耦合，使得代碼更加可維護(hù)和可測試。
.NET MAUI是如何進(jìn)行將View和ViewModel雙向綁定的呢？

二、解決方案

1、視圖–數(shù)據(jù)模型綁定：定義ViewModels，視圖層通過Binding屬性綁定ViewModels；
2、數(shù)據(jù)模型–視圖綁定：ViewModels屬性發(fā)生改變，需要通知View進(jìn)行更新，通知采用觀察者模式，更新View采用委托Invoke。
聽起來很復(fù)雜對不對？其實(shí)很簡單。

三、軟件開發(fā)（源碼）

3.1 創(chuàng)建模型

文件名：MO1002AddViewModel.cs
位置：ViewModels
備注：集合一定要定義成 ObservableCollection，不要使用List，否則無法實(shí)現(xiàn)MVVM，ObservableCollection實(shí)現(xiàn)INotifyCollectionChanged, INotifyPropertyChanged。

using App.Mes.Core.Entities;
using App.Mes.Core.Operation.Services.Mobile;
using Newtonsoft.Json;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;namespace GlueNet.Mobile.ViewModels
{public class MO1002AddViewModel : INotifyPropertyChanged{private string _mtrlTypeValue; // 物料類型private string _houseValue; // 線邊庫private string _bnPlantValue; // 業(yè)務(wù)工廠private string _reasonValue; // 原因public ObservableCollection<KeyValuePair<string, string>> MtrlTypeOptions { get; set; } = new ObservableCollection<KeyValuePair<string, string>>();public ObservableCollection<KeyValuePair<string, string>> HouseOptions { get; set; } = new ObservableCollection<KeyValuePair<string, string>>();public ObservableCollection<KeyValuePair<string, string>> BnPlantOptions { get; set; } = new ObservableCollection<KeyValuePair<string, string>>();public ObservableCollection<KeyValuePair<string, string>> ReasonOptions { get; set; } = new ObservableCollection<KeyValuePair<string, string>>();public KeyValuePair<string, string> MtrlTypeValue{get => new KeyValuePair<string, string>(MtrlTypeOptions.FirstOrDefault(x => x.Value == _mtrlTypeValue).Key, _mtrlTypeValue);set{if (_mtrlTypeValue != value.Value){_mtrlTypeValue = value.Value;OnPropertyChanged();}}}public KeyValuePair<string, string> HouseValue{get => new KeyValuePair<string, string>(HouseOptions.FirstOrDefault(x => x.Value == _houseValue).Key, _houseValue);set{if (_houseValue != value.Value){_houseValue = value.Value;OnPropertyChanged();}}}public KeyValuePair<string, string> BnPlantValue{get => new KeyValuePair<string, string>(BnPlantOptions.FirstOrDefault(x => x.Value == _bnPlantValue).Key, _bnPlantValue);set{if (_bnPlantValue != value.Value){_bnPlantValue = value.Value;OnPropertyChanged();}}}public KeyValuePair<string, string> ReasonValue{get => new KeyValuePair<string, string>(ReasonOptions.FirstOrDefault(x => x.Value == _reasonValue).Key, _reasonValue);set{if (_reasonValue != value.Value){_reasonValue = value.Value;OnPropertyChanged();}}}/// <summary>/// 構(gòu)造函數(shù)/// </summary>public MO1002AddViewModel(){InitializeOptions();}private void InitializeOptions(){//物料類型初始化MtrlTypeOptions.Add(new KeyValuePair<string, string>("22", "紙垛"));MtrlTypeOptions.Add(new KeyValuePair<string, string>("23", "紙卷"));MtrlTypeValue = MtrlTypeOptions.FirstOrDefault();//線邊庫初始化string str_house = GycMobileService.Proxy.GetHouseByUser();var houseList = JsonConvert.DeserializeObject<List<Tax0010>>(str_house);foreach (var item in houseList){HouseOptions.Add(new KeyValuePair<string, string>(item.CStoreHouse, item.CStoreHouseNm));}HouseValue = HouseOptions.FirstOrDefault();//業(yè)務(wù)工廠初始化string str_BnPlant = GycMobileService.Proxy.GetBsnsPlant();var BnPlantList = JsonConvert.DeserializeObject<List<Tax0002>>(str_BnPlant);foreach (var item in BnPlantList){BnPlantOptions.Add(new KeyValuePair<string, string>(item.CNewBnPlantCd, item.CNewBnPlantNm));}BnPlantValue = BnPlantOptions.FirstOrDefault();//退庫原因string str_Reason = GycMobileService.Proxy.GetReason();var ReasonList = JsonConvert.DeserializeObject<List<KeyValuePair<string, string>>>(str_Reason);foreach (var item in ReasonList){ReasonOptions.Add(new KeyValuePair<string, string>(item.Key, item.Value));}ReasonValue = ReasonOptions.FirstOrDefault();}/// <summary>/// MO1002Page頁面用，根據(jù)key獲取value/// 備注：此方法不推薦，gyc建議服務(wù)端【聯(lián)表查詢】返回合適（有value）的數(shù)據(jù)對象，現(xiàn)在服務(wù)端ORM難以改造，故而使用此方案。/// </summary>public string GetMtrlTypeValueByKey(string key){var house = MtrlTypeOptions.FirstOrDefault(x => x.Key == key);return house.Value;}public string GetHouseValueByKey(string key){var house = HouseOptions.FirstOrDefault(x => x.Key == key);return house.Value;}public string GetBnPlantValueByKey(string key){var house = BnPlantOptions.FirstOrDefault(x => x.Key == key);return house.Value;}public string GetReasonValueByKey(string key){var house = ReasonOptions.FirstOrDefault(x => x.Key == key);return house.Value;}public event PropertyChangedEventHandler PropertyChanged;protected void OnPropertyChanged([CallerMemberName] string propertyName = null){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}
}

3.2 視圖界面

文件名：MO1002AddPage.xaml
位置：Pages
備注：第二種綁定形勢，也可以在在邏輯層綁定。
<ContentPage.BindingContext>
<local:MO1002AddViewModel />
</ContentPage.BindingContext>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="GlueNet.Mobile.Pages.MO1002AddPage"xmlns:local="clr-namespace:GlueNet.Mobile.ViewModels"Title="件次退料-制單"><ContentPage.BindingContext><local:MO1002AddViewModel /></ContentPage.BindingContext><VerticalStackLayout ><StackLayout Margin="10,20,10,20"><!--件次退料 制單--><Frame BorderColor="LightGray" CornerRadius="5" Padding="10" Margin="5"><Grid ColumnDefinitions="*,*" RowDefinitions="*,*,*,*"><Label Text="物料類型" VerticalOptions="Center"/><Picker Title="下拉框" Grid.Column="1" ItemsSource="{Binding MtrlTypeOptions}" SelectedItem="{Binding MtrlTypeValue}" ItemDisplayBinding="{Binding Value}"/><Label Text="線邊庫" Grid.Row="1" VerticalOptions="Center"/><Picker Title="下拉框" Grid.Row="1" Grid.Column="1" ItemsSource="{Binding HouseOptions}" SelectedItem="{Binding HouseValue}" ItemDisplayBinding="{Binding Value}"/><Label Text="業(yè)務(wù)工廠"  Grid.Row="2" VerticalOptions="Center"/><Picker Title="下拉框" Grid.Row="2" Grid.Column="1" ItemsSource="{Binding BnPlantOptions}" SelectedItem="{Binding BnPlantValue}" ItemDisplayBinding="{Binding Value}"/><Label Text="退庫原因" Grid.Row="3" VerticalOptions="Center"/><Picker Title="下拉框" Grid.Row="3" Grid.Column="1" ItemsSource="{Binding ReasonOptions}" SelectedItem="{Binding ReasonValue}" ItemDisplayBinding="{Binding Value}"/></Grid></Frame></StackLayout><!--件次退料 制單--><Grid ColumnDefinitions="*,*,*"><Button Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" Text="確認(rèn)"  FontSize="15" BackgroundColor="LightBlue" Clicked="OnAddClicked"/><Button Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" Text="取消"  FontSize="15" BackgroundColor="Orange" Clicked="OnCanelClicked"/></Grid></VerticalStackLayout>
</ContentPage>

3.3 控制器邏輯層

邏輯層代碼沒有，全在ViewModel構(gòu)造函數(shù)中，進(jìn)行了數(shù)據(jù)初始化。
邏輯如果要使用可以使用如下方法

var viewModel = BindingContext as MO1002AddViewModel;

四、項目展示