VS2022 MAUI Hello World——Windows平台及Android平台效果

学更好的别人,

做更好的自己。

——《微卡智享》

VS2022 MAUI Hello World——Windows平台及Android平台效果_第1张图片

本文长度为2426,预计阅读7分钟

前言

微软的Visual Studio 2022在11月8号已发布,除了.Net6,改为64位的应用程序,将不再局限于主进程 devenv.exe 的 4Gb 内存限制,还有就是微软的跨平台框架MAUI来了。由于工作中出差,也是在抽空的时间赶紧下载体验了一下。

ca9f5913f9833bf1941cf93e9ff313e5.png

MAUI框架

486b0818d849731f81b54307317c2e1f.png

微卡智享

.NET MAUI全称为.NET Multi-platform App UI,是Xamarin.Forms的演进,对于Xamarin.Forms的客户,您可以把MAUI当成您现在所了解的Xamarin.Forms下一个主要版本。VS2022中.Net 6将Xamarin SDK统一到.NET中了。

.NET MAUI在.NET 6中涵括了Android,iOS,macOS和Windows。除此之外,也正在和Blazor团队一起合作,.NET 6中囊括Blazor 桌面开发。

VS2022下载地址

Visual Studio 2022 IDE - 面向软件开发人员的编程工具 (microsoft.com)

VS2022 MAUI Hello World——Windows平台及Android平台效果_第2张图片

下载过程

由于自己下的是社区版,也是因为2022刚出,所以VS2019就一直还保留着,直接就跨版本升级项目需要慢慢验证,当时做为宇宙第一IDE,占用的硬盘空间也是够大的,于是就出现了我的C盘已经变红的情况了。

VS2022 MAUI Hello World——Windows平台及Android平台效果_第3张图片

200G的C盘也只剩下17G

安装好后准备创建第一个MAUI的项目,结果在搜索栏输入后发现并没有,后来才知道,在Preview版本中才有MAUI的东西,于是就用Visual Studio Installer将VS2022改为17.1.0 Preview 1.0版本。

VS2022 MAUI Hello World——Windows平台及Android平台效果_第4张图片

安装时还有将MAUI的相关组件都打上勾

VS2022 MAUI Hello World——Windows平台及Android平台效果_第5张图片

01

创建MAUI新项目

打开VS2022后,创建新项目,在搜索栏中输入MAUI

VS2022 MAUI Hello World——Windows平台及Android平台效果_第6张图片

选择.Net MAUI App(Preview),取的项目名称为MauiHelloWorld

VS2022 MAUI Hello World——Windows平台及Android平台效果_第7张图片

新建好的MAUI项目中解决方案下是这些相关目录,其中Platforms是不同平台的配置,Resources是资源,MauiProgram是程序启动项,App是全局的加载,MainPage是Demo中的主页显示相关,将这些项展开可以看到如下:

VS2022 MAUI Hello World——Windows平台及Android平台效果_第8张图片

.xaml是布局设置,而下面的.cs是C#的代码实现。

02

修改布局

VS2022 MAUI Hello World——Windows平台及Android平台效果_第9张图片

上面说了,MainPage是整个Demo程序的显示页面,我们在它原来的基础上做个简单的修改,加入一个新的Label行,

VS2022 MAUI Hello World——Windows平台及Android平台效果_第10张图片

首先是Grid中的RowDefinitions里面多加一个Auto,然后下面Padding也多一个30

VS2022 MAUI Hello World——Windows平台及Android平台效果_第11张图片

加入了一个新的Label标签,从它位置下别的组件的Grid.Row都数字加上1,

VS2022 MAUI Hello World——Windows平台及Android平台效果_第12张图片

接下来在MainPage.xaml.cs的OnCounterClicked事件中加入刚才新加了Label,设置的数字再加10的显示。

using System;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Essentials;


namespace MauiHelloWorld
{
    public partial class MainPage : ContentPage
  {
    int count = 0;


    public MainPage()
    {
      InitializeComponent();
    }


    private void OnCounterClicked(object sender, EventArgs e)
    {
      count++;
      CounterLabel.Text = $"Current count: {count}";


      VaccaeLabel.Text = $"Vaccae HaHa: {count + 10}";


      SemanticScreenReader.Announce(CounterLabel.Text);
    }
  }
}

VS2022 MAUI Hello World——Windows平台及Android平台效果_第13张图片

在上面运行地方框架设置为.net6.0 windows,并且运行打勾项中设置Windows Machine

实现效果

Windows平台下的演示效果

Android平台

VS2022 MAUI Hello World——Windows平台及Android平台效果_第14张图片

将框架改为.net6 - android,点击Android Emulator选择Android模拟器

VS2022 MAUI Hello World——Windows平台及Android平台效果_第15张图片

由于我本身也有Android Studio,也创建过模拟器,所以界面中有显示两个,只不过默认都写着错误,点击错误进来后

VS2022 MAUI Hello World——Windows平台及Android平台效果_第16张图片

显示的主要就是没有快照的存放路径,这里修改存放路径后再保存,就进入它原本的下载,解压的过程,等结束后即可启动

VS2022 MAUI Hello World——Windows平台及Android平台效果_第17张图片

然后我就看了一下硬盘空间,无语的是C盘又给我用去了6个G,竟然不是和Android Studio共用模拟器吗?

VS2022 MAUI Hello World——Windows平台及Android平台效果_第18张图片

紧张的C盘空间

将Android的模拟器启动起来后,运行的位置就变为模拟器的名字了,这个和Android Studio倒挺像

VS2022 MAUI Hello World——Windows平台及Android平台效果_第19张图片

实现效果

4e7df132c201f760fd980305d98b1415.png

总结

刚才就是Maui框架的Hello World使用,Window平台效果要比Winform好很多,不过在Android下运行,一是启动界面那个.Net的页面加载时间感觉有点长,然后虚拟的返回按钮不起作用,看来需要写事件捕获。对于我个人来说,由于自己也是做Android的,所以Android下还是用原生的比较方便。

VS2022 MAUI Hello World——Windows平台及Android平台效果_第20张图片

4bfc09312829b6462de00b63b1b0a8a0.png

扫描二维码

获取更多精彩

微卡智享

VS2022 MAUI Hello World——Windows平台及Android平台效果_第21张图片

「 往期文章 」

Android BaseQuickAdapter3.0.4版本二级列表的使用及遇到的问题

Android Room数据库版本迁移的实战

关于Android录屏程序在Android10下的修改

你可能感兴趣的:(数据库,c#,python,java,android)