直角三角形の形をしたボタンを作ってマウスドラッグによって指定した範囲に置かれたときに、ぴたっと配置されるようにしたい。

ネットで調べたら、直角三角形のボタンの作り方が出てきました。
それを参考に、直角三角形のボタンを作ることができ、マウスドラッグで動かすことはできましたが、
指定された範囲に配置されたとき、毎回同じ場所に配置することができません。
正直、三角形のボタンの作り方もあっているかどうかわかりません。
改善するためにはどうすればよいか教えてください。

MainWindow.xaml
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="1184"
13  Height="666"
14  Loaded="Window_Loaded"
15  mc:Ignorable="d" WindowStartupLocation="CenterScreen">
16    <Window.Resources>
17        <Storyboard x:Key="Storyboard1">
18            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Tyokkaku2" Storyboard.TargetProperty="(UIElement.Opacity)">
19                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
20            </DoubleAnimationUsingKeyFrames>
21            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Tyokkaku" 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
30    <Canvas>
31        <Rectangle
32      x:Name="rectangle"
33      Canvas.Left="442"
34      Canvas.Top="123"
35      Width="300"
36      Height="400"
37      Fill="#FFF4F4F5"
38      RenderTransformOrigin="0.5,0.5"
39      Stroke="Black"
40      StrokeThickness="3">
41            <Rectangle.RenderTransform>
42                <TransformGroup>
43                    <ScaleTransform />
44                    <SkewTransform AngleX="0" />
45                    <RotateTransform />
46                    <TranslateTransform />
47                </TransformGroup>
48            </Rectangle.RenderTransform>
49        </Rectangle>
50        <Path 
51            x:Name="Tyokkaku"
52            Fill="Orange"
53            Stretch="Fill"  
54            StrokeThickness="3"
55            Stroke="Black"
56            Data="M 100,0 L 100,100 L 0,100 Z"
57            Canvas.Left="442"
58            Canvas.Top="123"
59            IsManipulationEnabled="True"
60      Margin="0" 
61      ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="400" Width="300">
62            
63        </Path>
64
65        <Path 
66            x:Name="Tyokkaku2"
67            Fill="Orange"
68            Stretch="Fill"  
69            StrokeThickness="3"
70            Stroke="Black"
71            Data="M 0,100 L 0,0 L 100,0 Z"
72            Canvas.Left="55"
73            Canvas.Top="123"
74            IsManipulationEnabled="True"
75      Margin="0" 
76      ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="400" Width="300">
77            <i:Interaction.Behaviors>
78                <ei:MouseDragElementBehavior
79          x:Name="mouseDragElementBehavior1"
80          ConstrainToParentBounds="True"
81          DragFinished="MouseDragElementBehavior_DragFinished" />
82            </i:Interaction.Behaviors>
83        </Path>
84
85        <Button Click="Button_Click" Content="リセット" Height="51.077" Width="65.824" />
86
87
88    </Canvas>
89</Window>
90

MainWindow.xaml.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 = Tyokkaku.RenderTransform;
20            transform1 = Tyokkaku2.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            Tyokkaku.IsHitTestVisible = true;
31            Tyokkaku2.IsHitTestVisible = true;
32
33            // 三角を初期位置に戻す
34            Tyokkaku.RenderTransform = transform;
35            Tyokkaku2.RenderTransform = transform1;
36        }
37
38        // ▼ドラッグ終了時
39        private void MouseDragElementBehavior_DragFinished(object sender, MouseEventArgs e)
40        {
41            var x = mouseDragElementBehavior1.X;
42            var y = mouseDragElementBehavior1.Y;
43
44            // 目標座標との差分
45            var dx = Math.Abs(x - 442); // 注）回転しているためWidth Height分だけ増えてる？
46            var dy = Math.Abs(y - 123);
47
48            // 十分近ければ。。。
49            if (dx < 20 && dy < 20)
50            {
51                // 三角を目標座標ピッタリに移動
52                mouseDragElementBehavior1.X = 442;
53                mouseDragElementBehavior1.Y = 123;
54
55                // 三角の当たり判定なくし移動できなくする
56                Tyokkaku2.IsHitTestVisible = false;
57            }
58
59            // もし三角が2つともはまったらアニメーション開始
60            if (!Tyokkaku2.IsHitTestVisible)
61            {
62                var sb = FindResource("Storyboard1") as Storyboard;
63                sb.Begin();
64            }
65        }
66
67      
68    }
69}

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

回答1件

ベストアンサー

毎回同じ場所に配置することができません。

説明不足でしたがこれが↓の話です。

↓消したらダメ恐らくMouseDragElementBehaviorがバグっていて挙動が変になる

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

MouseDragElementBehaviorをつけたものに、RenderTransformもつけてください。

xml
1<Path
2  x:Name="Tyokkaku2"
3  Canvas.Left="55"
4  Canvas.Top="123"
5  Width="300"
6  Height="400"
7  Margin="0"
8  Data="M 0,100 L 0,0 L 100,0 Z"
9  Fill="Orange"
10  IsManipulationEnabled="True"
11  Stretch="Fill"
12  Stroke="Black"
13  StrokeThickness="3">
14  <i:Interaction.Behaviors>
15    <ei:MouseDragElementBehavior x:Name="mouseDragElementBehavior1" ConstrainToParentBounds="True" DragFinished="MouseDragElementBehavior_DragFinished" />
16  </i:Interaction.Behaviors>
17  <Path.RenderTransform>
18    <TransformGroup>
19      <ScaleTransform />
20      <SkewTransform />
21      <RotateTransform />
22      <TranslateTransform />
23    </TransformGroup>
24  </Path.RenderTransform>
25</Path>