【Maui】下拉框的实现，绑定键值对

文章目录

  • 前言
  • 一、问题描述
  • 二、解决方案
  • 三、软件开发（源码）
    • 3.1 创建模型
    • 3.2 视图界面
    • 3.3 控制器逻辑层
  • 四、项目展示

前言

.NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用。
使用 .NET MAUI，可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。

.NET MAUI 是一款开放源代码应用，是 Xamarin.Forms 的进化版，从移动场景扩展到了桌面场景，并从头重新生成了 UI 控件，以提高性能和可扩展性。 如果以前使用过 Xamarin.Forms 来生成跨平台用户界面，那么你会注意到它与 .NET MAUI 有许多相似之处。 但也有一些差异。 通过使用 .NET MAUI，可使用单个项目创建多平台应用，但如果有必要，可以添加特定于平台的源代码和资源。 .NET MAUI 的主要目的之一是使你能够在单个代码库中实现尽可能多的应用逻辑和 UI 布局。

一、问题描述

MVVM模式（Model-View-ViewModel）架构模式，是将View和ViewModel关联起来，通过双向数据绑定实现View和ViewModel的同步更新。View负责展示数据和用户交互，ViewModel负责处理数据和业务逻辑，Model负责存储数据。MVVM的优点是能够降低View和ViewModel之间的耦合，使得代码更加可维护和可测试。
.NET MAUI是如何进行将View和ViewModel双向绑定的呢？

二、解决方案

1、视图–数据模型绑定：定义ViewModels，视图层通过Binding属性绑定ViewModels；
2、数据模型–视图绑定：ViewModels属性发生改变，需要通知View进行更新，通知采用观察者模式，更新View采用委托Invoke。
听起来很复杂对不对？其实很简单。

三、软件开发（源码）

3.1 创建模型

文件名：MO1002AddViewModel.cs
位置：ViewModels
备注：集合一定要定义成 ObservableCollection，不要使用List，否则无法实现MVVM，ObservableCollection实现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; // 业务工厂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>/// 构造函数/// </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();//业务工厂初始化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页面用，根据key获取value/// 备注：此方法不推荐，gyc建议服务端【联表查询】返回合适（有value）的数据对象，现在服务端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="业务工厂"  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="确认"  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构造函数中，进行了数据初始化。
逻辑如果要使用可以使用如下方法

var viewModel = BindingContext as MO1002AddViewModel;

四、项目展示

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/5557.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI守护煤矿安全生产：基于视频智能的煤矿管理系统架构解析

AI守护煤矿安全生产：基于视频智能的煤矿管理系统架构解析

前言 本文我将介绍我和我的团队自主研发设计的一款AI产品的成果展示——“基于视频AI识别技术的煤矿安全生产管理系统”。 这款产品是目前我在创业阶段和几位矿业大学的博士共同从架构设计、开发到交付的全过程中首次在博客频道发布, 我之前一直想写但没有机会来整理这套系统的…
阅读更多...
.NET开源的处理分布式事务的解决方案

.NET开源的处理分布式事务的解决方案

前言 在分布式系统中&#xff0c;由于各个系统服务之间的独立性和网络通信的不确定性&#xff0c;要确保跨系统的事务操作的最终一致性是一项重大的挑战。今天给大家推荐一个.NET开源的处理分布式事务的解决方案基于 .NET Standard 的 C# 库&#xff1a;CAP。 CAP项目介绍 C…
阅读更多...
计算机网络 （52）秘钥分配

计算机网络 （52）秘钥分配

一、重要性 在计算机网络中&#xff0c;密钥分配是密钥管理中的一个核心问题。由于密码算法通常是公开的&#xff0c;因此网络的安全性主要依赖于密钥的安全保护。密钥分配的目的是确保密钥在传输过程中不被窃取或篡改&#xff0c;同时确保只有合法的用户才能获得密钥。 二、方…
阅读更多...
Open3D计算点云粗糙度（方法一）【2025最新版】

Open3D计算点云粗糙度（方法一）【2025最新版】

目录 一、Roughness二、代码实现三、结果展示博客长期更新，本文最近更新时间为：2025年1月18日。 一、Roughness 通过菜单栏的Tools > Other > Roughness找到该功能。 这个工具可以估计点云的“粗糙度”。 选择一个或几个点云，然后启动这个工具。 CloudCompare只会询问…
阅读更多...
DDD - 整洁架构_解决技术设计困局

DDD - 整洁架构_解决技术设计困局

文章目录 Pre如何落地 DDD底层技术的更迭 整洁架构的设计主动适配器/北向适配器被动适配器/南向适配器 整洁架构的落地总结 Pre DDD - 软件退化原因及案例分析 DDD - 如何运用 DDD 进行软件设计 DDD - 如何运用 DDD 进行数据库设计 DDD - 服务、实体与值对象的两种设计思路…
阅读更多...
一个软件分发和下载的网站源码，带多套模板

一个软件分发和下载的网站源码，带多套模板

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程 代码下载&#xff1a;百度网盘
阅读更多...
OSPF协议部分解读

OSPF协议部分解读

多年前所写, 主要是对OSPF的RFC协议标准的解读. 工作中接触网络路由协议OSPF的同学可以参考参考.如有理解错误请谅解, 不过可以肯定的是一定有理解错误的地方的. RFC2328 1.1小节 1. OSPF routes IP packets based solely on the destination IPaddress found in the IP pac…
阅读更多...
安装wxFormBuilder

安装wxFormBuilder

