Xamarin移动开发实战笔记 – Black raison detre

本笔记所使用的教程：2022开源！Xamarin+MAUI移动开发实战教程：社区电商APP项目开发（C#/.NET/WPF零基础入门到精通实战合集/.Net maui）

这老师这嘴跟租来的似的，口齿不清吞吞吐吐。

直接或间接使用的其他笔记：

Xamarin环境搭建与app各种demo实例 ——Xamarin.forms

移动开发初识

开发环境

开发工具： Visual Studio 2022-17.3-Community ：MAUI
Visual Studio 2019-16.11-Community ：Xamarin
运行时框架：.Net Standard 2.0/ .NET 6
UI框架： Xamarin/MAUI
调试环境：Android模拟器

安装VS的时候会有默认的限制，安装2022就是MAUI模板，安装2019就是Xamarin模板（完全没听懂，总之两个都安装了

Visual Studio 2019：

Visual Studio 2022：

2019新建项目选择项目模板：移动应用(Xamarin.Forms)
2022新建项目选择项目模板：MAUI应用

Xamarin与MAUI

Xamarin.Forms 是一个开饭源代码UI框架。通过Xamarin.Forms，开发人员可从单个共享基本代码生成Android、IOS和Windows(强调UWP)应用程序。发布于2011年，最新版本Forms5.0、Android13、IOS15。
.NET MAUI是一个跨平台框架，是Xamarin.Forms的演变，用于使用C#和Xamarin创建本机移动和桌面应用。使用.NET MAUI ，可以从单个共享代码库开发可在Android、IOS、macOS和Windows上运行的应用。(2022)

接下来就只记Xamarin了

项目创建及结构说明

若项目名称尾是Xamarin，则创建后提示报错：

是因为项目名内含有的Xamarin影响了Xamarin.Essentials这个程序集的引用，导致程序去项目的命名空间下去找.Essentials，因此有两种解决方法

修改项目名，使其不包含Xamarin单词
using x = Xamarin.Essentials（可能是绑定这个引用的意思

真机测试

本人使用Xiaomi Play 安卓8.1，在找了很久很久之后才发现没打开USB安装，而且这玩意还得插卡和登陆账号才能打开我是不是SB我不知道，小米反正是SB。

资源管理

drawble是存放图像资源的，文件放入该文件夹后还需要进行包括到项目内的操作。
Assets是存放字体的
MAUI则需要导入进项目后在MauiProgram.cs添加代码段，而Xamarin直接用就行

fonts.AddFont("字体.ttf", "设定字体名字");

调用的时候直接调用设定的字体名即可

这里可以显示所有文件

关键对象概念-权限

打开项目——属性——清单，最下方是所需权限

不过在开发过程中一般用代码进行管理，不需要在属性设置中选择

进行IOS的开发的时候，需要打开这个文件，但不能直接双击，右键选择打开方式选择XML(文本)编辑器。

Xamarin初级开发

Shell空间

Shell空间就像一个容器，里面放了一个个的页面，根据不同的情况显示不同的页面。切换页面是基于路由的：首先在Shell里注册好每一个页面，然后根据特定路由来请求每个页面的显示。不同于Windows的多窗口，安卓单窗口的页面切换就是Shell的呈现。

在我们创建的空项目中没有Shell的体现，需要添加Shell对象来进行业务开发。使用Shell相当于把多个页面作为一个整体来管理，如果不借助Shell将会有不合逻辑的跳转。

在Xamarin下需要自行创建AppShell：

把内容页改为Shell

内置代码也改为Shell类型

与MAUI类似的，进行Shell注册：

想要注册MainPage页面，需要在AppShell导入MainPage的命名空间

打开MainPage.xaml.cs，可以看到其命名空间为Mobile.Xamarin。返回AppShell.xaml，在上方导入命名空间，xmlns后面为导入的命名空间的在当前文件下的命名，例中为local：

将会自动补全为xmlns:local="clr-namespace:Mobile.Xamarin"

导入命名空间后，即可进行该页面的注册：

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

<ShellContent

Title="Main Page"

Route="MainPage"

ContentTemplate="{DataTemplate local:MainPage}"/>

Title="Main Page"为设定标题
Route="MainPage"Route为路由地址的命名
ContentTemplate="{DataTemplate local:MainPage}"为指定具体页面

页面跳转

