Xamarin.Forms (跨平台)

14 Nov 2024 | 阅读 14 分钟

Xamarin.Forms (跨平台) 的先决条件

C# 基础知识
一些关于 Xaml 的知识

引言
Xamarin.Forms 是 Xamarin 的一项功能。Xamarin 是一个流行的移动开发框架，它通过用于构建移动应用程序的工具和库扩展了 .Net 开发平台。Xamarin.Forms 是一个开源的跨平台框架，被微软收购，用于通过 .NET 从单个共享代码库构建 Android、iOS 和 Windows 应用程序。我们使用 Xamarin.Forms 内置的页面、布局和控件来构建和设计移动应用程序，这些应用程序具有一个高度可扩展的单一 API。通过继承任何控件来定制行为，或定义我们自己的控件、布局、页面和单元格，以使我们的应用程序像素完美。

Xamarin Form 结构
一开始，当我们打开任何设备、任何手机时，我们在屏幕上看到的可视区域就叫做页面 (Page)。屏幕上的所有可视区域都被我们视为一个页面，我们可以将其类比为 ROM。然后，我们如何在页面上组织事物，以及我们如何规划事物，就叫做布局 (Layout)。视图 (View) 是我们实际放置在位置上的实际项，要么我们将它们堆叠起来，要么将它们放在左边、右边等。

视觉元素 (Visual Elements)

在 Xamarin 中，显示在设备屏幕上的元素称为视觉元素。在像手机这样的设备中，那些可见的，或者我们可以看到的，就称为视觉元素。

Xamarin 中有 4 种视觉元素。

页

在设备中，从导航栏到屏幕底部被称为 **页面 (a page)**。

页面	描述
ContentPage (内容页面)	内容页面包含一个单独的视图。
MasterDetailPage (主从页面)	主从页面有两个页面窗格。主页面包含菜单，详细页面包含内容。
NavigationPage (导航页面)	导航页面包含导航栏。在导航页面中，我们将页面保存在堆栈中，可以从一个页面跳转到另一个页面。导航栏可以有导航按钮以及标题。
TabbedPage (标签页)	标签页是一个容器页面。标签页充当一个容器，其中包含与每个标签关联的内容页面。
CarousalPage (轮播页面)	允许通过滑动来显示其他视图的页面。

布局

页面中的子元素称为 **布局 (Layout)**

布局	描述
StackLayout (堆叠布局)	在堆叠布局中，所有子元素都排成一行。堆叠布局是最常用的布局。
AbsoluteLayout (绝对布局)	一个视图，它使用锚点在指定位置定位子布局，以定义位置和大小。
RelativeLayout (相对布局)	在相对布局中，我们使用约束相对于彼此定位元素。
网格	将多个视图排列成行和列，就像一个表格。

包含许多元素的布局称为 **视图 (Views)**。

细胞

视图的子元素称为 **单元格 (Cell)**。

单元格	描述
EntryCell (输入单元格)	该单元格包含一个标签和一个单行输入元素
SwitchCell (开关单元格)	这个单元格与开关相同，但之前有一个标签。
TextCell (文本单元格)	该单元格包含主字段和次字段。
ImageCell (图像单元格)	包含图像的文本单元格

页

页面用于设计应用程序的屏幕。Xamarin 中有多种类型的“页面”。页面是一种父对象，它进一步包含子对象，子对象可以是另一个页面或布局。页面占据整个屏幕。

一个页面覆盖屏幕的整个区域。
一个页面包含布局和视图。
应用程序可以有一个或多个页面。

Xamarin 中有六种类型的页面。

Content Page (内容页面)
MasteDetail Page (主从页面)
Navigation Page (导航页面)
Tabbed Page (标签页)
Template Page (模板页面)
Carousal Page (轮播页面)

Content Page (内容页面)

内容页面在整个可见屏幕上显示一个视图或一个容器。

在这里，我们将使用 Visual Studio 2017 中的 **Xamarin.Forms** 来研究 **内容页面** 的结构。

要在 Visual Studio 中创建页面，我们将按照以下步骤进行。

页

创建内容页面的过程

点击文件 -> 新建 -> 项目

点击 Visual C# -> 选择 Cross-Platform -> 选择 Mobile App (Xamarin.Forms)

输入应用程序名称 -> 点击确定

选择 Blank 模板创建 Xamarin 应用程序 -> 选择 Platform -> 选择 Code Sharing Strategy -> 点击 OK。

