WPF：写入矩形取决于使用多重绑定的鼠标位置

问题描述

如何编写绘制矩形的 WPF 应用程序。矩形的大小应取决于鼠标位置。鼠标指针始终位于矩形的一角。 矩形始终居中。

它应该是这样的：

这是我的代码：

XAML：

<Window x:Class="MyNamespace.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:MyNamespace"
        mc:Ignorable="d"
        Title="MainWindow" x:Name="window1" Height="450" Width="800" MouseMove="Grid1_MouseMove">

    <Window.Resources>
        <local:SizeConverter x:Key="sizeConv" />
    </Window.Resources>

    <Rectangle Fill="Blue" 
       Width="{Binding ElementName=window1,Path=MousePos.X}" 
       Height="{Binding ElementName=window1,Path=MousePos.Y}" 
     HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Window>

C#：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MyNamespace
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window,INotifyPropertyChanged
    {
        private Point _mousePos;

        public MainWindow()
        {
            InitializeComponent();
        }

        public event PropertyChangedEventHandler PropertyChanged;


        public Point MousePos
        {
            get { return _mousePos; }
            set
            {
                _mousePos = value;
                if (PropertyChanged != null)
                    PropertyChanged(this,new PropertyChangedEventArgs("MousePos"));
            }
        }


        private void Grid1_MouseMove(object sender,MouseEventArgs e)
        {
            MousePos = e.GetPosition(window1);
        }
    }
}

提前致谢！

解决方法

如果我理解您的问题，您想在窗口中心绘制一个矩形。这个矩形的大小是根据鼠标指针位置计算的。 使鼠标指针始终位于矩形的角之一。

矩形的高度为

rect.Height = Math.Abs(mousePosition.Y - container.ActualHeight / 2) * 2

矩形的宽度为

rect.Width = Math.Abs(mousePosition.X - container.ActualWidth / 2) * 2

您需要创建一个包含属性的 ViewModel

public class MyRectContainerViewModel : BaseViewModel
{
    private double _actualHeight;
    public double ActualHeight
    {
        get { return  _actualHeight; }
        set 
        {
            if (_actualHeight != value)
            {
                _actualHeight = value;
                RecalculateSize();
            }
        }
    }

    private double _actualWidth;

    public double ActualWidth
    {
        get { return _actualWidth; }
        set
        {
            if (_actualWidth != value)
            {
                _actualWidth = value;
                RecalculateSize();
            }
        }
    }


    private Point _mousePosition;

    public Point MousePosition
    {
        get { return _mousePosition; }
        set 
        {
            if (!value.Equals(_mousePosition))
            {
                _mousePosition = value;
                RecalculateSize();
            }
        }
    }

    public double RectHeight { get; private set; }
    public double RectWidth { get; private set; }


    private void RecalculateSize()
    {
        RectWidth = Math.Abs(MousePosition.X - ActualWidth / 2) * 2;
        RectHeight = Math.Abs(MousePosition.Y - ActualHeight / 2) * 2;
        OnPropertyChanged(nameof(RectHeight));
        OnPropertyChanged(nameof(RectWidth));
    }
}

矩形的 DataContext 是 MyRectContainerViewModel。

如果您使用的是 MVVM，则需要找到更新 ActualHeight 和 ActualWidth 的方法。 ActualHeight

虽然它有一个 ActualHeightProperty 支持字段，但 ActualHeight 不会引发属性更改通知，它应该被视为常规 CLR 属性而不是依赖属性。

鼠标位置同上。您可以使用交互性 使用示例 Binding Mouse position