jevonsflash的专栏

其它的工具插件可以单独获取。在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的渐变动画，用于在拖拽开始和结束时，显示和隐藏这两个控件。是一个带有按住说话的按钮。

这是一篇系列博文。请关注我，学习更多.NET MAUI开发知识！在之前的博文中提到这个项目，它是为音乐播放器专门开发的基于手势控制的UI界面。此UI界面可以让用户在不看屏幕的情况下，通过手势来控制音乐播放器的各种操作，如播放、暂停、下一首、上一首。手势来控制的交互方式适合不方便看手机屏幕时简单的音乐播放需求，在驾车、运动等场景下有较好的用户体验。

我们需要一个拉扯回弹的效果，可以通过自定义缓动函数实现。我用python拟合了一个适合拖拽物回弹的曲线。模拟一种弹性拉扯的效果。

在项目中添加SkiaSharp绘制功能的引用以及。

pit很简单，是一个包含了名称属性的控件，这个名称属性是用来标识pit的。定义一个拖拽物，和它拖拽的目标，拖拽物可以理解为一个平底锅（pan），拖拽目标是一个坑（pit），当拖拽物进入坑时，拖拽物就会被吸附在坑里。这里用Grid作为pit控件基类型，因为Grid可以包含子控件，我们可以在pit控件中添加子控件，比如一个图片，一个文字，这样就可以让pit控件更加丰富。，这个AbsoluteLayout类型的容器控件，内包含一系列控件作为pit，这些pit集合将作为平移手势容器的判断依据。

UI设计的本质是对于产品的理解在界面中多种形式的映射，当需求和定位不同时，对相同的功能表达出了不同的界面和交互方式。作为播放器，界面可以是千差万别的。《番茄播放器》的iOS平台上我开发了传统版本，和基于手势播放的版本。它们界面不同，但用的同一个播放内核。作为播放内核项目，在MatoMusic.Core的工作已经结束。本系列博文重点还是在播放器思路的解读，关于MAUI动画交互，我打算有时间另外写博客（这里给自己挖个坑）。

曲目排序，原理是通过交换位置实现的，iOS和Android平台都有自己的可排序列表控件，在对选中的条目进行排序（往往是提起条目-拖拽-释放）的过程中，触发事件往往提供当前条目。在传统播放器随机播放时，如果下一曲不是我想听的，我仍然想听上一曲，由于上一曲按钮是随机触发的时机，你可能找不到它了，不得不再音乐列表再搜索它。播放控制类，用于当前平台播放器对象的操作，对当前所播放曲目的暂停/播放，下一首/上一首，快进快退（寻迹），随机、单曲模式等功能的控制。同样，用到了排序逻辑，再将他的排序（

为什么想起来这个项目了呢？这是一个Windows Phone 8的老项目，2014年用作为兴趣写了个叫“番茄播放器”的App，顺便提高编程技能。这个项目的架构历经多次迁移，从WP8到UWP再到Xamarin.Forms。去年底随着MAUI的正式发布，又尝试把它迁移到MAUI上来。

很开心，终于到了创建页面的时候了！我们需要两个页面MainPage 主页面 MusicItemPage 条目编辑页面编写主页面新建一个MainPageViewModel.cs，作为MainPage的ViewModel层 public class MainPageViewModel : ViewModelBase { private readonly IRepository<Song, long> songRepository; .

去年12月份做了MAUI混合开发框架的调研，想起来文章里给自己挖了个坑，要教大家如何把Abp移植进Maui项目，今天来填坑。熟悉Abp的同学都知道，Abp 是一套强大的应用程序设计时框架（俗称脚手架），新版本的Abp vNext为微服务和网络优化的更多，然而本地开发经典Abp已经够用，而且官方没有停止维护，因此使用这个框架MAUI则是跨平台的应用程序抽象层，强大的运行时框架 + 强大的设计时框架 ， 我说这是宇宙最强大跨平台开发框架，不为过吧？😁搭建MAUI项目请注意：本文发布时，MAUI处

因为我们要做一个数据持久化型的小应用，所以在完成Abp功能的集成后，我们需要做数据库相关的配置工作配置数据库在MauiBoilerplate.Core项目中，添加两个实体类：我们简单的写一个歌曲（song）的实体类其中包含了歌曲标题（MusicTitle），艺术家（Artist），专辑（Album），时长（Duration）以及发售日期（ReleaseDate） public class Song : FullAuditedEntity<long> { .

这是一个简单的文件导航Demo，可以制作不限于本地的文件资源管理器，来替代Windows庞大而臃肿的explorer.exe，也可以制作网盘客户端，ftp工具等面向线上的文件管理工具。WinUI3是最新的微软桌面开发框架， 这个项目的代码也可以轻松改写成Wpf或者UWP应用。

闲来无事开发了个日期选择控件，感兴趣的同学前往：https://github.com/MatoApps/Mato.DatePickerMato.DatePicker说明这是一个带有农历日历的日期选择Xamarin控件 可以指定初始日期 多选和单选日期引用PCL：https://www.nuget.org/packages/Mato.DatePicker.PCL/ A...

在MAUI微软的官方方案是使用Blazor开发，但是当前市场大多数的Web项目使用Vue，React等技术构建，如果我们没法绕过已经积累的技术，用Blazor重写整个项目并不现实。Vue是当前流行的web框架， 简单来说是一套模板引擎，利用“模板”和“绑定”两大特性实现web页面mvvm模式开发。利用.NET MAUI框架可以将Vue应用嵌入到Web容器中。可以实现跨平台的混合开发。例如我在某医疗行业项目中，已经用这个混合开发的方式生成应用，Vue代码不需要做什么改动，就能跨平台运行：如果你

混合开发的概念是相对与原生开发来说的：App不直接运行原生程序，而是在原生程序中运行一个Web程序，原生程序中包含Web运行时，用于承载Web页面。暂且将原生应用称之为Web容器，Web容器应该能让JavaScript代码与原生平台的代码交互，互相调用，同时为上层提供交互逻辑，例如导航，事件，Cookie，刷新等内容。之前使用Xamarin可以利用WebView控件做混合开发，但是到目前为止WebView功能还是比较孱弱。用WebView实现混合开发主要是通过重写各个平台的自定义呈现器（Renderer