Xamarin移动应用开发入门

环境搭建

打开 Visual Studio Installer
image.png

Xamarin 项目结构

打开 VS2022，创建 移动应用（Xamarin.Forms）
image.png

项目创建完成之后，如下在解决方案查看项目结构
image.png

Application 类介绍

MainPage —主页
Quit() —程序退出
OnStart() —程序打开
OnSleep() —程序进入后台
OnResume() —程序从后台回到前台

使用XAML创建界面

XAML文件语法解释（与CS文件对照）
image.png

安卓移动权限添加（例如：定位、相机等）

image.png

布局器

StackLayout布局

image.png

Grid布局

image.png

AbsoluteLayout布局

image.png

RelativeLayout布局

image.png

Xamarin.Forms 控件

Label

image.png

Button

image.png
对比
image.png

Entry 文本输入框

image.png
对比
image.png

Image

确保Android和iOS的Resource文件下下存放同样的图片
image.png
image.png

对比
image.png

Slider 滑块控件

image.png

Switch 开关控件

image.png

Stepper

image.png

ProgressBar 进度条

image.png

Picker 自定义选择器

image.png

DataPicker 日期选择器

image.png

TimePicker 时间选择器

image.png

TableView

image.png

ListView

（1）
image.png
（2）
image.png
（3）
image.png

页面导航

image.png

image.png
演示：
image.png
自定义返回页面
image.png

TabbedPage

image.png
演示：
新建页面
image.png

CarouselPage，使用与TabbedPage类似，但解决了iOS不能左滑右滑的问题。

FlyoutPage

image.png
演示：
新建页面
image.png
一般用处就是在Page1里面添加某些按钮，点击事件
image.png

页面组织 Shell

会使用浮出页面（FlyoutPage的效果）

示例：
（1）创建一个空白项目
（2）MainPage.xaml 文件中，删掉自动创建好的下面的内容，然后把ContentPage改为Shell（命名空间定义的前面）
image.png
（3）相应的后台 .cs文件继承也要改成 继承Shell类
image.png
（4）
image.png
（5）
image.png
（6）
image.png
（7）
image.png
（8）
image.png
（9）
image.png
（10）补充1
image.png
（11）补充2
image.png

只使用选项卡（现在大多数App，底部有选项的样式） TabBar

image.png

选项卡外观

image.png
比如：
image.png

posted @ 2023-05-29 21:29  不爱菠萝的菠萝君  阅读(645)  评论(0)    收藏  举报