バージョン

展開

このトピックは、 XamPieChart コントロールの選択および展開ビヘイビアを実装する方法を説明します。トピックの最後で、完全なコード例を提供します。

トピックは以下のとおりです。

概要

XamPieChart コントロールは個々の円スライスの選択と展開 だけでなく、選択状態を変更しカスタム ロジックを実装することを可能にする SliceClick イベント をサポートします。

プレビュー

piechart explosion.png

図 1: コード例で実装された XamPieChart

要件

このトピックは、ユーザーが データ バインディング トピックを既に読んでいることを前提とし、初めにそのコードを使用します。

概要

  1. 各プロパティとイベント ハンドラーを構成します。

  2. イベント ハンドラーの実装

  3. (オプション) 結果の検証

手順

  1. 各プロパティとイベント ハンドラーを構成します。

データ バインディング トピックからのコードを開始ポイントにして、 AllowSliceSelection および AllowSliceExplosion のプロパティを True に設定して、pieChart_SliceClick をマウス クリックのイベント ハンドラーとして設定して、選択と展開を有効します。

XAML の場合:

<ig:XamPieChart Name="pieChart"
                   AllowSliceSelection="True"
                   AllowSliceExplosion="True"
                   SliceClick="pieChart_SliceClick" />
  1. イベント ハンドラーの実装

SliceClick でスライスの選択と展開状態を切り替えます。

C# の場合:

private void pieChart_SliceClick(object sender, Infragistics.XamarinForms.Controls.Charts.SliceClickEventArgs e)
{
   e.IsExploded = !e.IsExploded;
}
  1. (オプション) 結果を確認します

結果を検証するために、アプリケーションを実行します。円チャート コントロールは、適切なスライス外側の選択および展開によって SliceClick イベントに応答します。現在選択されているスライスのリストは、左上角でも保持されます(上図 1)

全コード例

以下は、コンテキストに実装された完全なコード例です。

ビュー

XAML の場合:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"
             x:Class="XamPieChart_SelectAndExplodeView">

<Grid>
    <ig:XamPieChart x:Name="pieChart"
                    LabelMemberPath="Label"
                    ValueMemberPath="Value"
                    AllowSliceExplosion="True"
                    LabelsPosition="BestFit"
                    ItemsSource="{Binding Data}"
                    SliceClick="pieChart_SliceClick">
    </ig:XamPieChart>
</Grid>

</ContentView>

コード ビハインド

C# の場合:

using Infragistics.XamarinForms.Controls.Charts;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace XamPieChart_SelectAndExplode
{
    public partial class Explosion : ContentView
    {
        public Data Data { get; set; }

        public Explosion()
        {
            InitializeComponent();
            Data = new Data();
            this.BindingContext = this;
        }

        private void pieChart_SliceClick(object sender, SliceClickEventArgs e)
        {
            e.IsExploded = !e.IsExploded;
        }
    }

    public class DataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

    public class Data : ObservableCollection<DataItem>
    {
        public Data()
        {
            Add(new DataItem { Label = "Administration", Value = 20 });
            Add(new DataItem { Label = "Sales", Value = 80 });
            Add(new DataItem { Label = "IT", Value = 30 });
            Add(new DataItem { Label = "Marketing", Value = 80 });
            Add(new DataItem { Label = "Development", Value = 40 });
            Add(new DataItem { Label = "Customer Support", Value = 60 });
        }
    }
}