C#:wpf 三角形のボタンを作成して、マウスドラッグによって動かしたい

前提・実現したいこと

c# wpf　で三角形のボタンをマウスドラッグで動かすシステムを作っています。
ネットのものを参考に作っていますが、エラー文が出てしまいました。

私は初心者なのでネットのものを参考にしました。
https://qiita.com/LemonLeaf/items/4c5e957df4d39ddc911b
http://jr-kun.cocolog-nifty.com/blog/2019/01/c-wpf-9272.html
この二つのプログラムを組み合わせたいです。

TN8001

2020/11/13 10:27

> ネットのものを参考に作っていますが、エラー文が出てしまいました。エラーが出たならエラー文を、コードとともに質問に書いてください。「エラーが出ました」「調べました」だけでは、丸投げの質問と受け取られます。読んでいなければこちらに目を通しておいてください。 [質問するときのヒント｜teratail（テラテイル）](https://teratail.com/help/question-tips 合体すること自体はそこまで難しくはないですが、もしかしてこの先ボタンが増えたりしますか？（複数あるとなるとだいぶ実装が変わりますね）

koukousei_1

2020/11/14 00:19

初めて質問しました！返信ありがとうございます！！私は高校の課題研究で小学生のために図形の面積の求め方をわかりやすく説明するための教材を使っています。最初は授業で使ったことがあるWindowsフォームアプリケーションを使っていたのですが、ここ最近になってwpfの方が向いていると判断しました。なので、詳しいことが全くわかりません！！dictionaryには何を書くのか、どこでボタンの名前を定義しているのか、ネットの説明は難しくてよくわかりません。そこで、このサイトを見つけて、授業中に試しに質問をしてみました！こんな中途半端な質問をしてしまって本当に申し訳ないです！また今度しっかりとした質問をさせていただきますのでその時はよろしくお願いします！！

koukousei_1

2020/11/14 00:25

動かしたいボタンは増やしていくつもりです！三角形の公式の説明をするので、三角形のボタンを二つ（上向きと下向きの二種類）用意して、マウスドラッグによって動かされて指定された範囲内に置かれた時に、三角形の斜辺同士がピタッとくっつくようにしたいと考えています！！

TN8001

2020/11/14 12:33

なるほどそういう用途ですか。では「動かす対象の図形を触らなくても操作できるようにする」や「三角形のボタン」というのは必須というわけでもないんですね？「図形をドラッグして動かす」だけなら非常に簡単なのですが、上の2つが絡むと急に厄介なことになるのです^^; できるだけ簡単になるように考えたのですが、Blend For Visual Studioが入っていますかね？

koukousei_1

2020/11/15 23:09

Blend for Visual Studio 2019というものがありました。これでいいでしょうか。やってみますね！

行動規範の内容に同意します

回答1件

ベストアンサー

WPFで要素のドラッグ移動には、↓こういうのがあります（ありました？）
MouseDragElementBehavior クラス (Microsoft.Expression.Interactivity.Layout) | Microsoft Docs

現在Microsoftは（なかったことにしたい？のか）こちらに移行させたいようなのですが、元の半分程度の実装しかありません。
MouseDragElementBehavior · microsoft/XamlBehaviorsWpf Wiki

しかしまだ入手は可能です。
Download Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4 from Official Microsoft Download Center
Blend For Visual Studioがインストールされていれば、すでに入っているはずです（Blend For Visual Studioもまだインストール可能だと思うのですが、2019での入れ方がよくわかりませんでした）
Microsoft Expression Blend SDKのダウンロードリンク - vorfee's Tech Blog

xml
1<Window
2  x:Class="Questions304033.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6  xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
7  xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
8  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
9  xmlns:local="clr-namespace:Questions304033"
10  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
11  Title="MainWindow"
12  Width="800"
13  Height="450"
14  Loaded="Window_Loaded"
15  mc:Ignorable="d">
16  <Window.Resources>
17    <Storyboard x:Key="Storyboard1">
18      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="regularPolygon" Storyboard.TargetProperty="(UIElement.Opacity)">
19        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
20      </DoubleAnimationUsingKeyFrames>
21      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="regularPolygon1" Storyboard.TargetProperty="(UIElement.Opacity)">
22        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
23      </DoubleAnimationUsingKeyFrames>
24      <ColorAnimationUsingKeyFrames Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
25        <EasingColorKeyFrame KeyTime="0:0:1" Value="Orange" />
26      </ColorAnimationUsingKeyFrames>
27    </Storyboard>
28  </Window.Resources>
29  <Canvas>
30    <Button Click="Button_Click" Content="リセット" />
31    <ed:Callout
32      x:Name="callout"
33      Canvas.Left="447"
34      Canvas.Top="15"
35      Width="240"
36      Height="100"
37      AnchorPoint="-0.1,1"
38      CalloutStyle="Oval"
39      Content="どこにピッタリはまるかな？"
40      Fill="#FFF4F4F5"
41      Stroke="Black"
42      StrokeThickness="3" />
43    <ed:RegularPolygon
44      Canvas.Left="126"
45      Canvas.Top="270"
46      Width="120"
47      Height="120"
48      Fill="#FFF4F4F5"
49      InnerRadius="1"
50      PointCount="6"
51      Stretch="Fill"
52      Stroke="Black"
53      StrokeThickness="3" />
54    <Rectangle
55      x:Name="rectangle"
56      Canvas.Left="368"
57      Canvas.Top="280"
58      Width="100"
59      Height="100"
60      Fill="#FFF4F4F5"
61      RenderTransformOrigin="0.5,0.5"
62      Stroke="Black"
63      StrokeThickness="3">
64      <Rectangle.RenderTransform>
65        <TransformGroup>
66          <ScaleTransform />
67          <SkewTransform AngleX="-26.666" />
68          <RotateTransform />
69          <TranslateTransform />
70        </TransformGroup>
71      </Rectangle.RenderTransform>
72    </Rectangle>
73    <ed:RegularPolygon
74      Canvas.Left="597"
75      Canvas.Top="282"
76      Width="120"
77      Height="100"
78      Fill="#FFF4F4F5"
79      InnerRadius="1"
80      PointCount="5"
81      Stretch="Fill"
82      Stroke="Black"
83      StrokeThickness="3" />
84
85    <ed:RegularPolygon
86      x:Name="regularPolygon"
87      Canvas.Left="100"
88      Canvas.Top="70"
89      Width="100"
90      Height="100"
91      Fill="Orange"
92      PointCount="3"
93      RenderTransformOrigin="0.5,0.5"
94      Stroke="Black"
95      StrokeThickness="3">
96      <i:Interaction.Behaviors>
97        <ei:MouseDragElementBehavior
98          x:Name="mouseDragElementBehavior"
99          ConstrainToParentBounds="True"
100          DragFinished="MouseDragElementBehavior_DragFinished" />
101      </i:Interaction.Behaviors>
102      <ed:RegularPolygon.RenderTransform>
103        <TransformGroup>
104          <ScaleTransform />
105          <SkewTransform />
106          <RotateTransform Angle="180" />
107          <TranslateTransform />
108        </TransformGroup>
109      </ed:RegularPolygon.RenderTransform>
110    </ed:RegularPolygon>
111
112    <ed:RegularPolygon
113      x:Name="regularPolygon1"
114      Canvas.Left="200"
115      Canvas.Top="70"
116      Width="100"
117      Height="100"
118      Fill="Orange"
119      PointCount="3"
120      Stroke="Black"
121      StrokeThickness="3">
122      <i:Interaction.Behaviors>
123        <ei:MouseDragElementBehavior
124          x:Name="mouseDragElementBehavior1"
125          ConstrainToParentBounds="True"
126          DragFinished="mouseDragElementBehavior1_DragFinished" />
127      </i:Interaction.Behaviors>
128      <!--  ↓消したらダメ 恐らくMouseDragElementBehaviorがバグっていて挙動が変になる  -->
129      <ed:RegularPolygon.RenderTransform>
130        <TransformGroup>
131          <ScaleTransform />
132          <SkewTransform />
133          <RotateTransform />
134          <TranslateTransform />
135        </TransformGroup>
136      </ed:RegularPolygon.RenderTransform>
137    </ed:RegularPolygon>
138  </Canvas>
139</Window>

cs
1using System;
2using System.Windows;
3using System.Windows.Input;
4using System.Windows.Media;
5using System.Windows.Media.Animation;
6
7namespace Questions304033
8{
9    public partial class MainWindow : Window
10    {
11        private Transform transform; // ▼初期位置
12        private Transform transform1;// ▲初期位置
13
14        public MainWindow() => InitializeComponent();
15
16        private void Window_Loaded(object sender, RoutedEventArgs e)
17        {
18            // 三角の初期位置保存
19            transform = regularPolygon.RenderTransform;
20            transform1 = regularPolygon1.RenderTransform;
21        }
22
23        private void Button_Click(object sender, RoutedEventArgs e)
24        {
25            // 三角とひし形のアニメーションを止めて元に戻す
26            var storyboard = FindResource("Storyboard1") as Storyboard;
27            storyboard.Stop();
28
29            // 三角の当たり判定を復活
30            regularPolygon.IsHitTestVisible = true;
31            regularPolygon1.IsHitTestVisible = true;
32
33            // 三角を初期位置に戻す
34            regularPolygon.RenderTransform = transform;
35            regularPolygon1.RenderTransform = transform1;
36        }
37
38        // ▼ドラッグ終了時
39        private void MouseDragElementBehavior_DragFinished(object sender, MouseEventArgs e)
40        {
41            var x = mouseDragElementBehavior.X;
42            var y = mouseDragElementBehavior.Y;
43
44            // 目標座標との差分
45            var dx = Math.Abs(x - 492); // 注）回転しているためWidth Height分だけ増えてる？
46            var dy = Math.Abs(y - 380);
47
48            // 十分近ければ。。。
49            if (dx < 20 && dy < 20)
50            {
51                // 三角を目標座標ピッタリに移動
52                mouseDragElementBehavior.X = 492;
53                mouseDragElementBehavior.Y = 380;
54
55                // 三角の当たり判定なくし移動できなくする
56                regularPolygon.IsHitTestVisible = false;
57            }
58
59            // もし三角が2つともはまったらアニメーション開始
60            if (!regularPolygon.IsHitTestVisible && !regularPolygon1.IsHitTestVisible)
61            {
62                var storyboard = FindResource("Storyboard1") as Storyboard;
63                storyboard.Begin();
64            }
65        }
66
67        // ▲ドラッグ終了時
68        private void mouseDragElementBehavior1_DragFinished(object sender, MouseEventArgs e)
69        {
70            var x = mouseDragElementBehavior1.X;
71            var y = mouseDragElementBehavior1.Y;
72
73            var dx = Math.Abs(x - 342);
74            var dy = Math.Abs(y - 282);
75
76            if (dx < 20 && dy < 20)
77            {
78                mouseDragElementBehavior1.X = 342;
79                mouseDragElementBehavior1.Y = 282;
80
81                regularPolygon1.IsHitTestVisible = false;
82            }
83
84            if (!regularPolygon.IsHitTestVisible && !regularPolygon1.IsHitTestVisible)
85            {
86                var sb = FindResource("Storyboard1") as Storyboard;
87                sb.Begin();
88            }
89        }
90    }
91}

参照の追加で下記の追加が必要です。

C:\Program Files (x86)\Microsoft SDKs\Expression\Blend.NETFramework\v4.0\Libraries\Microsoft.Expression.Drawing.dll
C:\Program Files (x86)\Microsoft SDKs\Expression\Blend.NETFramework\v4.0\Libraries\Microsoft.Expression.Interactions.dll
C:\Program Files (x86)\Microsoft SDKs\Expression\Blend.NETFramework\v4.0\Libraries\System.Windows.Interactivity.dll

xamlがごちゃごちゃして難しそうですが、Blend For Visual Studioで作成したのでほとんどマウス操作だけで済んでいます。

追記回答コードを試す場合の手順

新規ソリューションをQuestions304033と名前をつけて作成（場所はどこでもＯＫ）

「ソリューションエクスプローラー」を開き「参照」を右クリック「参照の追加(R)...」を選択

参照マネージャーが開きます。「参照(E)...」ボタンを押す。

ファイル選択ダイアログが開くので↓まで移動し

C:\Program Files (x86)\Microsoft SDKs\Expression\Blend.NETFramework\v4.0\Libraries

Microsoft.Expression.Drawing.dll
Microsoft.Expression.Interactions.dll
System.Windows.Interactivity.dll

の３つをCtrlを押しながらクリック、
「追加」ボタンを押し、ファイル選択ダイアログを閉じる。
「OK」ボタンを押し、参照マネージャーを閉じる。

「ソリューションエクスプローラー」の「参照」の中に、選択した３つが増えていれば成功です。

MainWindow.xaml・MainWindow.xaml.csを、まるごとコピペで書き換えれば実行できます。

投稿2020/11/14 12:38

編集2024/08/31 18:56

TN8001

総合スコア9807

koukousei_1

2020/11/15 02:06

すごいですね！こんな短時間で！！かっこいいです！ありがとうございます！！

koukousei_1

2020/11/15 23:26

Blend for Visual Studio 2019を立ち上げて、プログラム文をコピーしましたが、参照の追加の方法がわからず、エラーが出てしまいました。参照の追加の方法を教えてください。

TN8001

2020/11/16 09:43

Blendの使い方は、ここでは書ききれないので検索してください（検索キーワード「xaml blend」等） Blend自体がフェードアウト気味なので古い記事ばかりですが、大して変わっていないので大丈夫です。文字だけではわかりにくいので、動画を見るのもいいですね（日本語でなくても操作は参考になります）

koukousei_1

2020/11/18 06:51

ありがとうございます！調べてみます。

TN8001

2020/11/18 06:54

回答コードを試す場合の手順を追記しましたができました？

koukousei_1

2020/11/19 03:21

Blend for Visual Studio 2019 を立ち上げて、新規プロジェクトを作成し、名前は指示通りに、場所はデスクトップにしました。そして、フレームワークを.NET Framework 4.8にしようとしましたが、.NET Framework 4.8がなく、.NET Framework 4.7.2までしかありませんでした。

koukousei_1

2020/11/19 03:23

とりあえず今のところは.NET Framework 4.7.2でやってみますね！！！！

koukousei_1

2020/11/19 03:35

できました！！！！！ありがとうございます！！！！これから、三角形だけでなく、平行四辺形やひし形などの解説画面も作りたいと思っているので、わからないところがあれば聞かせていただきます！！！！！ありがとうございます！！！！

行動規範の内容に同意します