Xamarin.Forms 使用者界面——控件——DataPages——入門

DataPages入門

要使用DataPages預覽開始建構簡單的資料驅動器頁面，請按照以下步驟操作。該示範在預覽版本中使用寫死樣式（“事件”），僅适用于代碼中的特定JSON格式。

添加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"
}]
           

運作！

上述步驟應導緻工作資料頁面：

這是因為預制樣式“事件”存在于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

。

喜歡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);