作成日: 2021/01/26 最終更新日: 2021/01/26
文書種別
使用方法
詳細
C1FlexChartのAxisクラスはFrameworkElementではないため、DataContextを継承せず、直接Bindingを設定しても正しく動作しません。
例えば、AxisYのMin、Maxプロパティに値を直接設定する代わりに、ViewModelの設定値にバインドしても期待したスケールにはなりません。
軸のプロパティのバインディングを機能させるには、バインディングのソースを明示的に提供する必要があります。これは、次のようにFreezableオブジェクトを継承したカスタムのBindingProxyクラスを使用して実装します。
【サンプル】
(XAML)
(コード)
以下に、軸のMin、MaxをViewModelで設定した値(0、100)にバインドするプロジェクトの全体的なコードを記載します。
(MainWindow.xaml)
(MainWindow.xaml.cs)
例えば、AxisYのMin、Maxプロパティに値を直接設定する代わりに、ViewModelの設定値にバインドしても期待したスケールにはなりません。
軸のプロパティのバインディングを機能させるには、バインディングのソースを明示的に提供する必要があります。これは、次のようにFreezableオブジェクトを継承したカスタムのBindingProxyクラスを使用して実装します。
【サンプル】
(XAML)
<c1:C1FlexChart.AxisY>
<c1:Axis Title="温度 (C)"
Min="{Binding Path=Data.Min, Source={StaticResource Proxy}}"
Max="{Binding Path=Data.Max, Source={StaticResource Proxy}}"
MajorGrid="True" AxisLine="False" Position="Left" MajorTickMarks="None"></c1:Axis>
</c1:C1FlexChart.AxisY>
(コード)
public class BindingProxy : Freezable
{
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
以下に、軸のMin、MaxをViewModelで設定した値(0、100)にバインドするプロジェクトの全体的なコードを記載します。
(MainWindow.xaml)
<Window x:Class="FlexChartMultipleAxis.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:FlexChartMultipleAxis" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.Resources>
<local:BindingProxy x:Key="Proxy" Data="{Binding}"></local:BindingProxy>
</Grid.Resources>
<c1:C1FlexChart x:Name="flexChart" ItemsSource="{Binding Data}" BindingX="Time"
Grid.Row="1">
<c1:Series SeriesName="Tokyo" ChartType="LineSymbols" Binding="Temperature">
<c1:Series.Style>
<c1:ChartStyle Stroke="{Binding Path=Data.SeriesColor, Source={StaticResource Proxy}}"></c1:ChartStyle>
</c1:Series.Style>
</c1:Series>
<c1:Series SeriesName="Osaka" ChartType="LineSymbols" Binding="Temperature2">
<c1:Series.Style>
<c1:ChartStyle Stroke="{Binding Path=Data.SeriesColor2, Source={StaticResource Proxy}}"></c1:ChartStyle>
</c1:Series.Style>
</c1:Series>
<c1:C1FlexChart.AxisY>
<c1:Axis Title="温度 (C)"
Min="{Binding Path=Data.Min, Source={StaticResource Proxy}}"
Max="{Binding Path=Data.Max, Source={StaticResource Proxy}}"
MajorGrid="True" AxisLine="False" Position="Left" MajorTickMarks="None"></c1:Axis>
</c1:C1FlexChart.AxisY>
</c1:C1FlexChart>
</Grid>
</Window>
(MainWindow.xaml.cs)
using System;
using System.Collections.Generic;
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 FlexChartMultipleAxis
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
}
#region Binding Proxy
public class BindingProxy : Freezable
{
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
#endregion
#region View Model
public class ViewModel
{
public double Min { get; set; } = 0;
public double Max { get; set; } = 100;
public Brush SeriesColor
{
get
{
return Brushes.Red;
}
}
public Brush SeriesColor2
{
get
{
return Brushes.Green;
}
}
public List<DataModel> Data
{
get
{
return GetData();
}
}
public List<DataModel> GetData()
{
return new List<DataModel>()
{
new DataModel(){ Temperature2 = 10, Temperature = 3, Time = new DateTime(2020, 1, 1) },
new DataModel(){ Temperature2 = 15, Temperature = 8, Time = new DateTime(2020, 2, 1) },
new DataModel(){ Temperature2 = 5, Temperature = 9, Time = new DateTime(2020, 3, 1) },
new DataModel(){ Temperature2 = 45, Temperature = 7, Time = new DateTime(2020, 4, 1) },
new DataModel(){ Temperature2 = 16, Temperature = 15, Time = new DateTime(2020, 5, 1) },
new DataModel(){ Temperature2 = 48, Temperature = 38, Time = new DateTime(2020, 6, 1) },
};
}
}
public class DataModel
{
public double Temperature { get; set; }
public double Temperature2 { get; set; }
public DateTime Time { get; set; }
}
#endregion
}
関連情報
旧文書番号
86356