このセクションでは、移植可能なアプリまたは共有アプリに FlexPie コントロールを追加し、そこにデータを追加する方法について説明します。C# または XAML で Xuni コンポーネントを追加する方法については、「C# による Xuni コンポーネントの追加」または「XAML による Xuni コンポーネントの追加」を参照してください。

このトピックは 3 つの手順で構成されます。

• 手順 1：FlexPie のデータソースの作成
• 手順 2：FlexPie コントロールの追加
• 手順 3：プロジェクトの実行

次の図は、上記の手順を実行した後の FlexPie を示しています。

手順 1：FlexPie のデータソースの作成

次のクラスは、FlexPie のデータソースとして機能します。

以下のように System および System.Collections.Generic 参照を含めます。 using System; using System.Collections.Generic;

public class FlexPieDataSource
{
    private List<FruitEntity> entityList;

    public List<FruitEntity> Data
    {
        get { return entityList; }
    }

    public FlexPieDataSource()
    {
        entityList = new List<FruitEntity>();
        string[] fruits = new string[] { "みかん", "りんご", "なし", "バナナ", "パイナップル" };
        Random random = new Random();
        for (int i = 0; i < fruits.Length; i++)
        {
            decimal value = (decimal)random.NextDouble() * 100;
            entityList.Add(new FruitEntity(fruits[i], value));
        }   
    }
}
pubic class FruitEntity
{
    public string Name { get; set; }
    public decimal Value { get; set; }

    public FruitEntity(string name, decimal value)
    {
        this.Name = name;
        this.Value = value;
    }
}

先頭に戻る

手順 2：FlexPie コントロールの追加

C# または XAML で FlexPie コントロールを初期化するには、次の手順を実行します。

C# のコード

1. 新しいクラス（QuickStart.cs など）を Portable または Shared プロジェクトに追加し、以下のように Xuni FlexPie および Xamarin 参照を含めます。

   C#	コードのコピー
   using Xuni.Forms.FlexPie; using Xamarin.Forms;

2. FlexPie コントロールを新しいメソッド GetFlexPie() 内でインスタンス化します。

   C#	コードのコピー
   public static FlexPie GetFlexPie() { FlexPie chart = new FlexPie(); FlexPieDataSource ds = new FlexPieDataSource(); chart.BindingName = "Name"; chart.Binding = "Value"; chart.ItemsSource = ds.Data; return chart; }

XAML のコード

1. 新しい Forms XAML ページ（QuickStart.xaml など）を Portable または Shared プロジェクトに追加し、<ContentPage> タグを変更して、以下のように Xuni 参照を含めます。

   XAML	コードのコピー
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Forms.FlexPie;assembly=Xuni.Forms.FlexPie" >

2. FlexPie コントロールを初期化します。それには、コントロールの <ContentPage></ContentPage> タグ間の <StackLayout></StackLayout> タグ内で、次のようにマークアップを追加します。

   XAML	コードのコピー
   <xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value"> </xuni:FlexPie>

3. ソリューションエクスプローラーで、QuickStart.xaml ノードを展開し、QuickStart.xaml.cs を開いて、C# コードビハインドを開きます。
4. QuickStart() クラスコンストラクタで、FlexPieDataSource の新しいインスタンスを FlexPie の BindingContext として設定します。

   次のコードは、上の手順を実行した後の QuickStart() クラスコンストラクタを示します。

   C#	コードのコピー
   public QuickStart() { InitializeComponent(); chart.BindingContext = new FlexPieDataSource(); }

手順 3：プロジェクトの実行

1. ソリューションエクスプローラーで、App.cs をダブルクリックして開きます。
2. FlexPie コントロールを表示するには、次の手順を実行します。
   • C# クラスを返すには、次の手順を実行します。 クラスコンストラクタ App() で、新しい ContentPage を MainPage として設定し、コントロールを ContentPage の Content に割り当てます。それには、メソッド GetFlexPie() （前の手順「手順 2：FlexPie コントロールの追加」で定義済み）を呼び出します。

     次のコードは、上記の手順を実行した後のクラスコンストラクタ App() を示します。

     C#	コードのコピー
     public App() { // アプリケーションのルートページ MainPage = new ContentPage { Content = QuickStart.GetFlexPie() }; }

   • Forms XAML ページを返すには、次の手順を実行します。 クラスコンストラクタ App() で、Forms XAML ページ QuickStart を MainPage として設定します。

     次のコードは、この手順を実行した後のクラスコンストラクタ App() を示します。

     C#	コードのコピー
     public App() { // アプリケーションのルートページ MainPage = new QuickStart(); }

3. iOS および Windows Phone アプリを実行するには、いくつかの追加手順が必要です。
   • iOS アプリ：:
     1. ソリューションエクスプローラーで、YourAppName.iOS プロジェクト内の AppDelegate.cs をダブルクリックして開きます。
     2. 次のコードを FinishedLaunching() メソッドに追加します。

        C#	コードのコピー
        Xuni.Forms.FlexPie.Platform.iOS.Forms.Init();

   • Windows Phone アプリ:
     1. ソリューションエクスプローラーで、MainPage.xml を展開します。
     2. MainPage.xml.cs をダブルクリックして開きます。
     3. 次のコードをクラスコンストラクタに追加します。

        C#	コードのコピー
        Xuni.Forms.FlexPie.Platform.WinPhone.FlexPieRenderer.Init();

4. F5 キーを押してプロジェクトを実行します。

Copyright © GrapeCity inc. All rights reserved.