MAUI使用Maui.Graphics.Controls绘制控件详解

2024-07-30 14:34:42

简介

Microsoft.Maui.Graphics是一个完全采用C#的iOS，Android，Windows，macOS，Tizen和Linux的跨平台图形库。

对于MAUI项目当中绘制的方案是使用不同平台的控件来而非自绘。当然MAUI当中也使用了Microsoft.Maui.Graphics,

MAUI Preview9更新中, 引入了新的API能够轻松的将边框、阴影、形状添加到其中。

Microsoft.Maui.Graphics.Controls

Microsoft.Maui.Graphics.Controls是一个.NET MAUI 实验性项目,该项目通过Microsoft.Maui.Graphics库来绘制控件, 具有多种内置主题,这意味着, 您可以在你现有的MAUI项目当中使用它。

接下来, 主要讲解如何使用Microsoft.Maui.Graphics.Controls 以及如何扩展自行绘制控件。

使用Microsoft.Maui.Graphics.Controls

首先, 创建一个MAUI项目, 添加新的Nuget包源并且安装它。

确保Nuget包源的依赖版本与当前MAUI项目版本移植6.0.101-preview.10.2068

打开MauiProgram文件, 添加 ConfigureGraphicsControls

 public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                }).ConfigureGraphicsControls();

            return builder.Build();
        }

启动后,效果如下所示:

说明: 可以通过ConfigureGraphicsControls(Microsoft.Maui.Graphics.Controls.DrawableType.Fluent)参数配置控件的风格, 提供了: Cupertino, Fluent ,Material 三种选项。

绘制控件

如果你想要完全实现自定义控件或者修改控件的某些方面, 你都可以使用它来做到这一点, 下来演示如何使用该库来绘制自定义的圆形控件。

1.创建Circle类, 继承于GraphicsView, 并且重写Draw方法,绘制指定宽度颜色的圆形。

 public class Circle : Microsoft.Maui.Graphics.Controls.GraphicsView
    {
        public static readonly BindableProperty ForegroundProperty =
            BindableProperty.Create(nameof(Foreground), typeof(Color),
                typeof(Circle), null);

        public Color Foreground
        {
            get => (Color)GetValue(ForegroundProperty);
            set => SetValue(ForegroundProperty, value);
        }

        public static readonly BindableProperty SizeProperty =
            BindableProperty.Create(nameof(Size), typeof(float),
                typeof(Circle), null);

        public float Size
        {
            get { return (float)GetValue(SizeProperty); }
            set { SetValue(SizeProperty, value); }
        }

        public override void Draw(ICanvas canvas, RectangleF dirtyRect)
        {
            base.Draw(canvas, dirtyRect);

            canvas.SaveState();

            canvas.FillColor = Foreground;

            var x = dirtyRect.X;
            var y = dirtyRect.Y;

            canvas.FillEllipse(x, y, Size, Size);

            canvas.RestoreState();
        }
    }

2.XAML中声明控件,设置指定大小及颜色

<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>
            <ctor:Circle Size="50" Foreground="Blue"/>
        </StackLayout>
    </Grid>
</ContentPage>

3.启动项目,查看控件对应效果:

总结

本篇文章主要介绍如何在MAUI项目中使用Microsoft.Maui.Graphics.Controls, 以及通过它实现自定义控件的扩展功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

在.NET MAUI应用中配置应用生命周期事件

目录前言应用程序生命周期跨平台生命周期如何配置生命周期事件特定于平台的生命周期事件 Android IOS Windows 参考前言管理应用生命周期事件是开发应用程序时最常见的要求之一.同样,有必要在跨平台应用程序(如 .NET MAUI应用)中处理应用生命周期,以提高其效率.在这篇博客中,我将通过代码示例分享如何在 .NET MAUI 应用中配置应用生命周期事件. 应用程序生命周期通常,应用具有不同的生命周期或状态..NET MAUI 应用具有以下四个生命周期(执行状态): 运
MAUI项目中使用SnackBar与Toast通知功能

介绍本文中, 将介绍如何在MAUI项目当中使用SnackBar以及Toast通知功能, 通过添加 CommunityToolkit.Maui 包,来扩展MAUI功能. 首先, 创建MAUI项目, 并且安装 CommunityToolkit.Maui: <ItemGroup> <PackageReference Include="CommunityToolkit.Maui" Version="1.0.0-pre6" /> </ItemG
MAUI中实现构建跨平台原生控件

简介 MAUI中使用Handler体系来处理不同平台的原生控件实现, 即对应的, 如果我们想要创建控件, 只需要创建基于不同平台的Handler即可. 那么下面主要教大家如何通过创建Handler(事件处理程序)来构建自己的控件. 开始下面, 将通过创建一个进度条控件案例, 来演示如何在MAUI项目中创建平台控件并且使用它. 假设控件包含基础的三项功能, 进度条颜色(Foreground).进度条当前值(Value).进度条模式(Indeterminate) 1.第一步(声明控件类) 首先,
.NET MAUI项目中创建超链接

.NET MAUI Preview 13预览版中,.NET MAUI 支持带标签控件的格式化文本. 标签中的格式化文本标签是显示带或不带文本环绕的文本的视图.使用格式化文本功能(现在位于单个标签中),您可以使用不同的 span 元素为每个设置选择多个选项.例如,您可以对单个标签中的单词应用单独的颜色.这将使标签更具装饰性.Span 元素支持以下选项: CharacterSpacing FontAttributes FontFamily FontSize TextColor TextTransf
.NET跨平台应用MAUI介绍

