移动应用程序已有10年汗青。在已往的十年中，我们看到网站颠末从头设计，可以扩展并相应各种移动装备，如平板电脑和智能手机，以提供移动原生应用UI。然而，随着移动应用程序越来越受智能手机宁静板电脑在iOS，Android和Windows这三个首要平台上的贩卖增加的影响，这使得现有的设计机构，网页设计师和开辟职员处于一个十字路口。若何在操纵团队现有的设计和开辟技术的同时支撑这些移动平台的开辟，而无需花时间进修新的编程语言，如AndroidforJava，Objective-CforiOS和C＃forWindows。什么是XAMARIN情势？XamarinForms是一个移动应用程序平台，与Windows和Mac上提供的MicrosoftVisualStudioIDE绑缚在一路。借助XamarinForms，设计职员和开辟职员可以从单个共享C＃代码库构建合用于iOS，Android和Windows的本机应用程序。在已往的两年里，我花了许多时间进修XamarinForms为客户开辟应用程序，我决定创建这篇文章，让网页设计师和Web开辟职员深入相识使用XamarinForms开辟应用程序以及在开辟过程中学到的一些经验教训。通过本文，我将假设您具有编程语言的基础级别，或者设计职员可以很好地理解HTML和CSS。XAMARINForms若何运作XamarinForms的工作原理是将您创建的UI元素从共享PCL（可移植类库）UI代码映射到Windows，Android和iOS上响应的本机等效代码。以是这意味着您的应用程序完满是原生的！每个XamarinForms页面分为两部门。用于处置惩罚UI和CODEBEHIND文件的Visual部门的XAML文件，用于处置惩罚该页面的举动，比方按钮和显示数据。用户界面……XAML或C＃？XamarinForms为您提供了两个创建应用程序用户界面的选项。XAML起首是XAML（可扩展应用程序标志语言）。对于前端设计职员而言，这是一种抱负的移动UI开辟方法。假如您有使用XML，HTML，CSS等创建UI的经验或常识，您会发现认识使用此标志，尤其是借助VisualStudios有效的intellisense。对于任何现有的.NET开辟职员来说，使用WPF或Silverlight开辟桌面应用程序的好新闻，您将可以或许在险些没有进修曲线的环境下运行，而且您风俗使用的XAML标志差不多。下面是使用XAML创建的简朴UI的示例。正如您所看到的，全部元素都包罗在HTML中，如标志，而且在每个标志中都有可以配置值的属性。
C＃第二个选项是在代码中创建UI。假如您是Web开辟职员，知道C＃或其他面向对象的编程语言，或者可能是Web开辟职员更风俗于后端编程，那么这可能是您决定创建移动应用程序用户界面的选项。对于不风俗编程标志的设计职员来说，语法可能看起来很希奇，但这里的内容是上面的XAML标志和下面的C＃代码产生完全相同的UI。usingXamarin.Forms;varprofilePage=newContentPage{Title="Profile",Icon="Profile.png",Content=newStackLayout{Spacing=20,Padding=50,VerticalOptions=LayoutOptions.Center,Children={newEntry{Placeholder="Username"},newEntry{Placeholder="Password",IsPassword=true},newButton{Text="Login",TextColor=Color.White,BackgroundColor=Color.FromHex("77D065")}}}};varsettingsPage=newContentPage{Title="Settings",Icon="Settings.png",(...)};varmainPage=newTabbedPage{Children={profilePage,settingsPage}};下图显示了我们通过XAML和C＃中的标志创建的UI以及它在iOS，Android和Windows三个平台上的外观。那么……对于UI来说最好的？凭据我在成为完备仓库.NET开辟职员之前以前端设计配景得到的经验，我会说我固然发现使用XAML创建UI是首选方法，由于它为您提供了一个与我在此中创建的HTML网页雷同的条理布局已往。一旦您相识了控件，结构和相关属性，就可以很是直接地从相应式Web设计中获取您所知的设计概念，并将其应用于本机移动应用程序界面。同样，您选择的UI选项完全取决于您当前的技术组合以及您最适合进修的内容，可是，对于XamarinForms的新手，我以为XAML将是您的最佳选择。因此，对于本文的其余部门，我将向您展示的全部UI示例都将使用XAML标志。页面，结构和节制像大大都现代网站一样，移动应器具有雷同的用户界面和页面元 XamarinForms为您提供开箱即用的一套杰出的页面，结构和控件，让您最先开辟移动应用程序。PAGES您可以使用五种首要页面类型构建UI，这些类型包括ContentPage，MasterDetailPage，NavigationPage，TabbedPage和CarouselPage。内容页面这是XamarinForms中最简朴的页面类型，ContentPage只能包罗一个元素。在下面的示例中，我们有一个带有单个按钮元素的内容页面。在现实应用程序中，只有一个元素的页面很是少，因此每每内容页面将具有单个结构容器，然后您可以向结构添加很多控件元素。MASTERDETAILPAGE该页面类型基本上有两个部门：“主”和“细节”。主页面每每是一个结构，此中包括一个汉堡包样式菜单，此中包罗您可以导航到的页面列表。从菜单中选择此中一个页面后，结构将显示“具体信息”页面，该页面是所选页面的内容。导航页面导航页面用于通过您的应用程序提供导航体验，以便向前和向后导航。导航页面使用仓库花样，这意味着当您向前导航时，当前页面将被推送到仓库下方，新页面将被晋升到仓库顶部，同样为了向后移动，当前页面将弹回而且上一页面被推送到仓库顶部。这种类型的页面每每用于数据输入的Web样式表单。在下面的示例中，我们在用户登录应用程序后看到一个注册页面，可是在左上角注重到您看到一个向后箭头按钮。这向用户显示他们可以向后导航到上一页。TABBEDPAGE与网站上的标签一样，TabbedPage使您可以或许以标签菜单花样显示多个页面。这种类型的页面类型常常呈现在消息应用程序中，用于分隔文章或部门的类型。假如您检察手机上的Twitter应用程序，您将看到一个TabbedPage示例，此中包罗一组分隔标签的图标。CAROUSELPAGE与此页面的名称一样，它是一种页面类型，许可您拥有可以使用手指滑下手势导航到的子页面或对象的荟萃。此页面类型每每用于图库/视频荟萃的图库样式应用程序。这种类型的页面使用的一个很好的例子是像Instagram如许的照片库应用程序。LAYOUTSXamarinForms再次提供了大量的结构，以顺应您但愿开辟的任何类型的应用程序。这些结构是StackLayout，AbsoluteLayout，RelativeLayout，GridLayout，ContentView，ScrollView，末了是Frame。在本文中，我将重点先容在使用XamarinForms最先创建移动应用程序时更有可能使用的三个首要内容。STACKLAYOUTStackLayout可能是您在XamarinForms中创建用户界面时使用最常用的结构。StackLayout许可您默认在程度或垂直偏向上在一行中显示多个元素。您还可以使用StackLayout作为基本结构创建更复杂的用户界面，然后在此中嵌套其他StackLayout或其他结构。您可以在下面的示例中看到有一个基本StackLayout，此中包罗五个子元素，两个标签，两个EntryCells，末了一个按钮。检察全部子元素若何以垂直仓库花样分列。下面是XAML中的标志，它天生了这个例子。
绝对结构假如您正在探求对UI中元素的更多节制，比方在屏幕上定位和调解巨细，那么这就是您的结构。正在使用的AbsoluteLayout的好例子是应用程序的登录页面。比方，让我们来看看捷豹的移动应用程序，您可以看到屏幕顶部中央有一个Jaguar徽标，然后是一组位于屏幕底部的按钮和标签。网格我想在这里先容的末了一个结构是GridLayout。GridLayout用于按行和列分列UI元素。这里的首要内容是不要将此结构与HTML表格混合，并但愿可以或许使用它来显示Web样式表数据。GridLayout仅用于部署元素。使用GridLayout的好例子是Windows10Metro气概磁贴接口，电话键盘或计较器应用程序界面下面的示例。一旦您在XamarinForms中使用结构变得加倍恬静，您将看到组合和嵌套结构的无穷潜力，以实现精彩的用户界面。CONTROLS任何使用过MicrosoftVisualStudioIDE的人城市认识一个可以用来构建用户界面的预设控件的工具箱，在XamarinForms中，你可以当即使用30个左右的控件。再次像大大都网站设计一样，当您使用XamarinForms找到本身的方式时，思量到移动应用程序用户界面的相似性，您将首要使用较小的一组控件。下面我们将先容一些你将在XamarinForms中使用的首要控件，很快就会在控件中最先注重到你可以配置控件元素的属性，这些属性可以用于定位，改变外观或创建一个使用控件时的事务。假如您来自网页设计配景，您会发现这些属性可以让您认识。在网页设计的早期，元素的外观和显示首要来自标志中的内联属性，但此刻险些全部网站都使用CSS来处理控件属性及其各自的值。这里的好新闻是XamarinForms接纳了雷同的尺度，你可以像在下面的控件中看到的那样在内联标志中配置值，或者你可以在App.xaml文件的应用程序资源字典中配置样式规则。LABEL像网站上的标签一样，此控件用于显示文本。每每，在登录表单文本框之类的元素之上使用标签来指示用户他们应该在该控件中输入什么。
DATEPICKERDatepickers在UI顶用于捕捉或人的出生日期或日历样式应用程序，以选择创建条目标日期。在下面的标志中，您将看到属性“x：name”，此属性用于为您的控件提供一个ID，您可以在代码埋没文件中引用该ID以执行更多动态使命。
PICKER选择器控件是移动应用程序，相称于Web上的下拉列表。与网站一样，这可所以硬编码值，也可所以数据驱动的。你可以看到你声明晰Picker控件然后有一个子标签Picker.Items，你可以在这里添加你但愿在Picker中显示的值。在我的示例中，我显示了一个字符串列表，这可所以您但愿显示的任何数据类型的列表。
CreditCardDebitCardCashPROGRESSBAR一个抱负的可视指示器控件，用于显示用户在填写具有多个页面的表单时可能正在使用应用程序的进度。您将在HeightRequest下方的标志中看到一个新属性，此值配置为显示进度条线的粗细。您可以使用进度条控件的X：Name引用在代码埋没文件中配置此值来治理进度条“进度”值。您可以配置的值是0到1之间的小数，它指定着色条的分数。因此，比方要配置该值，您可以通过将以下内容添加到代码埋没文件ApplicationProgress.Progress=0.2f来声明该值。
滑块此节制不该与您常常在网站上看到的滑块旋转木马混合。此控件每每用于配置页面，比方智能手机屏幕上的亮度指示器。注重标志最小值和最大值中的2个属性。您可以将这些值配置为所需的值，默认环境下，假如不配置这些属性，则最小值从0最先，最大值为1。
列表显示ListView是移动应用程序设计中最常用的UI控件之一。它的首要功能是显示每每需要滚动的数据列表。移动应用中的ListView示例将是您手机中的接洽人列表，短信列表，Twitter或Facebook源，甚至可能是产物页面。在实际世界的移动应用程序中，ListView每每添补来自数据库或长途Web办事的动态数据。在下面的标志中，您将看到我们若何声明ListView，然后我们有一个子标记ListView.ItemTemplate，在此标志中我们可以配置我们但愿列表的显示方式以及ListView中的数据。我们若何在DataTemplate标志中配置我们执行此操作的数据。ListView有两个内置的DataTemplates供您使用，TextCell和ImageCell。在这个例子中，我们使用的是TextCell。TextCell模板有两个属性Text和Detail，在下面的屏幕截图中，这是一个简朴的事务应用程序，您会看到Text属性显示事务的位置，Text下面的Detail显示事务的Date。ListView对于移动应用程序的杰出UI很是紧张，因此您应该花时间进修ListView控件的全部方面。
运动指示器ActivityIndicator控件每每用于向用户显示移动应用程序中发生的事变。一个很好的例子是，假如用户在表单中输入了邮政编码并单击按钮以查找完备地址，则可能需要几秒钟才能返回数据，因此这是一个很好的控件，用于向用户显示应用程序正在研究一些器材而且不仅仅是瓦解了。运动指示器的外观和样式将在应用程序的目的平台上有所差别。
条目此控件基本上是Web设计者所称的文本框。输入文本的简朴元素。每每用于表格。在下面的标志中，您可以看到可以在Entry控件中配置的几个属性。另外两个要注重的是占位符，您可以在Entry控件中配置占位符文本，以便为用户提供应输入内容的一些指示。第二个是键盘，这是一个很好的属性，您可以在此中指定用户输入文本时要显示的装备上的键盘类型，比方，假如用户输入的电话号码，您可以选择“电话“这将强制装备显示数字键盘，就像打电话时的电话键盘一样。通过正确使用键盘属性，这使您的UI更易于用户使用。
按钮Button控件是另一个控件，Button控件首要用于在按下Button时触发事务。在下面的标志中，您可以配置很多属性来配置按钮和文本的样式，但要出格注重的一个属性是“单击”。这是单击按钮时触发的单击事务，您可以处置惩罚在页面的代码埋没文件中单击按钮时要执行的操作。在用户输入用户名和暗码后，按钮点击的示例将在登录页面上，然后事务将用户导航到接待屏幕或仪表板。
有关XamarinForms中全部可用控件的更深入细节以及一些高级用法，请检察Microsoft的此链接。https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/controls/viewsSTYLES为了削减重复编写相同的XAML标志来配置UI元素的样式，XamarinForms为您提供了在App.xaml页面中显式配置样式的方法，该标志名为ResourceDictionary。这与用于网页设计的CSS类似。您可觉得特定控件配置样式，并可以使用名为X：Key的引用属性将这些样式应用于UI中的控件。在下面的示例中，您将看到我为Button控件配置了样式并创建了一个名为PrimaryButton的X：Key引用。
