我在 c# 中创建了一个椭圆...但我想使用鼠标在 canvas 周围移动椭圆...有人可以帮忙吗？我是 c# 的新手

Question

我在 C# 中创建了一个椭圆，但我想使用鼠标围绕 canvas 移动椭圆。谁能帮忙？我是 c# 新手。

这是我的代码。

private Ellipse drawEllipse(Canvas aCanvas)
    {
        Ellipse newEllipse = new Ellipse();
        newEllipse.Width = 10;
        newEllipse.Height = 10;
        newEllipse.Fill = new SolidColorBrush(Colors.RoyalBlue);
        aCanvas.Children.Add(newEllipse);
        newEllipse.SetValue(Canvas.LeftProperty, aCanvas.ActualWidth / 2.0);
        newEllipse.SetValue(Canvas.TopProperty, aCanvas.ActualHeight / 2.0);
        return newEllipse;


    }

Answer 1

我也是 WPF 的新手，所以我将向您解释我到目前为止所了解的内容以及如何制作椭圆。由于我也是 WPF 初学者，我的解释有时可能是近似的，所以请不要活活烧死我。这个post可能很长

WPF 和 MVVM

首先，你有一个"View"，它是XAML代码（一种具有类似XML语法的描述语言。每个标签对应一个class .NET Framework）并设计您将看到的一切。使用 WPF 时，您应该尝试实现 MVVM 模式。在此模式中，windows 的设计不是 C# 代码的问题，而是 "View" 组件的问题，即 XAML 代码。你有一个 "ViewModel" 组件来准备数据，这些数据将成为视图的一种参数。最后一个组件是模型，它后面的所有东西都与用户界面无关。

使用 C# 编写视图代码（就像您所做的那样）被称为 "code behind"，并且在大多数情况下属于 MVVM 模式错误。

View 是 "bind" 到 ViewModel。绑定后，View 知道 ViewModel class 并且可以使用它的字段和属性。使用视图模型的最大好处是，当您修改绑定到视图的 ViewModel 中的变量时，它会自动更新视图。

绘图和拖放和椭圆

这里是一个椭圆视图的例子：

In CanvasOverlayView.xaml

<UserControl x:Class="Overlay.Views.CanvasOverlayView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:viewModels="clr-namespace:Overlay.ViewModels"
             d:DataContext="{d:DesignInstance Type=viewModels:CanvasOverlayViewModel}"
             mc:Ignorable="d">




//You can declare a mouse event like this, with the appropriate event handlers in the .xaml.cs file 

//  <Canvas MouseDown="UIElement_OnMouseDown" MouseMove="UIElement_OnMouseMove" MouseUp="UIElement_OnMouseUp">





// however I use a completely separated file as ViewModel so i will use this :
     <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDown">


                 <i:InvokeCommandAction Command="{Binding Path=DataContext.MouseDownCommand}"
                                           CommandParameter="{Binding ElementName=CanvasOverlayView}"/>
                    </i:EventTrigger>

                    <i:EventTrigger EventName="MouseUp">
                        <i:InvokeCommandAction Command="{Binding Path=DataContext.MouseUpCommand}"
                                           CommandParameter="{Binding ElementName=CanvasOverlayView}"/>
                    </i:EventTrigger>

                    <i:EventTrigger EventName="MouseMove">
                        <i:InvokeCommandAction Command="{Binding Path=DataContext.MouseMoveCommand}"
                                           CommandParameter="{Binding ElementName=CanvasOverlayView}"/>
                    </i:EventTrigger>
                    <Path Stroke="{Binding Color}" StrokeThickness="{Binding Thickness}">
                        <Path.Data>
                            <EllipseGeometry
                                Center="{Binding Center}"
                                RadiusX="{Binding RadiusX}"
                                RadiusY="{Binding RadiusY}"/>
                        </Path.Data>
                    </Path>
    </Canvas>

详情:

x:Class="Overlay.Views.CanvasOverlayView"

关联 CanvasOverlayView.xaml.cs 的精确名称（这是部分 class，如果我理解正确的话，这是绘制 xaml 文件所描述内容所需的 C#）。您可以将此文件用作 ViewModel，但最好在一个完全独立的文件中执行此操作，这就是我将在本示例中执行的操作。因此 xaml.cs 几乎是空的（设置数据上下文和初始化组件）。

xmlns:viewModels="clr-namespace:Overlay.ViewModels"

将我所有 ViewModel 所在的名称空间别名为 viewModels。这用于在下一行找到 ViewModel

d:DataContext="{d:DesignInstance Type=viewModels:CanvasOverlayViewModel}" DataContext 是 class 实例，绑定操作将在其中获取其数据。在这里，我将 DataContext（如果需要，我的参数的来源）设置为正确的视图模型。每个视图都有自己的 ViewModel

