Visual Studio | WPF > グラフ > LiveCharts > 横軸の範囲をTextBoxで指定する > v0.1, v0.2

動作環境

Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2

処理内容

• TextBoxで横軸の範囲を指定する
• Button押下時に横軸範囲を変更する

参考 https://lvcharts.net/App/examples/v1/wpf/Data%20Pagination

code v0.1 > this.DataContext = this;

MainWindow.xaml

<Window x:Class="_171124_t1425_graphAxisSetting.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:_171124_t1425_graphAxisSetting"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <lvc:CartesianChart Height="200">
                <lvc:CartesianChart.Series>
                    <lvc:LineSeries Values="{Binding Line1Values}"/>
                </lvc:CartesianChart.Series>
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis MinValue="{Binding Xmin}" MaxValue="{Binding Xmax}"
                              Separator="{x:Static lvc:DefaultAxes.CleanSeparator}">
                    </lvc:Axis>
                </lvc:CartesianChart.AxisX>
            </lvc:CartesianChart>
            <TextBlock Text="xmin:"/>
            <TextBox Name="xaxismin" Width="200" Text="0"/>
            <TextBlock Text="xmax:"/>
            <TextBox Name="xaxismax" Width="200" Text="100"/>
            <Button Name="B_update" Height="30" Width="200" Content="Update axis" Click="B_update_Click"/>
        </StackPanel>
    </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;
// 以下を追加
using LiveCharts;
using LiveCharts.Wpf;
using System.ComponentModel;

namespace _171124_t1425_graphAxisSetting
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private double _xmin;
        private double _xmax;

        public MainWindow()
        {
            InitializeComponent();
            graph_init();
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public double Xmin
        {
            get { return _xmin; }
            set
            {
                _xmin = value;
                OnPropertyChanged("Xmin");
            }
        }


        public double Xmax
        {
            get { return _xmax; }
            set
            {
                _xmax = value;
                OnPropertyChanged("Xmax");
            }
        }

        public void graph_init()
        {
            Line1Values = new ChartValues<double> { 3, 1, 4, 1 };

            Xmin = 0;
            Xmax = 5;

            this.DataContext = this;
        }

        //public class GraphData
        //{
        //    public SeriesCollection seriesCollection { get; set; }
        //}


        public ChartValues<double> Line1Values { get; set; }

        private void B_update_Click(object sender, RoutedEventArgs e)
        {
            if(Int32.TryParse(xaxismin.Text, out int xmin))
            {
                Xmin = xmin;
            }
            if(Int32.TryParse(xaxismax.Text, out int xmax))
            {
                Xmax = xmax;
            }
        }
    }
}

失敗したところ

this.DataContext = this;

上記ではなく、下記のようにDataContextをgdとした場合、横軸の変更が実行されない。

            GraphData gd = new GraphData();

            var sc = new SeriesCollection
            {
                new LineSeries
                {
                    Values = new ChartValues<double> { 3, 1, 4, 1 }
                },
                new ColumnSeries
                {
                    Values = new ChartValues<double> { 2, 7, 1, 8 }
                }
            };

            gd.seriesCollection = sc;
            this.DataContext = gd;

DataContextのgdと、Xmin, Xmaxの関連がうまく取れていない。

このあたりは他のサンプルを見ながら理解を深めることになる。

code v0.2 > this.DataContext = gd;

クラスGraphDataを使用するように変更した。

参考: かずきのBlog@hatena by 大田一希さん

情報感謝です。

XAMLは同じで、code behindを以下としました。

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;
// 以下を追加
using LiveCharts;
using LiveCharts.Wpf;
using System.ComponentModel;

namespace _171124_t1425_graphAxisSetting
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public GraphData gd;

        public MainWindow()
        {
            InitializeComponent();
            graph_init();
        }

        public void graph_init()
        {
            gd = new GraphData();
            gd.Line1Values = new ChartValues<double> { 3, 1, 4, 1 };

            gd.Xmin = 0;
            gd.Xmax = 5;

            this.DataContext = gd;
        }

        public class GraphData : INotifyPropertyChanged
        {
            public double _xmin;
            public double _xmax;
            //public SeriesCollection seriesCollection { get; set; }
            public ChartValues<double> Line1Values { get; set; }

            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(string propertyName = null)
            {
                if (PropertyChanged != null)
                    PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
            public double Xmin
            {
                get { return _xmin; }
                set
                {
                    _xmin = value;
                    OnPropertyChanged("Xmin");
                }
            }
            public double Xmax
            {
                get { return _xmax; }
                set
                {
                    _xmax = value;
                    OnPropertyChanged("Xmax");
                }
            }
        }

        private void B_update_Click(object sender, RoutedEventArgs e)
        {
            if(Int32.TryParse(xaxismin.Text, out int xmin))
            {
                gd.Xmin = xmin;
            }
            if(Int32.TryParse(xaxismax.Text, out int xmax))
            {
                gd.Xmax = xmax;
            }
        }
    }
}