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

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

富文本编辑器是一种所见即所得(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框架包裹其内容。

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

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

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

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

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

在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