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

こんなのです。

ソースコード
技術的なお話
おわりに

ソースコード

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

noitaro/wpf-excel-shape-line

Contribute to noitaro/wpf-excel-shape-line development by creating an account on GitHub.

技術的なお話

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 で取得しています。

おわりに

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

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