Interaction.Triggers 在这里，我将为 Command 创建触发器。该命令将允许我在我的 ViewModel 中处理我的事件（如果我使用 xaml.cs 作为视图模型而不是完全独立的 .cs 文件，我不需要这个）。

注意绑定语法，这是你使用来自视图模型的“"parameters"”。

路径和椭圆几何

画椭圆的方法之一。我使用这种方式是因为我更喜欢使用椭圆的中心和半径而不是 Canvas.SetLeft、宽度、高度等...这使得拖动操作更容易（只需要在 viewmodel 和 tadaaaam 中更新中心，椭圆移动）。

In CanvasOverlayView.xaml.cs

namespace Overlay.Views
{
    public partial class CanvasOverlayView
    {
        public CanvasOverlayView()
        {
            DataContext = new CanvasOverlayViewModel();
            InitializeComponent();
        }    
    }
}

这里我给出了一个ViewModel的实例作为DataContext。

In CanvasOverlayViewModel.cs

首先也是最重要的事情：ViewModel 必须实现 INotifyPropertyChanged 接口。这个接口是必不可少的，因为这是使您的绑定属性自动更新视图的原因。这是一个在属性.

中使用示例的最小实现

using System.ComponentModel;
    namespace Overlay.ViewModels
    {    
     public class CanvasOverlayViewModel : INotifyPropertyChanged
     {
       private int exemple;
       public int Exemple
       {
         get 
         {
            return exemple;
         }
         set
         {
           exemple = value;
           OnPropertyChanged(nameof(Exemple));  // IMPORTANT
         }
       } 

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName) => 
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

有了这个，如果您的 xaml 中有一个“{Binding Exemple}”，当您更改 ViewModel 中的 Exemple 值时它会自动更新。

对于您的椭圆，您可以创建一个 class 来包含您的椭圆的所有参数，将其实例化到 ViewModel 中并将其绑定到您的视图中。

命令和事件

对于上面的视图示例，这是一个使用命令处理事件的示例。当然，这不是使用 ICommand 的唯一方法。

private ICommand m_MouseDownCommand;
private ICommand m_MouseMoveCommand;
private ICommand m_MouseUpCommand;
private bool CanMove
private Point center; // binded to the center property of EllipseGeometry in View.

public Point Center
{
   get
   {
     return center;
   }
   set
   {
     center = value;
     OnPropertyChanged(nameof(Exemple));
   }
}

// first parameter is the method that handle the event, the second is a bool method that define if the event is triggerable.
// DelegateCommand is a custom class implementing ICommand, i'll give code below.

public ICommand MouseDownCommand => m_MouseDownCommand ?? (m_MouseDownCommand = new DelegateCommand(OnMouseDown, CanMouseDown));

public ICommand MouseMoveCommand => m_MouseMoveCommand ?? (m_MouseMoveCommand = new DelegateCommand(OnMouseMove, CanMouseMove));

public ICommand MouseUpCommand => m_MouseUpCommand ?? (m_MouseUpCommand = new DelegateCommand(OnMouseUp, CanMouseUp));


private bool CanMouseDown(object parameter)
{
   return true;
}

private bool CanMouseMove(object parameter)
{
   return CanMove;
}

private bool CanMouseUp(object parameter)
{
   return true;
}

private void OnMouseDown(object parameter)
{
   CanMove = true;
}   


private void OnMouseMove(object parameter)
{
   // EllipseGeometry Center property is updated !
   Center = Mouse.GetPosition((IInputElement)parameter);
}


private void OnMouseUp(object parameter)
{ 
   CanMove = false;
}

我会给你我的 DelegateCommand class :

using System;
using System.Windows.Input;

    public class DelegateCommand : ICommand
    {
        private readonly Action<object> m_command;

        private readonly Predicate<object> m_canExecute;

        public DelegateCommand(Action<object> command, Predicate<object> canExecute = null)
        {
            if (command == null)
            {
                throw new ArgumentNullException("command", "The delegate command is null");
            }

            m_canExecute = canExecute;
            m_command = command;
        }

        public event EventHandler CanExecuteChanged
        {
            add
            {
                CommandManager.RequerySuggested += value;
            }

            remove
            {
                CommandManager.RequerySuggested -= value;
            }
        }

        public void Execute(object parameter)
        {
            m_command(parameter);
        }

        public bool CanExecute(object parameter)
        {
            return m_canExecute == null || m_canExecute(parameter);
        }
    }

我希望我的解释很清楚。抱歉，如果它在技术上不是 200% 准确，我也是 WPF 的新手。这是许多方法中的一种，可能不是最好的。告诉我是否有不清楚的地方或者是否可以使某些地方更准确。

我在 c# 中创建了一个椭圆...但我想使用鼠标在 canvas 周围移动椭圆...有人可以帮忙吗？我是 c# 的新手

I've created a ellipse in c#...bt i want to move ellipse around the canvas using mouse.....can anyone help? And i'm new to c#

c#

wpf

canvas

drawellipse