C# WPF- Trying to achieve WPF control movement same like Visual Studio

To implement horizontal and vertical alignment lines while moving a WPF control, you can use a Canvas for layout and handle mouse events to update the control’s position and draw alignment lines. Below is a step-by-step guide to achieve this:

First, set up your main window layout. Use a Canvas to host the movable control and lines for alignment:

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
   
                           MouseLeftButtonDown="MovableControl_MouseLeftButtonDown"
                   MouseLeftButtonUp="MovableControl_MouseLeftButtonUp"
                   MouseMove="MovableControl_MouseMove"/>
       
       
   

---------------------<><><>-----------------------

Now Next, handle the mouse events to allow dragging the control and drawing the alignment lines:

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

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        private bool _isDragging;
        private Point _clickPosition;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void MovableControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            _isDragging = true;
            _clickPosition = e.GetPosition(MovableControl);
            MovableControl.CaptureMouse();
            ShowAlignmentLines(true);
        }

        private void MovableControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _isDragging = false;
            MovableControl.ReleaseMouseCapture();
            ShowAlignmentLines(false);
        }

        private void MovableControl_MouseMove(object sender, MouseEventArgs e)
        {
            if (_isDragging)
            {
                var position = e.GetPosition(MainCanvas);
                var newLeft = position.X - _clickPosition.X;
                var newTop = position.Y - _clickPosition.Y;

                if (newLeft >= 0 && newLeft + MovableControl.ActualWidth <= MainCanvas.ActualWidth)
                {
                    Canvas.SetLeft(MovableControl, newLeft);
                }

                if (newTop >= 0 && newTop + MovableControl.ActualHeight <= MainCanvas.ActualHeight)
                {
                    Canvas.SetTop(MovableControl, newTop);
                }

                UpdateAlignmentLines(newLeft, newTop);
            }
        }

        private void ShowAlignmentLines(bool show)
        {
            HorizontalLine.Visibility = show ? Visibility.Visible : Visibility.Collapsed;
            VerticalLine.Visibility = show ? Visibility.Visible : Visibility.Collapsed;
        }

        private void UpdateAlignmentLines(double left, double top)
        {
            HorizontalLine.X1 = 0;
            HorizontalLine.X2 = MainCanvas.ActualWidth;
            HorizontalLine.Y1 = HorizontalLine.Y2 = top + MovableControl.ActualHeight / 2;

            VerticalLine.Y1 = 0;
            VerticalLine.Y2 = MainCanvas.ActualHeight;
            VerticalLine.X1 = VerticalLine.X2 = left + MovableControl.ActualWidth / 2;
        }
    }
}

---------------------------------<><><><><>-----------------------------

1. XAML Layout:

   • Use a Canvas as the main container.
   • Define a Rectangle for the movable control.
   • Add Line elements for the alignment lines, initially hidden.

2. Mouse Event Handling:

   • MouseLeftButtonDown: Capture the initial click position and display the alignment lines.
   • MouseLeftButtonUp: End the dragging operation and hide the alignment lines.
   • MouseMove: Update the control's position and alignment lines while dragging.

3. Alignment Lines:

   • The horizontal and vertical lines are adjusted based on the control’s position to provide visual alignment guides.

This approach ensures that the control can be moved within the boundaries of the window, with alignment lines giving a visual reference similar to what Visual Studio offers during design time.