当前位置： 正文

Xamarin.Forms(跨平台)用法详细图解

03-18 App/移动开发/跨端 309

本文概述

Xamarin.Forms的前提条件(跨平台)

  • C＃基础知识
  • 有关Xaml的一些知识

介绍

Xamarin.Forms是Xamarin的功能。 Xamarin是流行的移动开发框架, 它通过用于构建移动应用程序的工具和库扩展了.Net开发平台。 Xamarin.Forms是Microsoft收购的开放源代码, 跨平台框架, 用于通过单个共享代码库使用.NET构建Android, iOS和Windows应用程序。我们使用Xamarin。形成内置的页面, 布局和控件, 以通过高度可扩展的单个API构建和设计移动应用程序。子类化任何控件以自定义行为或定义我们的控件, 布局, 页面和单元格以使我们的应用程序像素完美。

Xamarin.Forms

Xamarin形式结构

首先, 当我们打开任何设备, 任何手机时, 无论我们在屏幕上看到什么, 可见区域都被称为页面。屏幕上所有可见区域都被视为页面, 我们可以像ROM一样进行比较。然后, 我们如何组织页面上的内容, 以及如何计划这些内容, 称为布局。视图是我们将放置在实际位置上的实际项目, 我们可以将它们堆叠, 放置在左侧, 右侧等。

视觉元素

在Xamarin中, 设备上显示的元素称为屏幕。在诸如手机之类的设备中, 这些是可见的, 或者我们可以看到的称为可视元素。

在Xamarin中有4个视觉元素。

Xamarin.Forms

页

在设备中, 从导航栏到屏幕末端(称为页面)。

Xamarin.Forms
Pages Description
ContentPage 内容页面包含一个视图。
MasterDetailPage MasterDetailPage有两个页面窗格。母版页包含菜单, 详细信息页包含内容。
NavigationPage NavigationPage包含导航栏。在NavigationPage中, 我们将页面保留在堆栈上, 并且可以从一页跳到另一页。导航栏可以具有导航按钮以及标题。
TabbedPage TabbedPage是一个容器页面。选项卡式页面充当容器, 该容器保存与每个选项卡关联的内容页面。
CarousalPage 允许一览显示其他视图的页面。

布局

页面中的子元素称为布局

Xamarin.Forms
Layouts Description
StackLayout 在StackLayout中, 所有子元素都保持一行。 StackLayout是最常用的布局。
AbsoluteLayout 使用锚点将子布局定位在指定位置的视图, 以定义位置和大小。
RelativeLayout 在RelativeLayout中, 我们使用约束将元素彼此相对放置。
Grid 就像表一样, 将多个视图按行和列排列。

布局包含许多元素, 称为视图。

Xamarin.Forms

细胞

视图的子元素称为单元。

Xamarin.Forms
Cells Description
EntryCell 该单元格包含标签和单行输入元素
SwitchCell 此单元格与开关相同, 但在此之前有一个标签。
TextCell 该单元格包含主字段和辅助字段。
ImageCell 也包含图像的文本单元格

页

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

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

在Xamarin中, 可以使用六种类型的页面。

  • 内容页
  • MasteDetail页面
  • 导航页
  • 标签页
  • 模板页面
  • 轮换页面
Xamarin.Forms

内容页

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

在这里, 我们将借助Visual Studio 2017中的Xamarin.Forms研究内容页面的结构。

要在Visual Studio中创建页面, 我们将遵循以下步骤。

页

Xamarin.Forms

创建内容页面的过程

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

Xamarin.Forms

单击Visual C＃->选择跨平台->选择移动应用(Xamarin.Forms)

Xamarin.Forms

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

Xamarin.Forms

选择空白模板以创建Xamarin应用程序->选择平台->选择代码共享策略->单击确定。

Xamarin.Forms

打开解决方案资源管理器->单击MainPage.Xaml->构建应用程序->测试应用程序, 然后单击Android仿真器

Xamarin.Forms

输出

特性：

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

边距：边距属性表示元素与其相邻元素之间的距离。

填充：填充表示元素与其子元素之间的距离, 用于将控件与其自身的内容分开。

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主详细信息页面

Xamarin.Forms MasterDetailPage是一个页面, 用于管理两个相关页面之间的信息, 而Master Page则显示项目, Detail页面显示有关Master页上项目的详细信息。

在这里, 我们将说明如何使用MasterDetailPage以及页面之间的导航。

  • 容器有两页, 主页面和详细页面
  • 主菜单包含菜单列表
  • 详细信息页面显示详细信息和链接以返回至母版页面。

项目列表的位置与每个平台相同, 并且在选择项目后将导航到相应的详细信息页面。母版页还具有导航功能, 即导航栏, 其中包含可用于导航到活动详细信息页面的按钮。

  • 在iOS上, 导航栏位于页面的顶部, 并且在详细信息页面上具有一个按钮。我们还可以通过向左滑动母版页导航到活动详细信息页。
  • 在Android上, 导航栏位于页面的顶部, 并显示标题, 图标和按钮, 它们导航到详细信息页面。该图标在[Actitvity]属性中定义, 该属性装饰Android平台中的MainActivity类。

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();
        }
    }
}

输出

Xamarin.Forms

在这里, 我们将在”母版页”上添加更多内容, 并在按钮中导航更多页面

添加一个新页面(Page1.Xaml)