1. 网址&#xff1a;GitHub - wxFormBuilder/wxFormBuilder: A wxWidgets GUI Builder 2. 安装MSYS2 MSYS2可以在GitHub的内容中找到&#xff0c;这个版本是32位64位的 3. 在程序中打开MINGW64 shell 4. 在MSYS2 MINGW64 shell中输入 pacman -Syu pacman -S ${MINGW_PACKAGE…
阅读更多...
基于微信小程序高校订餐系统的设计与开发ssm+论文源码调试讲解

基于微信小程序高校订餐系统的设计与开发ssm+论文源码调试讲解

第4章 系统设计 一个成功设计的系统在内容上必定是丰富的&#xff0c;在系统外观或系统功能上必定是对用户友好的。所以为了提升系统的价值&#xff0c;吸引更多的访问者访问系统&#xff0c;以及让来访用户可以花费更多时间停留在系统上&#xff0c;则表明该系统设计得比较专…
阅读更多...
C#中的语句

C#中的语句

C#提供了各式各样的语句&#xff0c;大多数是由C和C发展而来&#xff0c;当然&#xff0c;在C#中做了相应修改。语句和表达式一样&#xff0c;都是C#程序的基本组成部分&#xff0c;在本文我们来一起学习C#语句。 1.语句 语句是构造所有C#程序的过程构造块。在语句中可以声明…
阅读更多...
微服务学习-Gateway 统一微服务入口

微服务学习-Gateway 统一微服务入口

1. 微服务为什么需要 API 网关&#xff1f; 1.1. 在微服务架构中&#xff0c;通常一个系统会被拆分为多个微服务&#xff0c;面对多个微服务客户端应该如何去调用呢&#xff1f; 如果根据每个微服务的地址发起调用&#xff0c;存在如下问题&#xff1a; 客户端多次请求不同的…
阅读更多...
linux-FTP服务配置与应用

linux-FTP服务配置与应用

也许你对FTP不陌生&#xff0c;但是你是否了解FTP到底是个什么玩意&#xff1f; FTP 是File Transfer Protocol&#xff08;文件传输协议&#xff09;的英文简称&#xff0c;而中文简称为 “文传协议” 用于Internet上的控制文件的双向传输。同时&#xff0c;它也是一个应用程序…
阅读更多...
代码随想录算法训练营第 14 天（树2）| 226.翻转二叉树、101. 对称二叉树、104.二叉树的最大深度、111.二叉树的最小深度

代码随想录算法训练营第 14 天（树2）| 226.翻转二叉树、101. 对称二叉树、104.二叉树的最大深度、111.二叉树的最小深度

一、#226.翻转二叉树 题目&#xff1a;https://leetcode.cn/problems/invert-binary-tree/ 视频&#xff1a;https://www.bilibili.com/video/BV1sP4y1f7q7 讲解&#xff1a;https://programmercarl.com/0226.%E7%BF%BB%E8%BD%AC%E4%BA%8C%E5%8F%89%E6%A0%91.html 注意这里交换…
阅读更多...
基于微信小程序的科创微应用平台设计与实现（LW+源码+讲解）

基于微信小程序的科创微应用平台设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…
阅读更多...
【MySQL】数据库基础知识

【MySQL】数据库基础知识

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;【MySQL】数据库基础知识 发布时间&#xff1a;2025.1.21 隶属专栏&#xff1a;MySQL 目录 什么是数据库为什么要有数据库数据库的概念 主流数据库mysql的安装mysql登录使用一下mysql显示数据库内容创建一个数据库创…
阅读更多...
STM32学习9---EXIT外部中断（理论）

STM32学习9---EXIT外部中断（理论）

本文参考江科大和其他博主&#xff0c;侵删&#xff01; 中断系统是管理和执行中断的逻辑结构 &#xff0c;外部中断是产生中断的外设之一。 一、STM32中断 1、中断基本介绍 68个可屏蔽中断通道&#xff08;中断源&#xff09;&#xff0c;包含EXTI外部、TIM定时器、ADC模数…
阅读更多...
步入响应式编程篇（二）之Reactor API

步入响应式编程篇（二）之Reactor API

步入响应式编程篇&#xff08;二&#xff09;之Reactor API 前言回顾响应式编程Reactor API的使用Stream引入依赖Reactor API的使用流源头的创建 reactor api的背压模式发布者与订阅者使用的线程查看弹珠图查看形成新流的日志 前言 对于响应式编程的基于概念&#xff0c;以及J…
阅读更多...
66，【6】buuctf web [HarekazeCTF2019]Avatar Uploader 1

66，【6】buuctf web [HarekazeCTF2019]Avatar Uploader 1

进入靶场 习惯性输入admin 还想用桌面上的123.png 发现不行 看看给的源码 <?php // 关闭错误报告&#xff0c;可能会隐藏一些错误信息&#xff0c;在开发阶段可考虑开启&#xff08;例如 error_reporting(E_ALL)&#xff09; error_reporting(0); // 引入配置文件&#x…
阅读更多...
FortiGate配置远程拨号VPN

FortiGate配置远程拨号VPN

我们前面介绍了FortiGate如何配置IPsec VPN的两种类型&#xff1a;站到站&#xff08;卷土重来&#xff01;这次终于把FortiGate的IPsec VPN配置成功了&#xff01;&#xff09;和Hub-and-Spoke&#xff08;漂亮&#xff01;FortiGate配置Hub-Spoke类型的IPsec VPN竟然是Full-M…
阅读更多...
linux下springboot项目nohup日志或tomcat日志切割处理方案

linux下springboot项目nohup日志或tomcat日志切割处理方案

目录 1. 配置流程 2. 配置说明 其他配置选项&#xff1a; 3. 测试执行 4. 手动执行 https://juejin.cn/post/7081890486453010469 通常情况下&#xff0c;我们的springboot项目部署到linux服务器中&#xff0c;通过nohup java -jar xxx.jar &指令来进行后台运行我们…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023