打开 Solution Explorer -> 点击 MainPage.Xaml -> 构建应用程序 -> 测试应用程序，点击 Android Emulator

输出

性质

在这里，我们将使用一些属性来增强页面的功能。

Margin (外边距): Margin 属性表示元素与其相邻元素之间的距离。

Padding (内边距): Padding 表示元素与其子元素之间的距离，它用于将控件与其自身内容分隔开。

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout Padding="10" Margin="30,20,20,10">
            <Entry Text="hey i am xamarin"></Entry>
            <DatePicker></DatePicker>
            <Editor Text="hey i am editor"></Editor>
            
        </StackLayout>
    </ContentPage.Content>

    

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App15
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        
    }
}

输出

Xamarin.Forms 主从页面

Xamarin.Forms MasterDetailPage 是一个页面，它管理两个相关页面之间的信息，主页面显示项目，详细页面显示主页面上项目的详细信息。

在这里，我们将解释如何使用 MasterDetailPage 以及页面之间的导航。

容器包含两个页面：主页面和详细页面
主页面包含菜单列表
详细页面显示详细信息并链接回主页面。

项目列表的位置在每个平台上都是相同的，在选择项目后会导航到相应的详细页面。主页面还有一个导航功能，即导航栏，其中包含一个按钮，可用于导航到活动的详细页面。

在 iOS 上，导航栏位于页面顶部，详细页面上有一个按钮。我们也可以通过向左滑动主页面来导航到活动的详细页面。
在 Android 上，导航栏位于页面顶部，显示标题、图标和导航到详细页面的按钮。图标在修饰 MainActivity 类的 [Actitvity] 属性中定义。

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterPage"
             x:Class="MasterPage.MainPage">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" BackgroundColor="Blue" Title="Master Page">
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Master Page" FontSize="Large"></Label>
                </StackLayout>
                
            </ContentPage.Content>
            
        </ContentPage>
        
       
            
             </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage Padding="10" BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout Margin="5,30,5,5">
                <Label Text="Detail Page" FontSize="Large"></Label>
            </StackLayout>

        </ContentPage.Content>

        </ContentPage>

    </MasterDetailPage.Detail>



</MasterDetailPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace MasterPage
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

输出

在这里，我们将在主页面添加更多内容，以及更多页面以通过按钮进行导航

添加新页面 (Page1.Xaml)

右键单击 ProjectName -> 添加 -> Content Page -> 添加页面名称 (Page1)。

<?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="MasterPage.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="I am Page 1"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

添加 Page2.Xaml

<?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="MasterPage.Page2">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="I am Page2"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterPage"
             x:Class="MasterPage.MainPage"
                  Title="I am Master Page"
                  MasterBehavior="Popover">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" BackgroundColor="Blue" Title="Master Page">
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Master Page" FontSize="Large"></Label>
                    <Button Text="Menu Item 1" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked"></Button>
                    <Button Text="Menu Item 2" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked_1"></Button>
                </StackLayout>
                
            </ContentPage.Content>
            
        </ContentPage>
        
       
            
             </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage Padding="10" BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout Margin="5,30,5,5">
                <Label Text="Detail Page" FontSize="Large"></Label>
            </StackLayout>

        </ContentPage.Content>

        </ContentPage>

    </MasterDetailPage.Detail>
</MasterDetailPage>

MainPage.Xaml.CS

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterPage"
             x:Class="MasterPage.MainPage"
                  Title="I am Master Page"
                  MasterBehavior="Popover">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" BackgroundColor="Blue" Title="Master Page">
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Master Page" FontSize="Large"></Label>
                    <Button Text="Menu Item 1" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked"></Button>
                    <Button Text="Menu Item 2" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked_1"></Button>
                </StackLayout>
                
            </ContentPage.Content>
            
        </ContentPage>
        
       
            
             </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage Padding="10" BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout Margin="5,30,5,5">
                <Label Text="Detail Page" FontSize="Large"></Label>
            </StackLayout>

        </ContentPage.Content>

        </ContentPage>

    </MasterDetailPage.Detail>



</MasterDetailPage>

输出

当我们点击菜单项 1 时，我们将导航到 Page1，当我们点击菜单项 2 时，我们将导航到 Page2。

输出

我们将学到什么

