关键词:
简介
MAUI中使用Handler体系来处理不同平台的原生控件实现, 即对应的, 如果我们想要创建控件, 只需要创建基于不同平台的Handler即可。
那么下面主要教大家如何通过创建Handler(事件处理程序)来构建自己的控件。
开始
下面, 将通过创建一个进度条控件案例, 来演示如何在MAUI项目中创建平台控件并且使用它。
假设控件包含基础的三项功能, 进度条颜色(Foreground)、进度条当前值(Value)、进度条模式(Indeterminate)
1.第一步(声明控件类)
首先, 创建MyProgressBar类, 定义对应的依赖属性
internal class MyProgressBar : View
public static readonly BindableProperty ForegroundProperty =
BindableProperty.Create(nameof(Foreground),
typeof(Color),
typeof(MyProgressBar),
Colors.Transparent);
public static readonly BindableProperty ValueProperty =
BindableProperty.Create(nameof(Value),
typeof(double),
typeof(MyProgressBar),
0.0);
public static readonly BindableProperty IndeterminateProperty =
BindableProperty.Create(nameof(Indeterminate),
typeof(bool),
typeof(MyProgressBar),
false);
public Color Foreground
get return (Color)GetValue(ForegroundProperty);
set SetValue(ForegroundProperty, value);
public double Value
get return (double)GetValue(ValueProperty);
set SetValue(ValueProperty, value);
public bool Indeterminate
get return (bool)GetValue(IndeterminateProperty);
set SetValue(IndeterminateProperty, value);
2.第二步(创建标准处理程序)
有了控件的标准属性定义之后, 接下来就是定义标准的Handler处理程序, 其中包含控件属性映射器及构造函数, 如下所示:
partial class MyProgressBarHandler
public static PropertyMapper<MyProgressBar, MyProgressBarHandler> HorizontalProgressBarMapper = new
(ViewHandler.ViewMapper)
[nameof(MyProgressBar.Value)] = MapValue,
[nameof(MyProgressBar.Foreground)] = MapForeground,
[nameof(MyProgressBar.Indeterminate)]= MapIndeterminate
;
public MyProgressBarHandler(PropertyMapper mapper)
: base(mapper)
public MyProgressBarHandler() : base(HorizontalProgressBarMapper)
3.第三步(创建平台处理程序)
在属性映射器中, 我们可以很轻松看见对应了三个属性的事件处理程序, 但是目前并没有定义它, 这意味着你需要在不同平台下分别实现对应的
三个事件处理程序, 所以很快阿, 赶紧在Platforms > Android > Controls 下定义了一个MyProgressBarHandler, 如下所示:
接着继承于ViewHandler并且与原生安卓ProgressBar关联。
using Android.Widget;
partial class MyProgressBarHandler :
ViewHandler<MyProgressBar, ProgressBar>
重写CreateNativeView(这是创建本地控件最开始的地方)
protected override ProgressBar CreateNativeView()
return new ProgressBar(Context, null, Android.Resource.Attribute.ProgressBarStyleHorizontal)
Indeterminate = true,
Max = 10000,
;
紧接着, 实现三个事件处理程序方法, MapValue、MapForeground、MapIndeterminate
static void MapValue(MyProgressBarHandler handler, MyProgressBar view)
var nativeView= handler?.NativeView;
nativeView.Progress = (int)(view.Value * Max);
static void MapForeground(MyProgressBarHandler handler, MyProgressBar view)
UpdateForeground(handler?.NativeView, view.Foreground);
static void UpdateForeground(ProgressBar nativeProgressBar, Color color)
if (color == null)
(nativeProgressBar.Indeterminate ? nativeProgressBar.IndeterminateDrawable :
nativeProgressBar.ProgressDrawable)?.ClearColorFilter();
else
var tintList = ColorStateList.ValueOf(color.ToNative());
if (nativeProgressBar.Indeterminate)
nativeProgressBar.IndeterminateTintList = tintList;
else
nativeProgressBar.ProgressTintList = tintList;
static void MapIndeterminate(MyProgressBarHandler handler, MyProgressBar view)
var nativeView= handler?.NativeView;
nativeView.Indeterminate = view.Indeterminate;
4. 对应的实现iOS平台的Handler事件处理程序, 与上步骤相同, 对于事件的处理细节则对应不同平台的逻辑处理。
partial class MyProgressBarHandler :
ViewHandler<MyProgressBar, UIProgressView>
protected override UIProgressView CreateNativeView()
return new UIProgressView(UIProgressViewStyle.Default);
static void MapValue(MyProgressBarHandler handler, MyProgressBar view)
var nativeView = handler.NativeView;
nativeView.Progress = (float)view.Value;
static void MapForeground(MyProgressBarHandler handler, MyProgressBar view)
var nativeView = handler.NativeView;
nativeView.ProgressTintColor = view.Foreground?.ToNative();
static void MapIndeterminate(MyProgressBarHandler handler, MyProgressBar view)
//...
5.打开MauiProgram文件, 添加AddHandler
public static MauiApp CreateMauiApp()
var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>()
.ConfigureFonts(fonts =>
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
)
.ConfigureMauiHandlers(handler =>
handler.AddHandler(typeof(MyProgressBar), typeof(MyProgressBarHandler));
);
return builder.Build();
6.界面中,分别声明MAUI原生控件与自定义控件
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MAUIRender.MainPage"
xmlns:my="clr-namespace:MAUIRender"
xmlns:ctor="clr-namespace:MAUIRender.Controls"
BackgroundColor="DynamicResource SecondaryColor">
<Grid>
<StackLayout>
<ProgressBar
Progress="30" ProgressColor="Red"/>
<ctor:MyProgressBar
Indeterminate="True"
Value="600" Foreground="Green" />
</StackLayout>
</Grid>
</ContentPage>
运行实际效果:
总结
通过利用Handler来处理不同平台控件的行为, 与控件本身解耦并且更加容器支持更多的平台。
[maui项目实战]手势控制音乐播放器:圆形进度条(代码片段)
...Microsoft.Maui.Graphics库。Microsoft.Maui.Graphics是一个实验性的跨平台图形库,它可以在.NETMAUI中使用。它提供了一组基本的图形元素,如矩形、圆形、线条、路径、文本和图像。它还提供了一组基本的图形操作,如填充、描... 查看详情
[maui]模仿网易云音乐黑胶唱片的交互实现(代码片段)
...们来实现这个交互效果,先来看看效果:使用.NETMAU实现跨平台支持,本项目可运行于Android、iOS平台。创建页面布局项目模拟了网易云音乐的播放主界面,可播放本地音乐文件。使用MatoMusic.Core作为播放内核,此项目对其将不再... 查看详情
[maui]开篇-初识maui(代码片段)
前言在2020年5月,微软宣布了MAUI跨平台框架,MAUI是Xamarin.Forms演变而来,这也就意味着,如果你原来具备Xamarin.Forms开发经验,你可以流畅的过渡到MAUI开发当中。原本于2021年底发布的MAUI正式版被推迟到了2022年5月底发布。现在,你目前可... 查看详情
跨平台应用开发进阶(三十一):uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗(代码片段)
...一、前言二、实现方案三、拓展阅读一、前言应用uni-app跨平台框架进行项目开发过程中,需要实现版本更新时全页面弹窗,底部导航栏无法点击的效果。但是,在uni-app中popup弹窗及对话框的遮罩层是覆盖不了原生导... 查看详情
maui为labelimage等控件添加点击事件
...篇文章,我们就通过“手势识别器”来为Label、Image等控件实现点击事件。相信看完的你,一定会有所收获!本文地址:https://www.cnblogs. 查看详情
跨平台maui通讲系列三:各式弹窗,非常漂亮
Net开发平台中WindowsForm使用MessageBox.show来显示各式弹框,那么MAUI如何显示弹框呢?.NET多平台应用UI(.NETMAUI)类Page上有三种方法,用于通过弹出窗口与用户交互:DisplayAlert和DisplayActionSheetDisplayPromptAsync。弹出窗口在每个平台上都呈... 查看详情
maui学习之路--winui3深入探讨(代码片段)
...;对Maui有了一些初步的了解。我们都知道Maui为了保持平台原生特性,所以在每一个平台都使用了平台自身的原生开发框架,如在Windows系统使用了Winui3作为UI框架,Mac平台使用了UIKit作为UI框架,( 查看详情
maui自定义绘图入门
在2022的5月份,某软正式发布了MAUI跨平台UI框架。我本来想着趁六一儿童节放假来写几篇关于MAUI入门的博客,可惜发现我不擅长写很入门的博客。再加上MAUI似乎是为了赶发布日期而发布,只能勉强说能开发了,能用了。于是我... 查看详情
maui正式版创建可跨平台的maui程序,以及有关依赖注入mvvm双向绑定的实现和演示...
前言:Maui终于在2022年8月9日推送出来了。今儿就迫不及待来把玩一下先。A、我本地已有VS2022,不过版本比较老,此处选择更新。工具->获取功能和更新里面,可以获取到新版本更新。B、最新版本是17.3.0,我... 查看详情
maui为labelimage等控件添加点击事件
...篇文章,我们就通过“手势识别器”来为Label、Image等控件实现点击事件。相信看完的你,一定会有所收获!本文地址:https://www.cnblogs.com/lesliexin/p/16433623.html二、手势识别器本文实现点击所用到识别器是:TapGes... 查看详情
maui跨平台播客应用程序(conf2021)
介绍在.NETConf2021大会上,微软展示了基于.NET6跨平台应用程序,具有ASP.NETCore、Blazor、.NETMAUI、微服务等功能。浏览由ASP.NETCore和Blazor提供支持的.NETPodcasts应用的实时运行版本:https://dotnetpodcasts.azurewebsites.net/项目体系移动端... 查看详情
做⼀个⾼德地图的ios/androidmaui控件(上)
...ld2022⼤会上正式发布了.NETMAUI,对于.NET开发者可以⽤C#完成跨平台的前端应⽤开发。对⽐起MAUI的前身Xamarin,MAUI除了可以⽤传统的原⽣开发模式外,还⽀持了Blazor的混合式开发。这也让更多⽅向的开发⼈员能进⼊到跨平台的应⽤... 查看详情
blazorhybrid/maui简介和实战
...置于.NET多平台应用UI(.NETMAUI)框架。.NETMAUI包含BlazorWebView控件,该控件运行将Razor组件呈现到嵌入式WebView中。通过结合使用.NETMAUI和Blazor,可以跨移动设备、桌面设备和Web重复使用一组WebUI 查看详情
跟我做⼀个高德地图的ios/androidmaui控件(前言)
...ld2022⼤会上正式发布了.NETMAUI,对于.NET开发者可以⽤C#完成跨平台的前端应⽤开发。对⽐起MAUI的前身Xamarin,MAUI除了可以⽤传统的原⽣开发模式外,还⽀持了Blazor的混合式开发。这也让更多⽅向的开发⼈员能进⼊到跨平台的应⽤... 查看详情
移动ui控件telerikuiforxamarin发布r22019|引入map控件
TelerikUIforXamarin是一个构建跨平台移动应用程序的原生UI。TelerikUIforXamarin使用Xamarin.Forms技术,它可以让开发人员从一个单一的共享C#代码库中创建原生的iOS、Android和WindowsPhone应用程序。不仅如此,UIforXamarin建立在iOS和Android的原生... 查看详情
maui条形码,二维码扫描功能(代码片段)
...新包ZXing.Net.Mauihttps://github.com/Redth/ZXin…提供了一个XAML的控件zxing:CameraBarcodeReaderView思路这里我们的思路是在Blazor页面通过一个模态弹窗弹出一个新的XAML页面,然后在新页面扫码结束后关闭当前页面将扫码结果带回到Blazor页... 查看详情
[maui]开篇-初识maui(代码片段)
前言在2020年5月,微软宣布了MAUI跨平台框架,MAUI是Xamarin.Forms演变而来,这也就意味着,如果你原来具备Xamarin.Forms开发经验,你可以流畅的过渡到MAUI开发当中。原本于2021年底发布的MAUI正式版被推迟到了2022年5月底发布。现在,你目前可... 查看详情
基于云原生架构构建亿级多语言电商平台设计到落地实现第一阶段
技术的变革,一定是思想先行,云原生是一种构建和运行应用程序的方法,是一套技术体系和方法论。云原生(CloudNative)是一个组合词,Cloud+Native。Cloud表示应用程序位于云中,而不是传统的数据... 查看详情