oxyplot関連記事
やりたいこと
前回の記事で、Trackerの中身をカスタムしてみたが、結局見た目はデフォルトのまま(吹き出しみたいな形)だった。
それを、自前で書いた四角の中に囲むとかしたい。
前提
下記を使用。
- .NET Framework 4.7.2
- OxyPlot.Wpf v2.1.0-Preview1（Nuget）
やりかた
<oxy:PlotView.DefaultTrackerTemplate>に設定するTemplateの中身に、
<oxyshared:TrackerControl.Content>を入れて、その中に自前の見た目を入れていたが、
<oxyshared:TrackerControl.Content>を使うのをやめて、自前のCanvasを入れるようにする。
サンプル
画面xaml
コード中にも書いてるが、
DefaultTrackerTemplateの中のデータのSourceは、対応するグラフ(Series)の「TrackerHitResult」なので、そこからいろいろなデータをとれる。
詳細は下記の公式ドキュメントを参照。
※しかし見た目崩れてるし、読んでもよくわからんので、VisualStudio上でTrackerHitResultを選択してF12を押してたどっていった方が、何が取れるかを見やすい。
MainWindow.xaml
<Window x:Class="OxyPlotTest.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:OxyPlotTest"
xmlns:oxy="http://oxyplot.org/wpf"
xmlns:oxyshared="clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf.Shared"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
Name="root">
<Window.Resources>
<local:OxyColorToSolidColorBrushConverter x:Key="OxyColorToSolidColorBrushConverter"/>
</Window.Resources>
<Grid>
<!-- グラフ本体 -->
<oxy:PlotView Model="{Binding Model, ElementName=root}" Controller="{Binding Controller, ElementName=root}" >
<oxy:PlotView.DefaultTrackerTemplate>
<!-- DefaultTrackerTemplateの中のデータのSourceは「TrackerHitResult」なので、 -->
<!-- そこからいろんな情報を取れる -->
<ControlTemplate>
<!-- TrackerControlのContentをセットすると、デフォルトのTrackerの中身をカスタムする形になる。 -->
<!-- その場合、Trackerがはみ出さないように位置をええようにやってくれるっぽい -->
<!--<Grid>
<oxyshared:TrackerControl
Position="{Binding Position}"
VerticalLineVisibility="Collapsed"
HorizontalLineVisibility="Collapsed"
LineExtents="{Binding PlotModel.PlotArea}" >
<oxyshared:TrackerControl.Content>
<UniformGrid Columns="2">
<Rectangle Fill="{Binding Path=.Series, Converter={StaticResource OxyColorToSolidColorBrushConverter}}" Width="20" Height="20" StrokeThickness="3"/>
<TextBlock Text="{Binding Path=.Series.Title}" Margin="7" />
<TextBlock Text="X"/>
<TextBlock Text="{Binding Path=.DataPoint.X, StringFormat={}{0:F2}}"/>
<TextBlock Text="Y"/>
<TextBlock Text="{Binding Path=.DataPoint.Y, StringFormat={}{0:F2}}"/>
</UniformGrid>
</oxyshared:TrackerControl.Content>
</oxyshared:TrackerControl>
</Grid>-->
<!-- ControlTemplateの直下にCanvasを敷いて位置をPositionにバインドしてやると、 -->
<!-- ええかんじの場所にCanvasの中身が出てくれる -->
<!-- その場合、位置を自前で調整しないと画面外にはみ出たりする -->
<Canvas>
<Border CornerRadius="0 6 6 6" BorderBrush="Black" BorderThickness="1" Background="White" Canvas.Left="{Binding Position.X}" Canvas.Top="{Binding Position.Y}" Padding="5" Margin="0">
<UniformGrid Columns="2">
<Rectangle Fill="{Binding Path=.Series, Converter={StaticResource OxyColorToSolidColorBrushConverter}}" Width="20" Height="20" StrokeThickness="3"/>
<TextBlock Text="{Binding Path=.Series.Title}" Margin="7" />
<TextBlock Text="X"/>
<TextBlock Text="{Binding Path=.DataPoint.X, StringFormat={}{0:F2}}"/>
<TextBlock Text="Y"/>
<TextBlock Text="{Binding Path=.DataPoint.Y, StringFormat={}{0:F2}}"/>
</UniformGrid>
</Border>
</Canvas>
</ControlTemplate>
</oxy:PlotView.DefaultTrackerTemplate>
</oxy:PlotView>
</Grid>
</Window>
※コメントアウトしてる部分は、「通常の吹き出し型のTracker」を使ってる部分。
コードビハインド
いろいろ書いてるように見えるが、
赤、緑、青の線グラフを3本適当に引くだけのコード。
Trackerの設定とかはここには出てこない。
MainWindow.xaml.cs
using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;
namespace OxyPlotTest
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Init();
}
// OxyPlotのためのモデルとコントローラー
public PlotModel Model { get; } = new PlotModel();
public PlotController Controller { get; } = new PlotController();
// 軸の設定
public LinearAxis AxisX { get; } = new LinearAxis();
public LinearAxis AxisY { get; } = new LinearAxis();
public void Init()
{
// X軸の設定
AxisX.Position = OxyPlot.Axes.AxisPosition.Bottom; // 軸の位置(topにしたら、目盛りが上にくる)
// Y軸の設定
AxisY.Position = OxyPlot.Axes.AxisPosition.Left; // Y軸の位置(Rightにしたら、目盛りが右にくる)
// 設定した軸をモデルにセット
Model.Title = "グラフのタイトル";
Model.Axes.Add(AxisX);
Model.Axes.Add(AxisY);
// 3つ分の線グラフを作成
for (int i = 0; i < 3; i++)
{
// 色
var r = (byte)(i == 0 ? 0xff : 0);
var g = (byte)(i == 1 ? 0xff : 0);
var b = (byte)(i == 2 ? 0xff : 0);
// 線グラフ
var LineSeries = new OxyPlot.Series.LineSeries();
LineSeries.Title = "線グラフ1のタイトル";
LineSeries.InterpolationAlgorithm = InterpolationAlgorithms.UniformCatmullRomSpline;//グラフの角を丸める
LineSeries.Color = OxyColor.FromArgb(0xff, r, g, b); // 上の線の色
LineSeries.StrokeThickness = 2; // 線の太さ
// 点を追加
LineSeries.Points.Add(new DataPoint(1.0, 10.0 + 10.0 * i));
LineSeries.Points.Add(new DataPoint(5.0, 90.0 + 10.0 * i));
LineSeries.Points.Add(new DataPoint(9.0, 40.0 + 10.0 * i));
// 線グラフをモデルに追加
Model.Series.Add(LineSeries);
}
// セットした内容を反映させる
Model.InvalidatePlot(true);
}
}
// OxyColorから通常のColorのBrushに戻すコンバータ。
public class OxyColorToSolidColorBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is LineSeries ls)
{
var oc = ls.Color;
return new SolidColorBrush(Color.FromArgb(oc.A, oc.R, oc.G, oc.B));
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
出来上がりの見た目
※端までいくとはみ出る
この辺は、PlotAreaの高さと幅を見て、半分よりこっちなら描画位置を変える、的なコンバータを作ってやれば適当にごまかせそう(はみ出るのだけは防げそう)な気がする(試してない)。
参考
公式？のサンプルコード。
ドキュメントをみるよりこれを見た方が、何ができるかはわかりやすい。