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

Question

如何编写绘制矩形的 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);
        }
    }
}

提前致谢！

Answer 1

如果我理解你的问题，你想在 window 的中心画一个矩形。这个矩形的大小是根据鼠标指针的位置计算出来的。使鼠标指针始终在矩形的一角。

矩形的高度是

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

Although it has an ActualHeightProperty backing field, ActualHeight does not raise property change notifications and it should be thought of as a regular CLR property and not a dependency property.

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

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

WPF: Write rectangle depends on the mouse position using multibinding

c#

wpf

rectangles

multibinding