文章介绍了V-Control组件库，这是一个为.NET MAUI设计的UI组件库，提供多种开箱即用的控件，方便快速开发移动应用。作者在仓库建立一年零八个月后决定将其开源，旨在展示.NET MAUI作为生产力工具的可行性，并提供了安装和使用方法。

从场景到笔记，或者说从模板到实例，我们需要映射，例如从笔记片段菜单中选择一个片段添加，那么需要从笔记片段仓库实体（NoteSegmentStore）映射到笔记片段实体（NoteSegment）或者，在编辑场景中，映射到笔记片段模板实体（NoteSegmentTemplate）。在该项目MatoProductivityEntityFrameworkCoreModule.cs 中，将注册上下文对象，并在程序初始化运行迁移，此时将在设备上生成。可在程序启动时，访问数据库，并初始化种子数据。

有人说现在记事类app这么多，市场这么卷，为什么还想做一个笔记类App？一来，去年小孩刚出生，需要一个可以记录喂奶时间的app，发现市面上没有一款app能够在两步内简单记录一个时间，可能iOS可以通过备忘录配合捷径做到快速记录，但是安卓上就没有类似的app。二是，自去年做的音乐播放器以来，很长一段时间我在博客上的XF，MAUI都是在介绍局部的功能，[MAUI 项目实战]专题也很长没更新了，这次通过笔记类App做一次完整项目，包括如何上架MAUI应用等内容一并更新了。

其它的工具插件可以单独获取。在OnAfterRenderAsync中调用初始化函数，并订阅OnSubmitting和OnInited事件，以便在提交事件触发时保存，以及文本状态变更时重新渲染。在wwwroot创建editorjs_index.html文件，并在body中引入editorjs.umd.js和各插件js文件。我们先要获取web应用的资源文件（js，css等），以便MAUI的视图呈现标准的Web UI。在script代码段中，创建LoadContent函数，用于加载EditorJs的初始内容。

的CodeBehind中，创建OnCanvasViewPaintSurface，通过给定起始角度为正上方，扫描角度为360对于100%进度，通过插值计算出当前进度对应的扫描角度，绘制出进度条。“三连按钮”是一组按钮，轻击时当做普通状态按钮使用，当长按 2 秒钟后，转为三连模式，可以控制并显示进度，并在进度完成时弹出一些泡泡。在本项目中，需要监听长按动作，当“三连按钮”长按2秒后，转为三连模式，此时需要监听手指释放情况，当时长不足时取消三连。当按钮被点击时此Timer会开。这些按钮用svg格式在html中。

地图组件在手机App中常用地理相关业务，如查看线下门店，设置导航，或选取地址等。是一个较为常见的组件。在.NET MAUI 中，有两种方案可以集成高德地图，一种是使用原生库绑定。但这种方案需要大量平台原生开发的知识，而且需要对每一个平台进行适配。在这里我介绍第二种方案：.NET MAUI Blazor + 高德地图JS API 2.0 库的实现。JS API 2.0 是高德开放平台基于WebGL的地图组件，可以将高德地图模块集成到.NET MAUI Blazor中的BlazorWebView控件。

在 Visual Studio Code 中，按 F5 键或单击“运行”>“启动调试”以调试 .NET MAUI 应用。在 macOS 上，建议的 Android SDK 目录值为 $HOME/Library/Android/sdk。此时已可以真机调试 Android 应用，如果真机调试不方便，我们需要安装 Android 模拟器。另外可以通过切换调试目标中的菜单，查看可用的镜像，选择一个镜像，或创建一个新的镜像。在 Visual Studio Code 的资源管理器中，打开项目sln文件，

每个BlazorWebView控件包含根组件（RootComponent）定义，ComponentType是在应用程序启动时加载页面时的类型，该类型需要继承自Microsoft.AspNetCore.Components.IComponent，由于我们的导航是由MAUI处理的，因此我们不需要使用Blazor路由，直接使用Razor组件。开发应用需要一个独立的host项目。中引入，还有一种是使用并置的js文件，这种方式是所谓的"CodeBehind"，因为更利于组织代码，这里我们使用并置的js文件。

拖拽控件悬停在当前控件上方时，将IsBeingDraggedOver设置为true，通知当前控件正在有拖拽控件悬停在其上方，同时在服务列表中寻找当前正在被拖拽的服务，将DropPlaceHolderItem设置为当前控件。当以比较快的速度，拖拽Tile经过较多的位置时，后面的Tile会短暂地替代原先的位置，导致拖拽中的Tile不在期望的Tile上方，而拖拽中的Tile与错误的Tile产生了交叠从而触发DraggedOver事件，导致错乱。其是在松开手指之后才向列表提交条目位置变更的命令。

NET MAUI 中提供了拖放(drag-drop)手势识别器，允许用户通过拖动手势来移动控件。在这篇文章中，我们将学习如何使用拖放手势识别器来实现可拖拽排序列表。在本例中，列表中显示不同大小的磁贴（Tile）并且可以拖拽排序。使用.NET MAU实现跨平台支持，本项目可运行于Android、iOS平台。