在这里，我们将学习如何使用 **Xamarin.Forms** 开发跨平台应用程序。
如何为 Android、iOS 和 Windows 等不同平台设计原生 UI。
在这里，我们将使用 Xamarin.Forms 处理不同的控件。
导航：在这里，我们将学习如何通过滚动、菜单和按钮在页面之间进行导航。
数据绑定：在数据绑定中，我们实现了 C# 和 XAML 之间的通信。
我们还将在此创建自定义控件。

为所有操作系统开发应用程序的巨大问题在于它们是不同的。

Xamarin 承诺提供带有共享代码库的移动应用程序；然而，该共享代码基于应用程序逻辑。传统的 Xamarin.iOS、**Xamarin.Android** 和 **Xamarin.UWP** 开发仍然要求用户界面可以相互独立编写，这并非易事。

Xamarin.Forms 基础知识

Xamarin.Form 是一个用于构建用户界面的移动应用程序框架。Xamarin.Form 是一个跨平台 UI 工具包，允许开发人员轻松创建可在 Android、iOS 和 Windows Phone 之间共享的原生用户界面布局。

Xamarin.Forms 提供 100% 的原生 iOS、Android 和 UWP 应用，事实上，任何 Xamarin.Forms 应用的起点都是项目的平台。

Xamarin.Form 不仅仅是控件

Xamarin.Forms 提供 20 多个跨平台用户界面控件；这些控件中的每一个都有 Xamarin.Forms 特有的 API，但会作为其原生 iOS、Android 或 UWP 对应项发出。换句话说，Xamarin.Forms Label 控件将作为 iOS UI Label 发出。

一些 Xamarin.Forms 内置控件，在 iOS 和 Android 上是原生渲染的。

Xamarin.Forms 不止于此

它还提供了几种不同的页面布局，包括控制其他页面导航堆栈的导航页面。标签页包含可以通过标签访问的其他页面，以及主从页面。
Xamarin.Forms 提供了一种在称为布局的页面内控制控件的布局方式。
它还提供绑定引擎，以便包含属性的类可以“绑定”到控件上的属性，例如 Label 上的 Text 属性。Xamarin.Forms 可以加快开发时间。
包含一个名为 Messaging Center 的消息服务，它允许各种类和组件在不知道彼此的情况下进行通信。
Effects 是一种方式，我们可以创建小的平台特定用户界面来控制和应用于共享项目。
Custom Renders 允许我们完全控制控件在 Xamarin.Forms 中的渲染方式，从而我们可以添加我们可能需要的额外外观或功能。
并且使用最新版本的 Xamarin.Forms，我们甚至可以直接在 XAML 文件中添加仅在一个平台上受支持的控件，例如 Android Floating action buttons。

共享项目和 PCL (Portable Class Library) 之间的区别

这里有两种共享项目的方式。这两种方式都允许我们在 Android、iOS 和 Windows 等不同平台之间共享项目。

共享项目和 PCL (Portable Class Library) 之间的区别是

共享项目	Portable Class Library (可移植类库)
Side by Side (并排)	每个项目都将包含共享项目内的所有资源。一个可移植程序集 (DLL 文件) 引用所有对象。
好处	共享代码可以分支。可以添加平台特定的引用。重构始终会更新所有引用。如果计划与其他方共享结果程序集，这是一个很好的解决方案
缺点	没有输出，不适合与其他开发人员共享。在“非活动代码”中重构不会更新它。没有平台特定的引用。只有 .NET 框架的子集可用。

Navigation Page (导航页面)

导航页面管理页面之间的导航。它使用基于堆栈的架构，并包含 PUSH 和 POP 属性来导航页面。我们可以向任何类型的页面添加导航以导航到另一个页面。

登录表单

编码

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ContentPageProperty"
             x:Class="ContentPageProperty.MainPage" BackgroundColor="WhiteSmoke" Title="Login Page">
    <ContentPage.Content>

    <StackLayout x:Name="MainStack">
            <StackLayout Padding="20" Margin="0,80,0,0">
                <Label Text="UserName" TextColor="Black"/>
                <Entry Text="" Placeholder="UserName" x:Name="UserNameEntry"/>
                <Label Text="Password" TextColor="Black"/>
                <Entry Text="" Placeholder="Password" IsPassword="True"/>
                <Button Text="Login" BackgroundColor="DarkGray"  TextColor="Black" Clicked="Button_Clicked"></Button>
                <Label Text="Not a Member? Sign Up Now" TextColor="Black" HorizontalOptions="Center"></Label>
                        

            </StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>
    </ContentPage.Content>

</ContentPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ContentPageProperty
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("Login", "LoginSuccessful", "OK");
            Navigation.PushAsync(new HomePage(UserNameEntry.Text));

        }
    }
}

App.Xaml

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace ContentPageProperty
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

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

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

HomePage.Xaml

<?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="ContentPageProperty.HomePage" Title="Home Page">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
            <Label x:Name="AppUserName" FontSize="20"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

HomePage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ContentPageProperty
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class HomePage : ContentPage
	{
		public HomePage (String UserNameEntry)
		{
			InitializeComponent ();
            AppUserName.Text = "Hello," + UserNameEntry;

        }

      
    }
}

输出

在这里，我们将信息填入文本框 用户名、密码，然后点击登录

填完信息后，该页面将切换到导航页面。

Navigation Page (导航页面)

点击此高亮箭头后，我们将切换回 **登录页面**。

Pickers (选择器)

Xamarin Forms 中有三种类型的选择器。

1. Date Picker (日期选择器)

Xamarin.Form 视图允许用户选择日期。Xamarin.Forms **DatePicker** 调用平台的日期选择器控件，允许用户选择日期。DatePicker 定义了八个属性。

MinimumDate (最小日期): 这是一个 **DateTime** 类型，默认为 1900 年的第一天。
MaximumDate (最大日期): 这是 **DateTime** 类型，默认为 2100 年的最后一天。

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="DatePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2020/12/31" MinimumDate="2000/12/31"></DatePicker>
        </StackLayout>
    </ContentPage.Content>

输出

2. Time Picker (时间选择器)

3. Xamarin.Forms 视图允许用户选择时间。Xamarin.Forms **TimePicker** 调用平台的时钟选择器控件，并允许用户选择时间。

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout Padding="10">
            <Label Text="DatePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2020/12/31" MinimumDate="2000/12/31"></DatePicker>
            <TimePicker x:Name="tp"></TimePicker>
            <Button x:Name="button" Clicked="Button_Clicked" Text="Details"></Button>
            <Label x:Name="details"></Label>
        </StackLayout>
    </ContentPage.Content>

    

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App15
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            var date = dp.Date;
            var time = tp.Time;
            details.Text = string.Format("Date:{0}\n Time:{1}", date, time);
        }
    }
}

输出

4. Picker (称为下拉列表)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePicker"
             x:Class="TimePicker.MainPage">

    <StackLayout>
        <Label Text="Picker"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <Picker Title="Color"
                VerticalOptions="CenterAndExpand"
                Margin="10, 0"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.Items>
                <x:String>Aqua</x:String>
                <x:String>Black</x:String>
                <x:String>Blue</x:String>
                <x:String>Fuchsia</x:String>
                <x:String>Gray</x:String>
                <x:String>Green</x:String>
                <x:String>Lime</x:String>
                <x:String>Maroon</x:String>
                <x:String>Navy</x:String>
                <x:String>Olive</x:String>
                <x:String>Purple</x:String>
                <x:String>Red</x:String>
                <x:String>Silver</x:String>
                <x:String>Teal</x:String>
                <x:String>White</x:String>
                <x:String>Yellow</x:String>
            </Picker.Items>
        </Picker>

        <BoxView x:Name="boxView"
                 WidthRequest="150"
                 HeightRequest="150"
                 HorizontalOptions="Center"
                 VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TimePicker
{
    public partial class MainPage : ContentPage
    {
        

        public MainPage()
        {
            InitializeComponent();
        }
        void OnPickerSelectedIndexChanged(object sender, EventArgs e)
        {
            Picker = (Picker)sender;

            if (picker.SelectedIndex == -1)
            {
                boxView.Color = Color.Default;
            }
            else
            {
                string colorName = picker.Items[picker.SelectedIndex];
                FieldInfo colorField = typeof(Color).GetRuntimeField(colorName);
                boxView.Color = (Color)(colorField.GetValue(null));
            }
        }
    }
}

输出

Tabbed Page (标签页)

标签页包含多个页面或标签，允许它们之间的导航。它表现得像一个父级，所有其他都是它的子级。以下是不同设备上不同类型标签页的示例。在 iOS 中，我们可以在底部看到标签，而在 Android 和 Windows Phone 中，标签位于顶部。

