当前位置:网站首页 / MAUI / 正文

ay maui in net6 第11天 入门

时间:2022年05月24日 | 作者 : aaronyang | 分类 : MAUI | 浏览: 106次 | 评论 0

新建的vs2022 preview自带maui模板了,这里假设你是从wpf转行过来学习的,所以有些地方觉得简单的,我就不记笔记了

image.png


项目结构

image.png


====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========


AppShell.xaml是个Page类型,这里显示,内部放入了 MainPage的子内容

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MAUICH3.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MAUICH3"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

这里有个Route属性,我以为是写页面相对路径的,看来不是,后面再看看干啥用的

我尝试新建个Views文件夹,把MainPage.xaml拖进去了

image.png

这里真的等了一段时间,不知道是不是vs的问题

重启vs后,程序正常运行,还是保持原样,拖出来吧



关于程序入口,程序初始化的东西,肯定在App.xaml了,这个文件味道和wpf 一模一样吧

namespace MAUICH3;

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new AppShell();
	}
}

这里看来是设置项目启动的第一个页面的位置了。

你也可以这样启动

namespace MAUICH3;

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

        //MainPage = new AppShell();

        MainPage = new NavigationPage(new MainPage());
    }
}




MainPage.xaml的页面类型  你理解为wpf的page就行了

在运行时,类中的 MauiProgram 代码会启动应用并执行 App 类构造函数,该构造函数实例化 MainPage。 MainPage构造函数调用InitializeComponent,它初始化 XAML 文件中定义的所有对象,将它们全部连接在父子关系中,将代码中定义的事件处理程序附加到 XAML 文件中设置的事件,并将对象的结果树设置为页面的内容。


默认页面可以学到

属性

水平对齐HorizontalOptions,垂直对齐VerticalOptions

容器

HorizontalStackLayout水平对其控件 VerticalStackLayout 垂直布局控件 ,可以全局设置Spacing了,每个item的边距


ScrollView滚动容器

控件

Button的文本是Text,不再是wpf的Content,Clicked事件,不再是wpf的OnClicked

多了些SemanticProperties语义的元数据的东西

图片控件 

   <Image

                Source="dotnet_bot.png"

                SemanticProperties.Description="Cute dot net bot waving hi to you!"

                HeightRequest="200"

                HorizontalOptions="Center" />

高度用了HeightRequest,不用Height了,同样宽,最大最小的宽高也是如此,加了Request


有些东西,可能是为了满足其他 platform 做的额外属性设置


所以的资源放到Resources下,字体可以自定义。注意内置的 几个资源文件的属性,自己添加文件时候,也要设置




同样的xaml的 标签拓展,标签值和wpf的TypeConverter的差不多,保持一致。

对于更复杂的类型的属性,转换器用于分析 XAML。 这些类是 .NET MAUI 派生自 TypeConverter的类



在刚刚的Views文件夹,新建一个HelloPage页面

image.png

前台我们给        <VerticalStackLayout x:Name="vsl" 取个名字

后台在这里面添加一个按钮,可以这样写事件

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

	public MainPage()
	{
		InitializeComponent();

        Button button = new Button
        {
            Text = "AY导航",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        button.Clicked += Button_Clicked;
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        throw new NotImplementedException();
    }

当然我使用异步方式写


通常测试我直接用winui方式测试,感觉调试快一点,不用安卓测

image.png

但是AY导航,页面有个向左滑动的动画,然后切换到第二个页面

image.png

在安卓上,单击是淡入,淡出 页面的

不关闭程序,修改hello页面的xaml如下

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUICH3.Views.HelloPage"
             Title="HelloPage">
    <StackLayout>
        <Slider VerticalOptions="Center" />
        <Label Text="A simple Label"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

image.png

效果: A simple Label的值和 slider的值 动起来,但是click me 弹出个框

此时程序要终止调试,但是模拟器不用关。


xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUICH3.Views.HelloPage"
             Title="HelloPage">
    <StackLayout>
        <Slider VerticalOptions="Center" ValueChanged="Slider_ValueChanged"/>
        <Label Text="简单文本"
               FontSize="18" x:Name="valueLabel1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Button Text="单击我" Clicked="Button_Clicked"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>


xaml.cs

namespace MAUICH3.Views;

public partial class HelloPage : ContentPage
{
	public HelloPage()
	{
		InitializeComponent();
	}

    private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
    {
        valueLabel1.Text = e.NewValue.ToString("F3");
    }

    async void Button_Clicked(object sender, EventArgs e)
    {
        Button button = (Button)sender;
        await DisplayAlert("单击", "按钮上的文字是 '" + button.Text , "OK");
    }
}

image.png 

image.png

在winui上

image.png

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========






















dotnet/maui-samples: Samples for .NET Multi-Platform App UI (.NET MAUI) (github.com)

Fx相关地址

https://referencesource.microsoft.com/

dotnet相关地址

https://source.dot.net/

在线反编译

https://sharplab.io/



推荐您阅读更多有关于“wpf in net6maui,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

招聘合肥一枚WPF工程师,跟我一个开发组,10-15K,欢迎打扰

目前在合肥市企迈科技就职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表