當橢圓位於畫布邊界上時，不會觸發 MouseUp 事件

Question

我正在構建一個顯示可移動操縱桿的應用程序。 操縱桿可以在（外部）畫布邊界（即其Width和Height ）內自由移動，使用MouseDown 、 MouseMove和MouseUp事件。

正如您在MouseUp的 C# 代碼中看到的那樣，操縱桿應該返回到中心。

然而，有時，當操縱桿剛好位於畫布的邊界（由外Ellipse的周長表示）時，它不會返回中心。事實上， MouseUp只是不會觸發。

為什么MouseUp不觸發？

PS - 我將我的 XAML 代碼簡化為簡單的形狀（外橢圓代表操縱桿底座，內橢圓代表操縱桿本身）。

XAML：

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" >
    <Grid>
        <Canvas  x:Name="Base" Margin="0" Width="340" Height="340">
            <Ellipse HorizontalAlignment="Left" Height="340" VerticalAlignment="Top" Width="340">
               <Ellipse.Fill>
                   <RadialGradientBrush>
                       <GradientStop Color="#FF2C2A2A" Offset="1" />
                       <GradientStop Color="#FF3A3737" />
                   </RadialGradientBrush>
               </Ellipse.Fill>
            </Ellipse>
            <Canvas  x:Name="Knob" VerticalAlignment="Top" HorizontalAlignment="Left" Width="0" Height="0" RenderTransformOrigin="0.5,0.5" Canvas.Left="125" Canvas.Top="125" MouseDown="Knob_MouseDown" MouseMove="Knob_MouseMove" MouseUp="Knob_MouseUp">
                <Ellipse HorizontalAlignment="Left" Height="90" VerticalAlignment="Top" Width="90" RenderTransformOrigin="0.5,0.5" Canvas.Top="1">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#FF8A8A8A" />
                            <GradientStop Color="#FF979797" Offset="1" />
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Canvas.RenderTransform>
                    <TranslateTransform x:Name="knobPosition" />
                </Canvas.RenderTransform>
                <Canvas.Resources>
                    <Storyboard x:Key="CenterKnob" Name="centerKnob" Completed="centerKnob_Completed">
                        <DoubleAnimation Storyboard.TargetName="knobPosition"
                             Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="knobPosition" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </Canvas.Resources>
            </Canvas>
        </Canvas>
    </Grid>
</Window>  

C＃：

using System;
using System.Windows;
using System.Windows.Input;

namespace MyApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void centerKnob_Completed(object sender, EventArgs e)
        {
        }

        private Point point = new Point();
        private void Knob_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ChangedButton == MouseButton.Left)
            {
                point = e.GetPosition(this);
            }
        }

        private void Knob_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                double x = e.GetPosition(this).X - point.X;
                double y = e.GetPosition(this).Y - point.Y;

                if (Math.Sqrt(x * x + y * y) < Base.Width / 2)
                {
                    knobPosition.X = x;
                    knobPosition.Y = y;
                }
            }
        }

        private void Knob_MouseUp(object sender, MouseButtonEventArgs e)
        {
            knobPosition.X = 0;
            knobPosition.Y = 0;
        }
    }
}

Answer 1

我認為MouseUp不會被觸發，因為它只有在用戶釋放操縱桿時才會執行。 如果它在此之前退出畫布的邊界，則MouseLeave會被觸發。 所以你也必須在那種情況下重置knobPosition ..

<!-- [...] -->
<Canvas  x:Name="Knob" VerticalAlignment="Top" HorizontalAlignment="Left" Width="0" Height="0" RenderTransformOrigin="0.5,0.5" Canvas.Left="125" Canvas.Top="125" MouseDown="Knob_MouseDown" MouseMove="Knob_MouseMove" MouseUp="Knob_MouseUp" MouseLeave="Knob_MouseLeave">
<!-- [...] -->

和

private void Knob_MouseLeave(object sender, MouseEventArgs e)
{
    knobPosition.X = 0;
    knobPosition.Y = 0;
}

我希望我有幫助。