DataPages 시작Getting Started with DataPages

샘플 다운로드 샘플 다운로드Download Sample Download the sample

중요

DataPages를 렌더링 하려면 Xamarin.ios 테마 참조가 필요 합니다.DataPages requires a Xamarin.Forms Theme reference to render. 이 것은 프로젝트에 Xamarin.Forms.Theme.Base NuGet 패키지 설치를 유발하고, Xamarin.Forms.Theme.LightXamarin.Forms.Theme.Dark NuGet 패키지 전체에로 따른다.This involves installing the Xamarin.Forms.Theme.Base NuGet package into your project, followed by either the Xamarin.Forms.Theme.Light or Xamarin.Forms.Theme.Dark NuGet packages.

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. NuGet 패키지 추가1. Add NuGet Packages

Xamarin.Forms.NET Standard 라이브러리 및 응용 프로그램 프로젝트에 이러한 Nuget 패키지를 추가 합니다.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
  • 테마 구현 (예: NugetA 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에 일부 상용구 코드를 추가 하 여 테마 어셈블리를 로드 하는 단계를 수행 해야 합니다.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. XAML 페이지 추가3. Add a XAML Page

Xamarin.Forms 응용 프로그램에 새 XAML 페이지를 추가 하 고 기본 클래스를 변경할 에서 ContentPageXamarin.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 ();
  }
}

XAML 파일XAML 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 데이터 원본에 대 한 렌더링 힌트를 제공 하는 특성이 필요 합니다.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>

JSON 데이터JSON 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", "image", "프레 젠 터")."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 컨트롤에는 세 가지 속성이 있습니다: ImageSourceText, 및 Detail합니다.The CardView control has three properties: ImageSource, Text, and Detail. 테마는 datasource의 세 필드 (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 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);