Xamarin 笔记 — Xamarin.Forms: 页面
3.75/5 (5投票s)
Xamarin.Forms 中页面的结构
引言
在上一章中，我解释了如何为 Android 或 iOS 应用程序开发准备环境。在本章中，我将开始介绍 Xamarin.Forms 中页面的结构。
Xamarin.Forms 基于页面概念，我们可以使用 XAML 设计页面，使用 C# 语言编写代码。
我们有五种类型：ContentPage、NavigationPage、TabbedPage、CarouselPage 和 MasterDetailPage。
关注点
要在 Visual Studio 2017 中启动新项目，我们选择 文件/新建/项目。
我们将得到另一个窗口，在 Visual C#/跨平台 中选择，.NET 框架将是最新版本，在我们的例子中是框架 4.6.2。
另一个窗口显示，在空白应用和主从项目之间选择。
（它集成了 MVVM 模式的使用），此模板允许您选择您喜欢的内容，甚至您要定位的平台和您的代码共享策略。
在我们得到这个窗口之前
但在 Visual Studio 2015 15.5.2 的最新版本中，我们在“代码共享策略”中没有 PCL（可移植类库），它已被 .NET Standard 取代！甚至，我们能够从同一界面选择平台。
让我们了解一些与此相关的问题。
PCL 或可移植类库是一组针对一组平台（拥有这些平台的 API 的“最小公分母”）的库。
有关更多详细信息，请参阅此链接。
.NET standard：它是一组“标准”API，而不是一个平台。这里我们不是在谈论平台，它只是标准（现在是 2.0），您的代码将适用于所有支持它的平台。但在 2017 年 11 月，.NET Standard 进入 Xamarin.Forms 项目模板。
因此，将 PCL 定位到 .NET Standard 的唯一区别是类型和命名空间指针以不同的方式标准化。
.NET Standard 2.0 的新版本致力于通过各种平台共享代码，现在通过跨平台应用向导在 Xamarin.Forms 中引入它，它将默认使用 PackageReference。让我们看看新窗口。
有关 .NET Standard 的更多详细信息，这是 GitHub
这是一篇很好的文章，解释了这一点。
UI 结构
您得到的第一页是这个，那么什么是页面？它能包含什么？
页面是主要容器，在我们的示例中，它是一个 ContentPage。
在 Page 内部，我们将添加一个 Layout，在示例中我们使用 StackLayout，在 StackLayout 内部，我们将添加 view，它是一个 Control 列表，在此示例中我们使用了：一个 Label，一个 Entry（输入文本）和一个 Button。
页数
Xamarin.Forms 提供了许多页面可能性，允许提供不同的导航体验。为了精确定义 Xamarin.Forms.Page 的实例是什么，官方文档提供了一个清晰简洁的定义。
如此链接所述
“页面是一个视觉元素，它占据屏幕的大部分或全部，并包含一个子元素。页面在 iOS 中表示一个视图控制器，在 Windows 中表示一个页面，并且非常类似于 Android 上的活动，但它不是活动。”
1. ContentPage
最简单的页面，没有任何特殊功能，它是用于启动空白页面的模板。
<!--This is XAML part-->
<? 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 = "Sample.MyContentPage"
Title = "ContentPage Presentation" Padding = "10">
<StackLayout>
<Label Text = "Welcome to Xamarin.Forms !" />
</StackLayout>
</ContentPage>
ContentPage 继承自 TemplatedPage，这是 Xamarin.Forms.dll 中的基类。
要添加新的 ContentPage，我们选择：新建项目/ContentPage.xaml。
2) NavigationPage
它是一种可以容纳多个页面但只显示一个页面并提供在它们之间导航能力的页面类型。
在此视频中，您将找到一个使用 NavigationPage 的示例，我们可以在页面之间导航。
在我们的示例中，我们实例化了一个新的 NavigationPage 对象，并在构造函数中显示第一个页面。
NavigationPage 继承自 Page 类。
当我们想要从一个页面移动到另一个页面时，我们有一些函数可以使用。
如果我们要从按钮操作事件转到另一个页面，我们使用这个
Navigation.PushAsync(new AboutPage());
或者对于异步模式
Navigation.PushModalAsync(new AboutPage());
我们可以返回到上一页，但使用：Navigation.PopAsync(); 或 Navigation.PopModalAsync();
使用其他方法
Navigation.PopToRootAsync(); 将除了根 Xamarin.Forms.Page 之外的所有页面从导航堆栈中弹出。
我们可以在 XAML 部分这样使用导航
<!--This is XAML part-->
<NavigationPage Title="Schedule" Icon="schedule.png">
<x:Arguments>
<local:MyPage1 />
</x:Arguments>
</NavigationPage>
在此示例中，我们调用了一个标题为 Schedule 且图标为“schedule.png”的 Page，我们页面的内容位于 MyPage1 内部，它是一个 ContentView，而不是 ContentPage。
我邀请您通过此链接阅读更多内容
3) TabbedPage
顾名思义，它就像网页中的选项卡或 Pivot 控件，它允许显示一个包含多个选项卡的页面。
您可以在我的 YouTube 频道中找到有关 TabbedPage 的示例。
在视频中，我们用 C# 创建了 TabbedPage。
//
// Any source code blocks look like this
//
public App() {
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
tabbedPage.Children.Add(new Page3());
MainPage = tabbedPage
}
但是我们可以像这个示例一样使用 XAML 添加 TabbedPage。
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mypages="clr-namespace:MyApp.Pages;assembly=MyApp"
x:Class="MyApp.Pages.Navigation">
<TabbedPage.Children>
<mypages:Page1 Title="Page 1"/>
<mypages:Page2 Title="Page 2"/>
<mypages:Page3 Title="Page 3"/>
</TabbedPage.Children>
</TabbedPage>
4) CarouselPage
根据定义，它是使用滑动手势在页面之间导航。
更多详情请参考
您将在我的 YouTube 频道中找到一个示例
在视频中，我们用 C# 创建了 CarouselPage。
public partial class App : Application
{
public App ()
{
InitializeComponent();
MainPage = new MasterProject.Views.MasterPage();
CarouselPage carouselPage = new CarouselPage();
carouselPage.Children.Add(new MainPage());
carouselPage.Children.Add(new Page1());
carouselPage.Children.Add(new Page2());
MainPage = carouselPage;
}
但是我们可以像这个示例一样使用 XAML 添加 CarouselPage。
<?xml version="1.0" encoding="UTF-8"?>
<CarouselPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NogginXamarinFormSample;assembly=CarouselPage"
x:Class="CarouselPage.Sample">
<CarouselPage.Children>
<local:MyPage1 />
<local:MyPage2 />
<local:MyPage3 />
</CarouselPage.Children>
</CarouselPage>
在我们的示例中，代码隐藏将是这样的
public partial class CarouselPage : CarouselPage {
}
5) MasterDetailPage
“Xamarin.Forms MasterDetailPage 是一个管理两个相关信息页面的页面——一个主页面显示项目，一个详细信息页面显示主页面上项目的详细信息。本文解释了如何使用 MasterDetailPage 并在其信息页面之间导航。”有关更多详细信息，请查看此链接。
因此，主从页面容器包含两个页面，一个是主页面，另一个是详细信息页面。主页面将包含菜单列表，详细信息页面将显示详细信息并将链接返回到主页面，这个想法很简单，如果您有任何按钮或选项要在菜单中显示，但您想隐藏它们以保持良好的 UI 体验。
我们将以这种方式使用 XAML 定义它
<MasterDetailPage.Master >
<ContentPage Padding="10" BackgroundColor="Gray"
Title="Master" Icon="hamburger.png">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Master Page">
</Label>
<Button x:Name="goToPage1"
Text="Go to Page 1" BackgroundColor="Yellow"
Clicked="goToPage1_Clicked"></Button>
<Button x:Name="goToPage2"
Text="Go to Page 2" BackgroundColor="Red"
Clicked="goToPage2_Clicked"></Button>
<Button x:Name="goToPage3"
Text="Go to Page 3" BackgroundColor="Green"
Clicked="goToPage3_Clicked"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="10">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Detail Page">
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Detail>
在 <MasterDetailPage.Master> 标签中，我们将定义主视图，在我们的例子中，我们有三个 Button，它们将链接我们的页面。
在 <MasterDetailPage.Detail> 标签中，我们将包含默认内容，如果我们没有在类的构造函数中定义它。
这些标签对于主从页面是强制性的。
我们将创建三个页面：Page1、Page2 和 Page3，它们具有不同的内容和背景颜色。
现在，在 C# 部分，我们将定义在启动应用程序时要显示的默认页面。
public MasterPage (){ InitializeComponent ();
Detail = new NavigationPage(new Page1());
//Summary:
//Gets or sets a value that indicates whether or not the visual element
//that is represented by the Xamarin.Forms.MasterDetailPage.Master property
//is presented to the user.
// Remarks:
//Setting this property causes the Xamarin.Forms.MasterDetailPage.IsPresentedChanged
//event to be raised.
//We initialize it to false
IsPresented = false;
}
void goToPage1_Clicked(object sender, System.EventArgs e)
{
//We will display the first page
Detail = new NavigationPage(new Page1());
IsPresented = false;
}
}
属性 IsPresented 说明在点击后主从菜单是否应该隐藏。
要获取更多示例，您可以在 YouTube 上查看我的视频
源代码文件
关注点
Xamarin.Forms- 页面：
ContentPage、NavigationPage、TabbedPage、CarouselPage、MasterDetailPage
历史
请参阅我上一篇关于设置您的环境的文章。