右键单击ProjectName-> Add-> Content Page-> Add Page Name(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>

输出

Xamarin.Forms

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

输出

Xamarin.Forms

我们将学到什么

  • 在这里, 我们将学习如何使用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。形式不仅仅是控制

Xamarin。表单提供20多种跨平台用户界面控件；每个控件都有特定于Xamarin的API。形式, 但以其本机iOS, Android或UWP对应形式发出。换句话说, 是Xamarin。表单标签控件将作为iOS UI标签发出。

一些内置的Xamarin.Forms控件在iOS和Android上原生呈现。

Xamarin.Forms不仅限于此

  • 它还提供了几种不同的页面布局, 其中包括控制其他页面的导航堆栈的导航页面。选项卡式页面包含可以通过选项卡访问的其他页面和主从页面。
  • Xamarin.Forms提供了一种布局方法来控制页面内的布局, 这称为布局。
  • 它还提供了绑定引擎的功能, 以便包含该属性的类可以”绑定”到控件上的属性, 例如Label上的Text属性。 Xamarin.Forms可以加快开发时间。
  • 包括一个称为Messaging Center的消息传递服务, 该服务允许各种类和组件进行通信而彼此之间不了解。
  • 效果是一种我们可以创建特定于平台的小型用户界面进行控制并应用于共享项目的方法。
  • 使用自定义渲染器, 我们可以完全控制控件在Xamarin中的渲染方式。因此, 在表单中, 我们可以添加我们可能需要的功能的其他外观。
  • 并带有最新版本的Xamarin。表单, 我们甚至可以直接将仅在一个平台上受支持的控件(例如Android Floating操作按钮)直接添加到XAML文件中。

共享项目和PCL(便携式类库)之间的区别

这是共享项目的两种方式。两者都使我们能够在Android, iOS和Windows等不同平台之间共享项目。

共享项目和PCL(便携式类库)之间的区别是：

共享项目 可移植类库
并排 每个项目将包括共享项目中的所有资源。可移植程序集(DLL文件)已引用所有对象。
Benefits 共享代码可以分支。可以添加特定于平台的参考。重构总是更新所有引用。如果我们计划与他人共享结果集, 那么这是一个很好的解决方案
Disadvantages 没有输出, 不利于与其他开发人员共享。在”无效代码”内部进行重构不会对其进行更新。没有特定于平台的参考。 .NET框架只有一部分可用。

导航页

导航页面管理页面之间的导航。它使用基于堆栈的体系结构, 并包含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));

        }
    }
}

应用程式

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
        }
    }
}

网页

<?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;

        }

      
    }
}

输出

Xamarin.Forms

在这里, 我们将在”用户名, 密码”文本空间中填写信息, 然后单击”登录”。

Xamarin.Forms

填写完信息后, 此页面会将我们切换到导航页面。

导航页

Xamarin.Forms

单击此突出显示的箭头后, 我们将切换回登录页面。

Xamarin.Forms

选择器

在这里, Xamarin.Forms中提供了三种类型的选择器。

1.日期选择器

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>

输出

Xamarin.Forms
Xamarin.Forms

2.时间选择器

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);
        }
    }
}

输出

Xamarin.Forms

4.选择器(称为下拉列表)

<?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));
            }
        }
    }
}

输出

Xamarin.Forms

标签页

选项卡式页面包含多个页面或选项卡, 并允许在每个页面或选项卡之间进行导航。它的行为就像父母, 其他所有孩子都是它的孩子。这是不同设备上不同类型的选项卡式页面的示例。我们可以在底部看到iOS中的标签, 而在Android中, 顶部可以看到Window phone标签。

Xamarin.Forms

流程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();
        }
    }
}

输出

Xamarin.Forms

工程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();
        }
    }
}

第1页

<?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>

第2页

<?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文件夹中的资源中。

第1页

将对所有页面重复该过程以添加图标。

输出

Xamarin.Forms

轮播页面

用户可以左右滑动以浏览内容页面的一种PAGE类型, 例如图库。它包含页面和显示区域的列表。

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

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

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

轮播页面：默认行为

Xamarin.Forms
Xamarin.Forms

轮播页面外观

Xamarin.Forms

加载页面列表

  • 提供页面列表作为轮播页面的子页面。
  • 为ItemTemplate定义数据模板, 然后将集合分配给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>

应用程式

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
        }
    }
}

输出

Xamarin.Forms

模板页面

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

第1页

不使用模板

<?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

输出

Xamarin.Forms

带模板

第2页

<?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中, 我们可以像这样工作来制作模板。

应用程式

<?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.Forms是Xamarin最强大的功能之一, 可用于创建跨平台应用程序。借助它们, 我们可以达到数十亿个智能设备。毫无疑问, 由于Xamarin具有无缝的API集成功能, 因此它已成为企业的”选择”。

微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

swift数据类型介绍 – Swift最新教程
App/移动开发/跨端

03-20 582
swift闭包和闭包函数 – Swift最新教程
App/移动开发/跨端

03-20 518
Swift编程语言的历史介绍
App/移动开发/跨端

03-20 480
Swift变量介绍和用法详解
App/移动开发/跨端

03-20 492
Swift数组介绍和用法详细示例
App/移动开发/跨端

03-20 624
swift数组的使用和操作全解 – Swift最新教程
App/移动开发/跨端

03-20 518
没有账号？ 忘记密码？