Приступая к работе с DataPagesGetting Started with DataPages

Загрузить образец загрузить примерDownload Sample Download the sample

Важно!

Требуется DataPages Xamarin.Forms темы ссылку для отображения.DataPages requires a Xamarin.Forms Theme reference to render.

Чтобы приступить к созданию простую страницу управляемых данными, с помощью предварительной версии DataPages, выполните следующие действия.To get started building a simple data-driven page using the DataPages Preview, follow the steps below. Этот демонстрационный использует, жестко стиля («события») в предварительной версии сборок, которые работает только с определенным форматом JSON в коде.This demo uses a hardcoded style ("Events") in the Preview builds that only works with the specific JSON format in the code.

1. Добавьте пакеты NuGet1. Add NuGet Packages

Добавьте следующие пакеты Nuget в проекты Xamarin.Forms .NET Standard библиотек и приложений:Add these Nuget packages to your Xamarin.Forms .NET Standard library and application projects:

  • Xamarin.Forms.PagesXamarin.Forms.Pages
  • Xamarin.Forms.Theme.BaseXamarin.Forms.Theme.Base
  • Это реализация темы Nuget (например)A theme implementation Nuget (eg. Xamarin.Forms.Theme.Light)Xamarin.Forms.Theme.Light)

2. Добавление ссылки на темы2. Add Theme Reference

В App.xaml добавьте пользовательский xmlns:mytheme для темы, причем темы объединяется в словаре ресурсов приложения:In the App.xaml file, add a custom xmlns:mytheme for the theme and ensure the theme is merged into the application's resource dictionary:

<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 AppDelegate и Android MainActivity.IMPORTANT: You should also follow the steps to load theme assemblies (below) by adding some boilerplate code to the iOS AppDelegate and Android MainActivity. Это будет улучшена в будущих предварительной версии.This will be improved in a future preview release.

3. Добавьте страницу XAML3. Add a XAML Page

Добавьте новую страницу XAML в приложение Xamarin.Forms и измените базовый класс из ContentPage для Xamarin.Forms.Pages.ListDataPage.Add a new XAML page to the Xamarin.Forms application, and change the base class from ContentPage to Xamarin.Forms.Pages.ListDataPage. Это должно осуществляться в C# и XAML:This has to be done in both the C# and the XAML:

Файл C#C# file

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

Файл XAMLXAML file

Помимо изменения корневого элемента, чтобы <p:ListDataPage> пользовательского пространства имен для xmlns:p также должен быть добавлен:In addition to changing the root element to <p:ListDataPage> the custom namespace for xmlns:p must also be added:

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

Подкласс приложенияApplication subclass

Изменение App конструктор класса, чтобы MainPage присваивается NavigationPage содержащий нового SessionDataPage.Change the App class constructor so that the MainPage is set to a NavigationPage containing the new SessionDataPage. На странице навигации по необходимо использоваться.A navigation page must be used.

MainPage = new NavigationPage (new SessionDataPage ());

3. Добавление источника данных3. Add the DataSource

Удалить Content элемента и замените ее строкой p:ListDataPage.DataSource для заполнения страницы с данными.Delete the Content element and replace it with a p:ListDataPage.DataSource to populate the page with data. В примере ниже Json удаленного файла данных загружается из URL-адрес.In the example below a remote Json data file is being loaded from a URL.

Примечание: предварительной версии требует StyleClass атрибут для предоставления подсказки визуализированного представления источника данных.Note: the preview requires a StyleClass attribute to provide rendering hints for the data source. StyleClass="Events" Ссылается на макет, который является стандартным в предварительной версии и содержит стили жестко для сопоставления используемого источника данных JSON.The StyleClass="Events" refers to a layout that is predefined in the preview and contains styles hardcoded to match the JSON data source being used.

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

Данные JSONJSON data

Пример данных JSON из Демонстрация источника показан ниже:An example of the JSON data from the demo source is shown below:

[{
  "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"
}]

4. Запустите!4. Run!

Описанные выше действия должно привести к работе страницы данных:The above steps should result in a working data page:

Это работает, поскольку стиль предварительно созданные «События» существует в пакет Nuget свет темы и стили, определенные, совпадает с источником данных (например)This works because the pre-built style "Events" exists in the Light Theme Nuget package and has styles defined that match the data source (eg. «title», «образ», «презентатором»)."title", "image", "presenter").

«События» StyleClass созданный для отображения ListDataPage управления с пользовательским CardView элемента управления, определенный в Xamarin.Forms.Pages.The "Events" StyleClass is built to display the ListDataPage control with a custom CardView control that is defined in Xamarin.Forms.Pages. CardView Элемент управления имеет три свойства: ImageSource, Text, и Detail.The CardView control has three properties: ImageSource, Text, and Detail. Темы запрограммирован для привязки три поля источника данных (из файла JSON) для этих свойств для отображения.The theme is hardcoded to bind the datasource's three fields (from the JSON file) to these properties for display.

5. Настройка5. Customize

Унаследованные стиля можно переопределить, указав шаблон и используя привязки источников данных.The inherited style can be overridden by specifying a template and using data source bindings. Ниже XAML объявляет пользовательского шаблона для каждой строки, с помощью нового ListItemControl и {p:DataSourceBinding} синтаксис, который включен в Xamarin.Forms.Pages Nuget:The XAML below declares a custom template for each row using the new ListItemControl and {p:DataSourceBinding} syntax which is included in the Xamarin.Forms.Pages Nuget:

<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.By providing a DataTemplate this code overrides the StyleClass and instead uses the default layout for a ListItemControl.

Разработчики, которые предпочитают C# и XAML можно создать данные источника привязки слишком (не забудьте включить using Xamarin.Forms.Pages; инструкции):Developers that prefer C# to XAML can create data source bindings too (remember to include a using Xamarin.Forms.Pages; statement):

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

Это немного больше усилий для создания темы с нуля (см. в разделе руководстве темы), но будущих предварительных выпусках будет облегчить эту задачу для выполнения.It's a little more work to create themes from scratch (see the Themes guide) but future preview releases will make this easier to do.

Устранение неполадокTroubleshooting

Не удалось загрузить файл или сборку «Xamarin.Forms.Theme.Light» или одну из ее зависимостейCould not load file or assembly 'Xamarin.Forms.Theme.Light' or one of its dependencies

В предварительной версии темы могут находиться не удалось загрузить во время выполнения.In the preview release, themes may not be able to load at runtime. Добавьте код, показанный ниже, в соответствующие проекты для устранения этой ошибки.Add the code shown below into the relevant projects to fix this error.

iOSiOS

В AppDelegate.cs добавьте следующие строки после LoadApplicationIn the AppDelegate.cs add the following lines after LoadApplication

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

AndroidAndroid

В MainActivity.cs добавьте следующие строки после LoadApplicationIn the MainActivity.cs add the following lines after LoadApplication

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