进行Shell跳转为加载路由地址Shell.Current.GoToAsync("//Login")。引号内使用的是路径，一定要加//。这种跳转方法是类似于调换页面，而不是新加一张页面到上层，所以返回动作后不会回到跳转之前的页面。

我找到的另一种跳转是：Navigation.PushAsync (new MainPage ()); 这种跳转与上述相反，在页面1以当前方法跳转到页面2后，执行返回后会回到页面1。

只有注册了所有的页面，才可以在业务中使用Shell进行跳转。

Xamarin如果想添加await await Shell.Current.GoToAsync("//Login")，需要添加异步处理async

private async void Button_Clicked(object sender, EventArgs e)
{
    await Shell.Current.GoToAsync("//MainPage");
    //Navigation.PushAsync(new MainPage());
}

private async void Button_Clicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync("//MainPage");

//Navigation.PushAsync(new MainPage());

}

页面布局

所有的页面布局都基于标签式的结构来进行处理的

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Mobile.Xamarin.Login">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="这是一个不明所以的登陆页面"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
            <Button Text="登录" Clicked="Button_Clicked"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="Mobile.Xamarin.Login">

<ContentPage.Content>

<Label Text="这是一个不明所以的登陆页面"

VerticalOptions="CenterAndExpand"

HorizontalOptions="CenterAndExpand" />

</StackLayout>

</ContentPage.Content>

</ContentPage>

每个标签都是一个对象，从外到内看：

<ContentPage> 指的是当前页面整体的类型为ContentPage
<StackLayout> 栈方式布局，使用属性Orientation切换水平/垂直
在其中放的是布局控件、文本控件<Label>、<Button>

两个基本布局方式为：<StackLayout> 与<Grid>

这是Grid的使用方法：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Mobile.Xamarin.Login">
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Text="这是一个不明所以的登陆页面"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
            <Button Text="登录" Clicked="Button_Clicked" Grid.Row="2" Grid.Column="1"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="Mobile.Xamarin.Login">

<ContentPage.Content>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Text="这是一个不明所以的登陆页面"

VerticalOptions="CenterAndExpand"

HorizontalOptions="CenterAndExpand" />

</Grid>

</ContentPage.Content>

</ContentPage>

<Grid.RowDefinitions>设置Grid的行
<Grid.ColumnDefinitions>设置Grid的列
PS.例中设置了三行两列，并设置Button在第3行第2列(从0开始计数)

此文本框属性解释：

<Label Text="密码"
        VerticalOptions="CenterAndExpand"
        HorizontalOptions="End" 
        Grid.Row="1"
        Grid.Column="0"
        Margin="0,0,5,0"/>

<Label Text="密码"

VerticalOptions="CenterAndExpand"

HorizontalOptions="End"

Grid.Row="1"

Grid.Column="0"

Margin="0,0,5,0"/>

VerticalOptions：垂直方向对齐设置
HorizontalOptions：水平方向对齐设置
Grid.Row：处于Grid的x列
Grid.Column：处于Grid的x行
Margin：设置此标签的
(左,上,右,下) 的外边距(四个数字时)，如Margin="0,0,5,0"为右侧5像素边距
(左右,上下) 的外边距(两个数字时)，如Margin="5,0"为左右5像素边距
(四周全部) 的外边距(仅一个数字)，如Margin="5"为四周5像素边距

<Entry Placeholder="请输入密码" 
        VerticalOptions="CenterAndExpand"
        Grid.Row="1" 
        Grid.Column="1"
        IsPassword="True"/>

<Entry Placeholder="请输入密码"

VerticalOptions="CenterAndExpand"

Grid.Row="1"

Grid.Column="1"

IsPassword="True"/>

IsPassword="True"：隐藏显示输入的密码

<Button Text="登录" 
        Clicked="Button_Clicked" 
        Grid.Row="3" 
        Grid.Column="0"
        Grid.ColumnSpan="2"/>

<Button Text="登录"

Clicked="Button_Clicked"

Grid.Row="3"

Grid.Column="0"

Grid.ColumnSpan="2"/>

Grid.Column="0"：从0列开始
Grid.ColumnSpan="2"/>：跨两列

移动开发初识

开发环境

Xamarin与MAUI

项目创建及结构说明

真机测试

资源管理

关键对象概念-权限

Xamarin初级开发

Shell空间

页面跳转

页面布局

发表回复 取消回复

发表回复取消回复