随笔分类 - .NET MAUI
摘要:
之前写过挺多的MAUI Sample,其中有很多代码可以打包成组件,当组件完善到一定程度,我会把控件封装起来放到控件库中。 今天,在这个仓库建立一年零八个月后,我觉得可以考虑将其作为开源库发布。 有很多网友在观望.NET MAUI,犹豫是否可以拿来作为有生产力的跨平台移动端开发工具,此时我想告诉大家
阅读全文
![开箱即用的.NET MAUI组件库 V-Control 发布了!](https://img2024.cnblogs.com/blog/644861/202502/644861-20250206180421213-1451897945.png)
摘要:
@目录Sqlite配置创建实体笔记实体类笔记分组实体笔记片段实体笔记片段负载实体笔记片段仓库实体笔记模板(场景)实体笔记片段模板实体笔记片段模板负载实体配置EF创建映射迁移和种子数据项目地址 Sqlite配置 应用程序里使用Sqlite作为数据库,使用EntityFramworkCore作为ORM,
阅读全文
![[MAUI 项目实战] 笔记App(二):数据库设计](https://img2024.cnblogs.com/blog/644861/202407/644861-20240719105027099-869467923.png)
摘要:
@目录前言软件规格说明主要功能运行环境开源组件库设备权限第三方服务使用介绍场景列表页从场景创建笔记编辑场景新增场景片段编辑场景片段删除场景片段删除场景笔记列表页创建新笔记编辑笔记新增笔记片段编辑笔记片段删除笔记片段删除笔记统计其它设置PIN到快捷方式换肤功能程序设计框架定义核心类项目地址 系列文章:
阅读全文
![[MAUI 项目实战] 笔记App(一):介绍与程序设计](https://img2024.cnblogs.com/blog/644861/202407/644861-20240718163624996-687589497.png)
摘要:
@目录获取资源从源码构建从CDN获取获取扩展插件创建项目创建控件创建Blazor组件初始化保存销毁编写渲染逻辑实现只读/编辑功能切换模式获取只读模式状态响应切换事件实现明/暗主题切换项目地址 Editor.js 是一个基于 Web 的所见即所得富文本编辑器,它由CodeX团队开发。之前写过一篇博文专
阅读全文
![[MAUI]集成富文本编辑器Editor.js至.NET MAUI Blazor项目](https://img2024.cnblogs.com/blog/644861/202404/644861-20240413234952835-1300934021.png)
摘要:
@目录创建弧形进度条绘制弧准备物料创建气泡创建手势创建交互与动效项目地址 哔哩哔哩(Bilibili)中用户可以通过长按点赞键同时完成点赞、投币、收藏对UP主表示支持,后UP主多用“一键三连”向视频浏览者请求对其作品同时进行点赞、投币、收藏。 “三连按钮”是一组按钮,轻击时当做普通状态按钮使用,当长
阅读全文
![[MAUI]模仿哔哩哔哩的一键三连](https://img2024.cnblogs.com/blog/644861/202404/644861-20240403102850789-648804831.png)
摘要:
@目录前期准备:注册高德开发者并创建 key登录控制台创建 key获取 key 和密钥创建项目创建JS API Loader配置权限创建定义创建模型创建地图组件创建交互逻辑项目地址 地图组件在手机App中常用地理相关业务,如查看线下门店,设置导航,或选取地址等。是一个较为常见的组件。 在.NET M
阅读全文
![[MAUI]集成高德地图组件至.NET MAUI Blazor项目](https://img2024.cnblogs.com/blog/644861/202403/644861-20240323215624051-1853546289.png)
摘要:
@目录准备安装扩展安装 .NET安装工作负载安装 Xcode 命令行工具调试安卓应用安装 JDK安装 Android SDK安装 Android 模拟器安装模拟器安装镜像创建虚拟机同意许可条款创建 MAUI 项目调试 MAUI 应用切换调试目标参考资料 准备 一台 macOS Monterey 以上
阅读全文
![在macOS中搭建.NET MAUI开发环境](https://img2023.cnblogs.com/blog/644861/202312/644861-20231231002003948-593925986.png)
摘要:
@目录Vue在混合开发中的特点创建MAUI项目创建Vue应用使用element-ui组件库JavaScript和原生代码的交互传递根组件参数从设备调用Javascript代码从Vue页面调用原生代码读取设备信息项目地址 .NET MAUI结合Vue的混合开发可以使用更加熟悉的Vue的语法代替Blaz
阅读全文
![[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发](https://img2023.cnblogs.com/blog/644861/202310/644861-20231018171418974-1074240216.png)
摘要:
@目录创建页面元素创建可绑定对象创建绑定服务类拖拽(Drag)拖拽悬停,经过(DragOver)释放(Drop)限流(Throttle)和防抖(Debounce)项目地址 上一章我们使用拖放(drag-drop)手势识别实现了可拖拽排序列表,对于列表中的条目,完整的拖拽排序过程是: 手指触碰条目 -
阅读全文
![[MAUI]实现动态拖拽排序网格](https://img2023.cnblogs.com/blog/644861/202309/644861-20230918175702000-175290169.png)
摘要:
[toc] .NET MAUI 中提供了拖放(drag-drop)手势识别器,允许用户通过拖动手势来移动控件。在这篇文章中,我们将学习如何使用拖放手势识别器来实现可拖拽排序列表。在本例中,列表中显示不同大小的磁贴(Tile)并且可以拖拽排序。 ![在这里插入图片描述](https://img2023
阅读全文
![[MAUI]在.NET MAUI中实现可拖拽排序列表](https://img2023.cnblogs.com/blog/644861/202308/644861-20230815143212134-1937810065.png)
摘要:
@[toc] 谷歌在2021年5月份推出的Android 12给我们带来了新的UI设计规范Material You,你是否已经体验到了Material You设计的魅力了呢? 在原生主屏幕启动器中,有一个时钟小部件。这个小部件可以选择表盘风格。 > ![在这里插入图片描述](https://img2
阅读全文
![[MAUI]用纯C#代码写两个漂亮的时钟](https://img2023.cnblogs.com/blog/644861/202307/644861-20230701193425975-1605711902.png)
摘要:
@[toc] 进度条(ProgressBar)用于展示任务的进度,告知用户当前状态和预期; 滑块(Slider)通过拖动滑块在一个固定区间内进行选择数值范围。 进度条和滑块都是进度值在UI界面的映射,其中滑块可以抽象成为带控制柄(Thumb)的进度条,是界面元素和进度值的双向绑定。 在某些场景下,我
阅读全文
![[MAUI]弧形进度条与弧形滑块的交互实现](https://img2023.cnblogs.com/blog/644861/202306/644861-20230618150147085-1035080343.png)
摘要:
@[toc] 富文本编辑器是一种所见即所得(what you see is what you get 简称 WYSIWYG)文本编辑器,用户在编辑器中输入内容和所做的样式修改,都会直接反映在编辑器中。 在Web端常见的有[Quill](https://github.com/quilljs/quill
阅读全文
![[MAUI]写一个跨平台富文本编辑器](https://img2023.cnblogs.com/blog/644861/202306/644861-20230611231355469-1802628185.png)
摘要:
@[toc] 今天来谈一谈MAUI跨平台技术的核心概念——跨平台控件。 无论是MAUI,Xamarin.Forms还是其它的跨平台技术,他们是多个不同平台功能的抽象层,利用通用的方法实现所谓“一次开发,处处运行”。 跨平台框架需要考虑通用方法在各平台的兼容,但由于各原生平台(官方将原生称为本机)功能
阅读全文
![[MAUI程序设计] 用Handler实现自定义跨平台控件](https://img2023.cnblogs.com/blog/644861/202306/644861-20230604183648801-42264191.png)
摘要:
今天来说说怎样在.NET MAUI 中制作一个灵动的类标签页控件,这类控件常用于页面中多个子页面的导航功能。比如在手机版的Chrome中,当用户在网页中下拉时将出现“新建标签页”,“刷新”,“关闭标签页”三个选项,通过不间断的横向手势滑动,可以在这三个选项之间切换。浏览网页常用选项融入到了原“下拉刷新”交互中,对比传统交互方式它更显便捷和流畅,根据Steve Krug之《Don't Make Me Think》的核心思想,用户无需思考点击次序,只需要使用基础动作就能完成交互。
阅读全文
![[MAUI]模仿Chrome下拉标签页的交互实现](https://img2023.cnblogs.com/blog/644861/202305/644861-20230528175918975-910859104.png)
摘要:
Cover Flow是iTunes和Finder中的一个视图选项,允许用户使用水平滚动的图像查看他们的音乐库或文件。Cover Flow的交互设计非常优秀:通过指尖滑动从堆叠的专辑库中翻动和挑选一张专辑的交互方式不仅有趣,而且在有限的屏幕空间内,展现了更多的专辑封面。那个是乔布斯时代的苹果——使事情变得简单和有趣。最近我很怀念这个功能,但由于我手头上已经没有任何一台设备能访问这个功能了。于是在.NET MAUI中复刻了Cover Flow。
阅读全文
![[MAUI]在.NET MAUI中复刻苹果Cover Flow](https://img2023.cnblogs.com/blog/644861/202305/644861-20230521232341468-1516279050.png)
摘要:
.NET MAUI 实现界面多态有很多种方式,今天主要来说说在日常开发中常见的需求该如何应对。 需求一:在不同设备上使用不同 UI 外观 .NET MAUI是一个跨平台的UI框架,可在一个项目中开发Android、iOS、Windows、MacOS等多个平台的应用。在不同设备上我们希望应用的界面或交
阅读全文
![[MAUI程序设计]界面多态与实现](https://img2023.cnblogs.com/blog/644861/202305/644861-20230514174632528-1805866330.png)
摘要:
@ 看了上一篇博文的评论,大家对MAUI还是比较感兴趣的,非常感谢大家的关注,这个专栏我争取周更😉。 App之间的多任务切换相信你们都很熟悉。苹果设备从iOS9开始使用水平排列的叠层卡片来展现多任务 动图来自iPhone 使用手册 - 在 iPhone 上的应用之间切换 这个设计利用屏幕深度(z方
阅读全文
![[MAUI]模仿iOS多任务切换卡片滑动的交互实现](https://img2023.cnblogs.com/blog/644861/202305/644861-20230502214634695-249036145.png)
摘要:
@ 用过网易云音乐App的同学应该都比较熟悉它播放界面。 这是一个良好的交互设计,留声机的界面隐喻准确地向人们传达产品概念和使用方法:当手指左右滑动时,便模拟了更换唱盘从而导向切换歌曲的交互功能。 今天在 .NET MAUI 中我们来实现这个交互效果,先来看看效果: 使用.NET MAU实现跨平台支
阅读全文
![[MAUI]模仿网易云音乐黑胶唱片的交互实现](https://img2023.cnblogs.com/blog/644861/202304/644861-20230425085415131-2093260004.png)
摘要:
@ .NET MAUI 跨平台框架包含了识别平移手势的功能,在之前的博文[MAUI 项目实战] 手势控制音乐播放器(二): 手势交互中利用此功能实现了pan-pit拖拽系统。 简单来说就是拖拽物(pan)体到坑(pit)中,手势容器控件PanContainer描述了pan运动和pit位置的关系,并在
阅读全文
![[MAUI]模仿微信“按住-说话”的交互实现](https://img2023.cnblogs.com/blog/644861/202304/644861-20230415203038433-446673405.png)