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

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

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

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

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

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

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));
        }   
    }
}
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 など）をポータブルまたは共有プロジェクトに追加し、以下のように参照を含めます。

   C#	コードのコピー
   using Xamarin.Forms; using C1.Xamarin.Forms.Chart;

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. 新しい Content Page（FlexPieQuickStart.xaml など）をポータブルまたは共有プロジェクトに追加し、<ContentPage> タグを変更して、以下のように参照を含めます。

   XAML	コードのコピー
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart" x:Class="QuickstartChart.FlexPieQuickStart">

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

   XAML	コードのコピー
   <StackLayout> <c1:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding="Value" Grid.Row="1" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand"> </c1:FlexPie> </StackLayout>

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

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

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

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

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

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

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

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

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

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

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

        C#	コードのコピー
        C1.Xamarin.Forms.Chart.Platform.iOS.FlexPieRenderer.Init();

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

        C#	コードのコピー
        C1.Xamarin.Forms.Chart.Platform.UWP.FlexPieRenderer.Init();

     4. Release モードで UWP アプリケーションをコンパイルする場合は、アプリケーションに正しいアセンブリを含めるために、App.xaml.cs の OnLaunched メソッドに次のコードを明示的に追加する必要があります。

        C#	コードのコピー
        var assembliesToInclude = new List<Assembly>(); assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Chart.Platform.UWP.FlexChartRenderer) .GetTypeInfo().Assembly); assembliesToInclude.Add(typeof(C1.UWP.Chart.FlexChart).GetTypeInfo().Assembly); Xamarin.Forms.Forms.Init(e, assembliesToInclude);

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