【WPF】Excel の 図形と線 みたいなのを作る

こんなのです。

ソースコード

ぐだぐだとソースの説明をしてもしょうが無いので、GitHub にプロジェクトを上げて置きました。

https://github.com/noitaro/wpf-excel-shape-line

技術的なお話

Thumb の現在位置を取得

Canvas コントロールの上に Thumb コントロールを置いて、ドラッグ移動できるようにしています。

その時 Thumb の現在位置を取得する方法ですね。

var point = new Point(Canvas.GetLeft(this), Canvas.GetTop(this));

Thumb に位置を設定

その逆です。

Canvas.SetLeft(this, point.X);
Canvas.SetTop(this, point.Y);

Thumb の Template に書いた コントロール を取得

Thumb コントロールの見た目を変えるのに Template を書き換えないと駄目なんだが、Template に書いたコントロールを取得するのに一癖あった。

var btn = Template.FindName("top", this) as Button;
var btn_Vector = VisualTreeHelper.GetOffset(btn);
var btnPoint = new Point(point.X, point.Y);

Behavior を動的に設定

UserControl を動かすのに Thumb 以外の方法だと MouseDragElementBehavior を使う手法がある。

今回は コードビハインド から設定したのでその方法。

var behaviors = Interaction.GetBehaviors(path);
var mouseDragElementBehavior = new MouseDragElementBehavior()
{
  ConstrainToParentBounds = true,
  X = point.X,
  Y = point.Y
};
behaviors.Add(mouseDragElementBehavior);
mouseDragElementBehavior.Dragging += (object sender, MouseEventArgs e) => { };

こんな感じで、初期位置と ドラッグ移動したときのイベントも設定できる便利なやつ。

コードビハインド から Behavior を取得

その逆。

var behaviors = Interaction.GetBehaviors(path);
var mouseDragElementBehavior = (MouseDragElementBehavior)behaviors.First();
mouseDragElementBehavior.SetValue(MouseDragElementBehavior.XProperty, point.X);
mouseDragElementBehavior.SetValue(MouseDragElementBehavior.YProperty, point.Y);

１つのコントロールに複数の Behavior が設定出来るが、今回は１つなので First で取得しています。

おわりに

コントロールを移動させる処理に手こずりました。

いろいろなアプローチがあるから、適材適所で使い分けていけたらいいと思います。