作成日: 2021/03/04 最終更新日: 2021/03/04
文書種別
使用方法
詳細
FlexChartでは、シリーズが1つの場合はデータを直接C1FlexChartにデータバインドすることでチャートが表示されます。
しかし、シリーズが複数あってそれぞれにデータをバインドする場合、SeriesのItemsSourceにデータを直接バインドすると、エラーが発生します。
C1FlexChartクラスがFrameworkElementであるのに対して、SeriesクラスはFrameworkElementではないためで、この場合DataContextを継承せずバインディングが機能しません。
【サンプル】※抜粋。正しく動作しません。
(XAML)
この動作を避けるため、1つ目のシリーズはC1FlexChartにバインドしたデータで表示し、2つ目以降のシリーズでは、データバインドにSystem.Windows.Freezableを継承した代理クラス(Proxyクラス)を用いる方法が考えられます。このProxyクラスで、シリーズのDataContextへのアクセスを提供します。
【サンプル】※抜粋。
(XAML)
以下に、2つのシリーズに異なるデータを表示するため、C1FlexChartに2つ目のシリーズを追加し、Proxyクラスを設定して利用するプロジェクトの全体的なコードを記載します。
(MainWindow.xaml)
しかし、シリーズが複数あってそれぞれにデータをバインドする場合、SeriesのItemsSourceにデータを直接バインドすると、エラーが発生します。
C1FlexChartクラスがFrameworkElementであるのに対して、SeriesクラスはFrameworkElementではないためで、この場合DataContextを継承せずバインディングが機能しません。
【サンプル】※抜粋。正しく動作しません。
(XAML)
<c1:C1FlexChart ChartType="Bar" ItemsSource="{Binding ChartData1, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" Binding="Quantity" BindingX="Name">
<c1:Series ItemsSource="{Binding ChartData2, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"/>
</c1:C1FlexChart>
この動作を避けるため、1つ目のシリーズはC1FlexChartにバインドしたデータで表示し、2つ目以降のシリーズでは、データバインドにSystem.Windows.Freezableを継承した代理クラス(Proxyクラス)を用いる方法が考えられます。このProxyクラスで、シリーズのDataContextへのアクセスを提供します。
【サンプル】※抜粋。
(XAML)
<Window.Resources>
<local:BindingProxy x:Key="Proxy" DataContext="{Binding}"></local:BindingProxy>
</Window.Resources>
<Grid>
<c1:C1FlexChart x:Name="flexChart" ChartType="Bar" ItemsSource="{Binding ChartData1, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Binding="Quantity" BindingX="Name">
<c1:Series SeriesName="Chart Data 1"></c1:Series>
<c1:Series SeriesName="Chart Data 2" ItemsSource="{Binding Path=DataContext.ChartData2, Source={StaticResource Proxy}, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"></c1:Series>
</c1:C1FlexChart>
</Grid>
(コード) public class BindingProxy : Freezable
{
public object DataContext
{
get { return (object)GetValue(DataContextProperty); }
set { SetValue(DataContextProperty, value); }
}
public static readonly DependencyProperty DataContextProperty =
DependencyProperty.Register("DataContext", typeof(object), typeof(BindingProxy), new PropertyMetadata(null));
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
}
以下に、2つのシリーズに異なるデータを表示するため、C1FlexChartに2つ目のシリーズを追加し、Proxyクラスを設定して利用するプロジェクトの全体的なコードを記載します。
(MainWindow.xaml)
<Window x:Class="FlexChartSeriesBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:FlexChartSeriesBinding"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<local:BindingProxy x:Key="Proxy" DataContext="{Binding}"></local:BindingProxy>
</Window.Resources>
<Grid>
<c1:C1FlexChart x:Name="flexChart" ChartType="Bar" ItemsSource="{Binding ChartData1, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Binding="Quantity" BindingX="Name">
<c1:Series SeriesName="Chart Data 1"></c1:Series>
<c1:Series SeriesName="Chart Data 2" ItemsSource="{Binding Path=DataContext.ChartData2, Source={StaticResource Proxy}, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"></c1:Series>
</c1:C1FlexChart>
</Grid>
</Window>
(コード:MainWindow.xaml.cs)using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace FlexChartSeriesBinding
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
}
public class BindingProxy : Freezable
{
public object DataContext
{
get { return (object)GetValue(DataContextProperty); }
set { SetValue(DataContextProperty, value); }
}
public static readonly DependencyProperty DataContextProperty =
DependencyProperty.Register("DataContext", typeof(object), typeof(BindingProxy), new PropertyMetadata(null));
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
}
public class ViewModel
{
public ObservableCollection ChartData1 => GetSampleData();
public ObservableCollection ChartData2 => GetSampleData();
private ObservableCollection GetSampleData()
{
Random rnd = new Random();
var data = new ObservableCollection();
data.Add(new DataItem() { Name = "A", Quantity = rnd.Next(10, 20) });
data.Add(new DataItem() { Name = "B", Quantity = rnd.Next(10, 20) });
data.Add(new DataItem() { Name = "C", Quantity = rnd.Next(10, 20) });
data.Add(new DataItem() { Name = "D", Quantity = rnd.Next(10, 20) });
data.Add(new DataItem() { Name = "E", Quantity = rnd.Next(10, 20) });
data.Add(new DataItem() { Name = "F", Quantity = rnd.Next(10, 20) });
return data;
}
}
public class DataItem
{
public string Name { get; set; }
public double Quantity { get; set; }
}
}
旧文書番号
86462