您可以使用 .NET 构建任何内容.这是数百万开发人员选择 .NET 作为其职业生涯的平台,以及公司为其业务进行投资的主要原因之一.通过 .NET 5,我们开始了统一 .NET 平台的旅程,将 .NET Core 和 Mono/Xamarin 整合在一个基类库 (BCL) 和工具链 (SDK) 中. 当我们考虑在统一的 .NET 中构建设备应用程序的外观时,我们看到许多设备跨多个平台使用,从 Android 和 iOS 到 Windows 和 macOS.为了满足这一需求,我们很高兴地宣布一个新
Xamarin渲染器移植到.NET MAUI项目中

简介众所周知, .NET MAUI使用的是Handler处理程序, 而Xamarin使用的则是Render渲染器模式.尽管MAUI中使用了新的渲染模式, 但是仍然Xamarin中的支持Render渲染器, 这意味着如果你的项目是从Xamarin移植到MAUI当中, 大部分代码能够可以重用, 本篇文章介绍如何将Xamarin 渲染器(Render)移植到.NET MAUI项目当中. 先决条件为了还原本次测试环境, 下面分别列举了本次测试代码移植的开发测试环境, 如下所示: IDE: Visua
MAUI使用Maui.Graphics.Controls绘制控件详解

目录简介 Microsoft.Maui.Graphics.Controls 使用Microsoft.Maui.Graphics.Controls 绘制控件总结简介 Microsoft.Maui.Graphics是一个完全采用C#的iOS,Android,Windows,macOS,Tizen和Linux的跨平台图形库. 对于MAUI项目当中绘制的方案是使用不同平台的控件来而非自绘. 当然MAUI当中也使用了Microsoft.Maui.Graphics, MAUI Preview9更新中,
Android自定义view实现滚动选择控件详解

目录前言需求编写代码主要问题前言上篇文章通过一个有header和footer的滚动控件(Viewgroup)学了下MeasureSpec.onMeasure以及onLayout,接下来就用一个滚动选择的控件(View)来学一下onDraw的使用,并且了解下在XML自定义控件参数. 需求这里就是一个滚动选择文字的控件,还是挺常见的,之前用别人的,现在选择手撕一个,核心思想如下: 1.有三层不同大小及透明度的选项,选中项放在中间 2.接受一个列表的数据,静态时显示三个值,滚动时显示四个
Android Tab 控件详解及实例

Android Tab 控件详解及实例在桌面应用中Tab控件使用得非常普遍,那么我们经常在Android中也见到以Tab进行布局的客户端.那么Android中的Tab是如何使用的呢? 1.Activity package com.wicresoft.activity; import com.wicresoft.myandroid.R; import android.app.TabActivity; import android.os.Bundle; import android.util.Lo
Android ToolBar控件详解及实例

ToolBar控件详解在Activity中添加ToolBar 1.添加库 dependencies { ... compile "com.android.support:appcompat-v7:18.0.+" } 2.Activity要继承AppCompatActivity 3.设置主题使用ToolBar,要将系统默认的ActionBar隐藏掉 <application android:theme="@style/Theme.AppCompat.Light.NoA
C# 开发step步骤条控件详解

现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public class StepEntity { public string Id { get; set; } public string StepName { get; set; } public int StepOrder { get; set; } public eumStepState StepState
WPF自定义选择年月控件详解

本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下封装了一个选择年月的控件,XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Client.DateMonthPicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micr
bootstrap daterangepicker双日历时间段选择控件详解

双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定.我们项目里用到的Bootstrap版本是2.3.1,所以我把daterangepicker与Bootstrap-2.3.1进行了整合. 一.需要引入的css与js <link href="bootstrap.min.css" rel="stylesheet&q
C# winform自定义翻页控件详解

C# winform中自定义的翻页控件,自己设计,供大家参考,具体内容如下 1.主要是使用控件绑定点击事件用到的控件分别为picturebox lable 上一页pbPage_Prev 下一页 pbPage_Next 首页 pbPage_Begin 尾页pbPage_End 是picturebox控件加背景图 "第页/ 共页" 是一个lable "labPageInfo" 在lable上面加了一个隐藏的textbox 控件
Android实现自定义轮播图片控件详解

首先上效果图实现原理要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 一.创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import andro
Android使用属性动画如何自定义倒计时控件详解

为什么要引入属性动画? Android之前的补间动画机制其实还算是比较健全的,在android.view.animation包下面有好多的类可以供我们操作,来完成一系列的动画效果,比如说对View进行移动.缩放.旋转和淡入淡出,并且我们还可以借助AnimationSet来将这些动画效果组合起来使用,除此之外还可以通过配置Interpolator来控制动画的播放速度等等等等.那么这里大家可能要产生疑问了,既然之前的动画机制已经这么健全了,为什么还要引入属性动画呢? 其实上面所谓的健全都是相对的,如

MAUI使用Maui.Graphics.Controls绘制控件详解

目录

简介

Microsoft.Maui.Graphics.Controls

使用Microsoft.Maui.Graphics.Controls

绘制控件

总结

相关推荐

随机推荐