天天看点
返回

Xamarin.Forms 用户界面——控件——DataPages——入门 DataPages入门 故障排除

DataPages入门

要使用DataPages预览开始构建简单的数据驱动器页面，请按照以下步骤操作。该演示在预览版本中使用硬编码样式（“事件”），仅适用于代码中的特定JSON格式。

Xamarin.Forms 用户界面——控件——DataPages——入门 DataPages入门 故障排除

添加NuGet软件包

将这些Nuget软件包添加到您的Xamarin.Forms PCL和应用程序项目中：

  • Xamarin.Forms.Pages
  • Xamarin.Forms.Theme.Base
  • 主题实现Nuget（例如Xamarin.Forms.Themes.Light）

2.添加主题参考

在App.xaml文件中，

xmlns:mytheme

为主题添加自定义，并确保将主题合并到应用程序的资源字典中：

<Application xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:mytheme="clr-namespace:Xamarin.Forms.Themes;assembly=Xamarin.Forms.Theme.Light"
  x:Class="DataPagesDemo.App">
    <Application.Resources>
        <ResourceDictionary MergedWith="mytheme:LightThemeResources" />
    </Application.Resources>
</Application>

重要信息：您还应该 通过向iOS 和Android 添加一些样板代码，按照步骤加载主题程序集（如下所示）。这将在未来的预览版本中得到改进。

AppDelegate

MainActivity

3.添加XAML页面

新的XAML页面添加到Xamarin.Forms应用程序，并更改基类 从

ContentPage

到

Xamarin.Forms.Pages.ListDataPage

。这必须在C＃和XAML中完成：

C＃文件

public partial class SessionDataPage : Xamarin.Forms.Pages.ListDataPage // was ContentPage
{
  public SessionDataPage ()
  {
    InitializeComponent ();
  }
}

XAML文件

除了将根元素更改

<p:ListDataPage>

为自定义命名空间外，

xmlns:p

还必须添加：

<?xml version="1.0" encoding="UTF-8"?>
<p:ListDataPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:p="clr-namespace:Xamarin.Forms.Pages;assembly=Xamarin.Forms.Pages"
             x:Class="DataPagesDemo.SessionDataPage">

    <ContentPage.Content></ContentPage.Content>

</p:ListDataPage>

应用程序子类

更改

App

类构造函数，以便将其

MainPage

设置为

NavigationPage

 包含新的

SessionDataPage

。必须使用导航页面。

MainPage = new NavigationPage (new SessionDataPage ());

3.添加DataSource

删除

Content

元素并用a替换它以

p:ListDataPage.DataSource

 使用数据填充页面。在下面的示例中，正在从URL加载远程Json数据文件。

注意：预览需要一个

StyleClass

属性才能为数据源提供渲染提示。在

StyleClass="Events"

 指的是在预览预定义并且包含风格布局 硬编码被用来JSON数据源相匹配。

<?xml version="1.0" encoding="UTF-8"?>
<p:ListDataPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:p="clr-namespace:Xamarin.Forms.Pages;assembly=Xamarin.Forms.Pages"
             x:Class="DataPagesDemo.SessionDataPage"
             Title="Sessions" StyleClass="Events">

    <p:ListDataPage.DataSource>
        <p:JsonDataSource Source="http://demo3143189.mockable.io/sessions" />
    </p:ListDataPage.DataSource>

</p:ListDataPage>

JSON数据

来自演示源的JSON数据的示例 如下所示：

[{
  "end": "2016-04-27T18:00:00Z",
  "start": "2016-04-27T17:15:00Z",
  "abstract": "The new Apple TV has been released, and YOU can be one of the first developers to write apps for it. To make things even better, you can build these apps in C#! This session will introduce the basics of how to create a tvOS app with Xamarin, including: differences between tvOS and iOS APIs, TV user interface best practices, responding to user input, as well as the capabilities and limitations of building apps for a television. Grab some popcorn—this is going to be good!",
  "title": "As Seen On TV … Bringing C# to the Living Room",
  "presenter": "Matthew Soucoup",
  "biography": "Matthew is a Xamarin MVP and Certified Xamarin Developer from Madison, WI. He founded his company Code Mill Technologies and started the Madison Mobile .Net Developers Group.  Matt regularly speaks on .Net and Xamarin development at user groups, code camps and conferences throughout the Midwest. Matt gardens hot peppers, rides bikes, and loves Wisconsin micro-brews and cheese.",
  "image": "http://i.imgur.com/ASj60DP.jpg",
  "avatar": "http://i.imgur.com/ASj60DP.jpg",
  "room": "Crick"
}]

运行！

上述步骤应导致工作数据页面：

Xamarin.Forms 用户界面——控件——DataPages——入门 DataPages入门 故障排除

这是因为预制样式“事件”存在于Light Theme Nuget包中，并且具有与数据源匹配的样式（例如“title”，“image”，“presenter”）。

“事件” 

StyleClass

被构建为

ListDataPage

使用

CardView

在Xamarin.Forms.Pages中定义的自定义控件来显示控件。该

CardView

控制有三个属性：

ImageSource

，

Text

，和

Detail

。该主题被硬编码，以将数据源的三个字段（从JSON文件）绑定到这些属性以进行显示。

5.定制

可以通过指定模板并使用数据源绑定来覆盖继承的样式。下面的XAML使用Xamarin.Forms.Pages Nuget中 包含的新语法

ListItemControl

 和

{p:DataSourceBinding}

语法声明每行的自定义模板：

<p:ListDataPage.DefaultItemTemplate>
    <DataTemplate>
        <ViewCell>
            <p:ListItemControl
                Title="{p:DataSourceBinding title}"
                Detail="{p:DataSourceBinding room}"
                ImageSource="{p:DataSourceBinding image}"
                DataSource="{Binding Value}"
                HeightRequest="90"
            >
            </p:ListItemControl>
        </ViewCell>
    </DataTemplate>
</p:ListDataPage.DefaultItemTemplate>

通过提供一个

DataTemplate

这个代码覆盖，

StyleClass

 而代替使用默认布局

ListItemControl

。

Xamarin.Forms 用户界面——控件——DataPages——入门 DataPages入门 故障排除

喜欢C＃到XAML的开发人员也可以创建数据源绑定（记住要包括一个

using Xamarin.Forms.Pages;

语句）：

SetBinding (TitleProperty, new DataSourceBinding ("title"));

从头开始创建主题还有一点工作（参见主题指南），但是将来的预览版本会使这更容易做到。

故障排除

无法加载文件或程序集“Xamarin.Forms.Theme.Light”或其一个依赖项

在预览版本中，主题可能无法在运行时加载。将相关项目中的代码添加到相应的项目中以解决此错误。

iOS版

在AppDelegate.cs中添加以下行

LoadApplication

 
var x = typeof(Xamarin.Forms.Themes.DarkThemeResources);
x = typeof(Xamarin.Forms.Themes.LightThemeResources);
x = typeof(Xamarin.Forms.Themes.iOS.UnderlineEffect);

Android的

在MainActivity.cs中添加以下行

LoadApplication

 
var x = typeof(Xamarin.Forms.Themes.DarkThemeResources);
x = typeof(Xamarin.Forms.Themes.LightThemeResources);
x = typeof(Xamarin.Forms.Themes.Android.UnderlineEffect);
Xamarin xamarin.forms Xamarin.Forms 跨平台新势力
上一篇: Xamarin.Forms入门学习路线Xamarin.Forms入门学习路线
下一篇: Xamarin.Forms 用户界面——动画——简单动画 简单动画 概观 单一动画 复合动画 复合动画 取消动画 概要

继续阅读