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

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

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

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

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

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

public class ThingSale
    {
        private static List<string> Categories = new List<string> { "Music", "Video", "Books", "Electronics", "Computers & Tablets" };
        private static Dictionary<string, List<string>> AllCategories = new Dictionary<string, List<string>>();
        public string Category { get; set; }
        public double? Sales { get; set; }
        public List<ThingSale> Items { get; set; }

        public static void EnsureInitAllCategories()
        {
            if (AllCategories.Count > 0)
            {
                return;
            }
            AllCategories.Add("Music", new List<string> { "Country", "Rock", "Classical", "Soundtracks", "Jazz", "Electronic" });
            AllCategories.Add("Country", new List<string> { "Classic Country", "Cowboy Country", "Outlaw Country", "Western Swing", "Roadhouse Country" });
            AllCategories.Add("Rock", new List<string> { "Hard Rock", "Blues Rock", "Funk Rock", "Rap Rock", "Guitar Rock", "Progressive Rock" });
            AllCategories.Add("Classical", new List<string> { "Symphonies", "Chamber Music" });
            AllCategories.Add("Soundtracks", new List<string> { "Movie Soundtracks", "Musical Soundtracks" });
            AllCategories.Add("Jazz", new List<string> { "Smooth Jazz", "Vocal Jazz", "Jazz Fusion", "Swing Jazz", "Cool Jazz", "Traditional Jazz" });
            AllCategories.Add("Electronic", new List<string> { "Electronica", "Disco", "House" });

            AllCategories.Add("Video", new List<string> { "Movie", "TV" });
            AllCategories.Add("Movie", new List<string> { "Kid & Family", "Action & Adventure", "Animation", "Comedy", "Drama", "Romance" });
            AllCategories.Add("TV", new List<string> { "Science Fiction", "Documentary", "Fantasy", "Military & War", "Horror" });

            AllCategories.Add("Books", new List<string> { "Arts & Photography", "Children's Books", "History", "Mystery", "Romance", "Sci-Fi & Fantasy" });
            AllCategories.Add("Arts & Photography", new List<string> { "Architecture", "Graphic Design", "Drawing", "Photography", "Performing Arts" });
            AllCategories.Add("Children's Books", new List<string> { "Beginning Readers", "Board Books", "Chapter Books", "Coloring Books", "Picture Books", "Sound Books" });
            AllCategories.Add("History", new List<string> { "Ancient", "Medieval", "Renaissance" });
            AllCategories.Add("Mystery", new List<string> { "Thriller & Suspense", "Mysteries" });
            AllCategories.Add("Romance", new List<string> { "Action & Adventure", "Holidays", "Romantic Comedy", "Romantic Suspense", "Western", "Historical" });
            AllCategories.Add("Sci-Fi & Fantasy", new List<string> { "Fantasy", "Gaming", "Science Fiction" });

            AllCategories.Add("Electronics", new List<string> { "Camera", "Headphones", "Cell Phones", "Wearable Technology" });
            AllCategories.Add("Camera", new List<string> { "Digital Cameras", "Film Photography", "Lenses", "Video", "Accessories" });
            AllCategories.Add("Headphones", new List<string> { "Earbud headphones", "Over-ear headphones", "On-ear headphones", "Bluetooth headphones", "Noise-cancelling headphones", "Audiophile headphones" });
            AllCategories.Add("Cell Phones", new List<string> { "Cell Phone", "Accessories" });
            AllCategories.Add("Accessoriess", new List<string> { "Batteries", "Bluetooth Headsets", "Bluetooth Speakers", "Chargers", "Screen Protectors" });
            AllCategories.Add("Wearable Technology", new List<string> { "Activity Trackers", "Smart Watches", "Sports & GPS Watches", "Virtual Reality Headsets", "Wearable Cameras", "Smart Glasses" });

            AllCategories.Add("Computers & Tablets", new List<string> { "Desktops", "Laptops", "Tablets" });
            AllCategories.Add("Desktops", new List<string> { "All-in-ones", "Minis", "Towers" });
            AllCategories.Add("Laptops", new List<string> { "2 in 1 laptops", "Traditional laptops" });
            AllCategories.Add("Tablets", new List<string> { "IOS", "Andriod", "Fire OS", "Windows" });
        }
        public static IEnumerable<ThingSale> GetData()
        {
            EnsureInitAllCategories();
            var result = new List<ThingSale>();
            Categories.ForEach(cat =>
            {
                result.Add(Create(cat));
            });

            return result;
        }

        private static ThingSale Create(string category)
        {
            var rand = new Random(0);
            var item = new ThingSale { Category = category };
            if (!AllCategories.ContainsKey(category))
            {
                item.Sales = rand.NextDouble() * 100;
            }
            else
            {
                item.Items = new List<ThingSale>();
                AllCategories[category].ForEach(subCat =>
                {
                    item.Items.Add(Create(subCat));
                });
            }
            return item;
        }
    }

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

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

C# のコード

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

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

2. TreeMap コントロールを MainPage( ) メソッドでインスタンス化します。

   C#

   コードのコピー

   public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); treeMap.ChartType = C1.Xamarin.Forms.Chart.TreeMapType.Squarified; treeMap.Binding = "Sales"; treeMap.BindingName = "Category"; treeMap.MaxDepth = 2; treeMap.ShowTooltip = true; treeMap.ChildItemsPath = "Items"; treeMap.ItemsSource = ThingSale.GetData(); treeMap.DataLabel = new C1.Xamarin.Forms.Chart.ChartDataLabel() {Content = "{name}{type}", Position = C1.Xamarin.Forms.Chart.ChartLabelPosition.Center}; } }

XAML のコード

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

   XAML	コードのコピー
   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TreeMap_QS" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart" x:Class="TreeMap_QS.MainPage">

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

   XAML	コードのコピー
   <c1:C1TreeMap x:Name="treeMap" Binding="Sales" BindingName="Category" MaxDepth="2" ChildItemsPath="Items"> <c1:C1TreeMap.DataLabel> <c1:ChartDataLabel Content="{}{type}"> <c1:ChartDataLabel.Style> <c1:ChartStyle FontSize="10" /> </c1:ChartDataLabel.Style> </c1:ChartDataLabel> </c1:C1TreeMap.DataLabel> </c1:C1TreeMap> </ContentPage>

3. ソリューションエクスプローラーで、QuickStart.xaml ノードを展開し、QuickStart.xaml.cs を開いて、C# コードビハインドを開きます。
4. QuickStart() クラスコンストラクタで、TreeMap の ItemSource プロパティを ThingSale.GetData() に設定します。
   

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

   C#	コードのコピー
   public QuickStart() { InitializeComponent(); this.TreeMap.ItemsSource = ThingSale.GetData(); }

先頭に戻る

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

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

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

     C#	コードのコピー
     public App() { InitializeComponent(); MainPage = new MainPage(); }

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

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

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

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

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

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

        C#	コードのコピー
        C1.Xamarin.Forms.Chart.Platform.UWP.FlexChartRenderer.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］キーを押してプロジェクトを実行します。