質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Visual C++

Microsoft Visual C++はWindowsのCとC++の統合開発環境(IDE)であり、コンパイラやデバッガを含んでいます。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

1回答

2465閲覧

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

koukousei_1

総合スコア3

Visual C++

Microsoft Visual C++はWindowsのCとC++の統合開発環境(IDE)であり、コンパイラやデバッガを含んでいます。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

1グッド

0クリップ

投稿2020/11/13 06:13

前提・実現したいこと

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

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

TN8001👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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というものがありました。 これでいいでしょうか。やってみますね!
guest

回答1

0

ベストアンサー

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と名前をつけて作成(場所はどこでもOK)
新規ソリューション

「ソリューション エクスプローラー」を開き「参照」を右クリック「参照の追加(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

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

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

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

投稿2020/11/14 12:38

編集2023/08/13 08:26
TN8001

総合スコア9244

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問