方法 1

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinTabbedPage"
             x:Class="XamarinTabbedPage.MainPage">
    <ContentPage Title="Page1">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Tabbed Page1"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage Title="Page2">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Tabbed Page2"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage Title="Page3">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Tabbed Page3"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>


</TabbedPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinTabbedPage
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

输出

方法 2

图标插入

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinTabbedPage"
             x:Class="XamarinTabbedPage.MainPage" Title="MainPage">
    <local:Page1>
    </local:Page1>
    <local:Page2>
    </local:Page2>
   </TabbedPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinTabbedPage
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Page1.Xaml

<?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="XamarinTabbedPage.Page1" Title="Page1" Icon="home.png">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Tabed page1"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Page2.Xaml

<?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="XamarinTabbedPage.Page2" Title="Page2" Icon="Message.png">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Tabbed Page2"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

APP.Xaml

编码

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamarinTabbedPage
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MainPage();
            
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

如何添加图标

从 ICONFINDER 网站下载图标，点击以下链接：https://www.iconfinder.com/search/?q=message&from=homepage，从下载文件夹中复制并粘贴到 drawable 文件夹的 resources 中。

Page1

为所有页面添加图标的过程将重复。

输出

Carousel Page (轮播页面)

一种 **PAGE**，用户可以左右滑动以浏览内容页面，类似于画廊。它包含页面列表和显示区域。

Carousel Page 类继承自 **MultiPage <Content Page>**

轮播页面通过左右滑动提供页面导航。它充当其他子页面的基页。

轮播页面一次只能看到一个。

Carousel Page: Default Behaviour (轮播页面：默认行为)

Carousel Page Look (轮播页面外观)

页面列表的加载

为轮播页面提供页面列表作为子页面。
定义 ItemTemplate 的 Data Template，然后将集合分配给 Item Source。

MainCarouselPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CarousalPage.MainCarousalPage">
    <ContentPage BackgroundColor="LightPink">
        <ContentPage.Content>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="I am Page1"></Label>
            </StackLayout>
            
        </ContentPage.Content>
    </ContentPage>

    <ContentPage BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="I am Page2"></Label>
            </StackLayout>

        </ContentPage.Content>
    </ContentPage>
    
    <ContentPage BackgroundColor="Red">
        <ContentPage.Content>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="I am Page3"></Label>
            </StackLayout>

        </ContentPage.Content>
    </ContentPage>

App.Xaml

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace CarousalPage
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MainCarousalPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

输出

Template Page (模板页面)

它是内容页面的基类，并显示具有受控模板的全屏内容。在此，我们可以设计整个应用程序的模板，包括字体大小、颜色和许多其他样式技术。

Page1.Xaml

未使用模板

<?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="Templatepage.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="App Name" BackgroundColor="Blue"></Label>
        <Label Text="Login Registration Page"></Label>
        <Entry Text="Name"></Entry>
        <Entry Text="Age"></Entry>
            <Entry Text="Address"></Entry>
            <Entry Text="Country"></Entry>
            <Button Text="Submit" BackgroundColor="Black"></Button>
            <Label Text="Terms and Conditions"></Label>
            <Label Text="You can not copy more code"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage

输出

使用模板

Page2.Xaml

<?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="Templatepage.Page2" ControlTemplate="{StaticResource ThemeMaster}">
    <ContentPage.Content>
        <StackLayout>
        <Entry Text="Name"></Entry>
        <Entry Text="Age"></Entry>
       <Button Text="Submit" BackgroundColor="Black" TextColor="Blue"></Button>
            
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在 App.Xaml 中，我们可以通过这种方式来创建模板。

App.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Templatepage.App">
    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="ThemeMaster">
                <StackLayout>
                <Label Text="App Name" BackgroundColor="Blue"></Label>
                    <ContentPresenter>
                    </ContentPresenter>
                <Label Text="Terms and Conditions"></Label>
                <Label Text="You can not copy more code"></Label>
               </StackLayout>

            </ControlTemplate>
        </ResourceDictionary>

    </Application.Resources>
</Application>

App.Xaml.CS

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace Templatepage
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new Page2();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

输出

总结

Xamarin.Forms 是 Xamarin 最强大的功能之一，它有助于创建跨平台应用程序。借助它，我们可以触及数十亿台智能设备。毫无疑问，Xamarin 因其无缝的 API 集成能力已成为企业的“选择”。

下一主题Xamarin.Forms 生命周期

← 上一个下一个 →

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Xamarin 教程

面试题

Xamarin.Forms (跨平台)