wpf - 如何在 WPF 中创建类似 UI 的 XY Controller

Question

我正在寻找这样的东西。

我应该能够用鼠标在 XY 图表内拖动坐标。坐标的位置决定了 X 和 Y 值。

是否有可供我重复使用的现成控件？如果没有，我该如何写一个？

Answer 1

我还没有见过这样的控件，我想你必须自己编写代码。这里有一些事情需要实现，我将只讨论图形部分。首先，您应该定义一个 list ，说明该控件的行为方式(即仅当鼠标按钮按下时才用光标移动行)，完成后...好吧，这就是有趣的部分!

编辑:好的，现在这是一个粗略的版本，当我说粗略时，我是认真的。我将它放入窗口而不是用户控件中，您只需将其复制粘贴到您的控件中即可。这有很多缺陷，只有在解决所有发生的问题后才能有效地使用。此外，将像素设计与灵活/相对设计(如拉伸(stretch)对齐)混合时必须小心。我通过使窗口不可调整大小来将其限制为像素精度。

<Window x:Class="graphedit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" 
    x:Name="window"
    MouseMove="Window_MouseMove"
    Height="400" Width="400"
    ResizeMode="NoResize">
<Canvas x:Name="canvas"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
    <Canvas.Background>
        <RadialGradientBrush>
            <GradientStop Color="#333333" Offset="1"></GradientStop>
            <GradientStop Color="#666666" Offset="0"></GradientStop>
        </RadialGradientBrush>
    </Canvas.Background>
    <Border BorderThickness="0,0,1,1"
            BorderBrush="White"
            Margin="0,0,0,0"
            Width="{Binding Path=Point.X}"
            Height="{Binding Path=Point.Y}"></Border>

    <Border BorderThickness="1,1,0,0"
            BorderBrush="White"
            Margin="{Binding Path=BottomRightBoxMargin}"
            Width="{Binding Path=BottomRightBoxDimensions.X}"
            Height="{Binding Path=BottomRightBoxDimensions.Y}"></Border>
    <Border BorderThickness="1"
            BorderBrush="White"
            Margin="{Binding Path=GripperMargin}"
            Background="DimGray"
            CornerRadius="4"               
            Width="10"
            x:Name="gripper"
            MouseDown="gripper_MouseDown"
            MouseUp="gripper_MouseUp"
            Height="10"></Border>
    <TextBox Text="{Binding Path=Point.X}" Canvas.Left="174" Canvas.Top="333" Width="42"></TextBox>
    <TextBox Text="{Binding Path=Point.Y}" Canvas.Left="232" Canvas.Top="333" Width="45"></TextBox>
    <TextBlock Foreground="White" Canvas.Left="162" Canvas.Top="336">X</TextBlock>
    <TextBlock Canvas.Left="222" Canvas.Top="336" Foreground="White" Width="13">Y</TextBlock>
</Canvas>

隐藏代码如下所示:

using System.ComponentModel;
using System.Windows;

namespace graphedit
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
    private bool isDragging;

    private Point mousePositionBeforeMove;

    private Point point;

    public Point Point
    {
        get { return this.point; }
        set
        {
            this.point = value;
            this.InvokePropertyChanged(null);
        }
    }

    public Thickness BottomRightBoxMargin
    {
        get
        {
            Thickness t = new Thickness()
                          {
                              Left = this.Point.X,
                              Top = this.Point.Y
                          };
            return t;
        }
    }

    public Thickness GripperMargin
    {
        get
        {
            Thickness t = new Thickness()
            {
                Left = this.Point.X - 5,
                Top = this.Point.Y - 5
            };
            return t;
        }
    }

    public Point BottomRightBoxDimensions
    {
        get
        {
            return new Point(this.Width - this.Point.X,
                             this.Height - this.Point.Y);
        }
    }

    public MainWindow()
    {
        InitializeComponent();
        this.Point = new Point(100, 80);
        this.DataContext = this;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void InvokePropertyChanged(string name)
    {
        PropertyChangedEventArgs args = new PropertyChangedEventArgs(name);
        PropertyChangedEventHandler handler = this.PropertyChanged;
        if (handler != null)
        {
            handler(this, args);
        }
    }

    private void gripper_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        this.isDragging = true;
        this.mousePositionBeforeMove = e.GetPosition( this.canvas );
    }

    private void gripper_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        this.isDragging = false;
    }

    private void Window_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
    {
        if(this.isDragging)
        {
            Point currentMousePosition = e.GetPosition( this.canvas );
            double deltaX = currentMousePosition.X - this.mousePositionBeforeMove.X;
            double deltaY = currentMousePosition.Y - this.mousePositionBeforeMove.Y;

            double newPointX = (this.Point.X + deltaX < 0 ? 0 : (this.Point.X + deltaX > this.Width ? this.Width : this.Point.X + deltaX)) ;
            double newPointY = (this.Point.Y + deltaY < 0 ? 0 : (this.Point.Y + deltaY > this.Width ? this.Width : this.Point.Y + deltaY)) ;

            this.Point = new Point(newPointX,newPointY);
            this.mousePositionBeforeMove = currentMousePosition;
        }
    }
}
}