谷歌在2021年5月份推出的Android 12给我们带来了新的UI设计规范Material You，你是否已经体验到了Material You设计的魅力了呢？在原生主屏幕启动器中，有一个时钟小部件。这个小部件可以选择表盘风格。图：Android 12的时钟小部件今天挑战在中实现这个Material You风格时钟。

Maxiumum：最大值Minimum：最小值Progress：当前进度AnimationLength：动画时长BorderWidth：描边宽度LabelContent：标签内容ContainerColor：容器颜色，即进度条的背景色ProgressColor：进度条颜色set;set;set;set;set;set;set;set;以及ValueChange事件，此事件用于在进度值改变时触发。

富文本编辑器是一种所见即所得(what you see is what you get 简称 WYSIWYG)文本样式编辑器，用户在编辑器中输入内容和所做的样式修改，都会直接反映在编辑器中。在Web端常见的有Quill、TinyMCE这些开源免费的富文本编辑器，而目前.NET MAUI方面没有类似的富文本编辑器可以免费使用。使用.NET MAUI实现一个富文本编辑器并不难，今天就来写一个

定义可以监听的手势类别，分别是按下、移动、抬起、取消、进入、退出Entered,Pressed,Moved,Released,Exited,Cancelled添加手势监听器TouchRecognizer，它将提供一个事件OnTouchActionInvoked，用触发手势动作。EventArg类TouchActionEventArgs，用于传递手势动作的参数get;get;get;get;

-> 今天来说说怎样在.NET MAUI 中制作一个灵动的类标签页控件，这类控件常用于页面中多个子页面的导航功能。比如在手机版的Chrome中，当用户在网页中下拉时将出现“新建标签页”，“刷新”，“关闭标签页”三个选项，通过不间断的横向手势滑动，可以在这三个选项之间切换。浏览网页常用选项融入到了原“下拉刷新”交互中，对比传统交互方式它更显便捷和流畅，根据Steve Krug之《Don't Make Me Think》的核心思想，用户无需思考点击次序，只需要使用基础动作就能完成交互。

Cover Flow是iTunes和Finder中的一个视图选项，允许用户使用水平滚动的图像查看他们的音乐库或文件。Cover Flow的交互设计非常优秀：通过指尖滑动从堆叠的专辑库中翻动和挑选一张专辑的交互方式不仅有趣，而且在有限的屏幕空间内，展现了更多的专辑封面。那个是乔布斯时代的苹果——使事情变得简单和有趣。最近我很怀念这个功能，但由于我手头上已经没有任何一台设备能访问这个功能了。于是在.NET MAUI中复刻了Cover flow

首先用控件模板定义博客条目的外观，“博客条目”是包含博客标题，内容，以及发布时间等信息的卡片，视觉上呈现圆角矩形的白色不透明卡片效果。博客条目控件是一个基于ContentView控件在页面的资源中，添加如下两个ControlTemplate模板，分别用于手机设备和桌面设备。BlogCardViewPhone用于博客条目在手机设备中的呈现，条目菜单侧滑栏方式展开，我们配置SwipeView控件，作为卡片，用一个Frame框架包裹其内容。

App之间的多任务切换相信你们都很熟悉。苹果设备从iOS9开始使用水平排列的叠层卡片来展现多任务，这个设计利用屏幕深度（z方向）和水平空间（x轴方向）的平顺结合，在有限的屏幕空间内，展现了更多的卡片，滑动屏幕时，每一个卡片在屏幕中央的时候也能得到大面积的展示。今天我们在.NET MAUI 中实现这个优秀交互效果。

由此可以无限的拨动唱盘实现连续切歌的效果。用当前唱盘的“瞬移”，看起来像唱盘被影子唱盘替换掉了，但是在屏幕中心活动的拖拽物，一直是真正的那个控件。结合上一小节写的三个PitGrid，此时拖拽唱盘，并且在拖拽开始，进入pit，离开pit，释放时，分别触发Start，In，Out，Over四个状态事件。此时已经实现了拖拽唱盘的基本功能，但是在释放唱盘时，影子唱盘并没有如预期那样移动到MiddlePit的中心点。注意，当音乐暂停后，停止旋转动画，当音乐恢复播放时，转盘应从之前停止的角度开始启动旋转动画。

在进入功能区域时，TalkBox的颜色，偏移量和宽度都会发生变化，创建一个复合动画TalkBoxAnimations，用于触发TalkBox的动画效果。此时应该是可以拖动，并且在拖拽开始，进入pit，离开pit，释放时，分别触发Start，In，Out，Over四个状态。Codebeind代码中，配置Active和DeActive方法，用于激活和取消激活功能区域按钮的样式。创建一个用于显示功能区域和TalkBox的渐变动画，用于在拖拽开始和结束时，显示和隐藏这两个控件。是一个带有按住说话的按钮。