question

VijayKamat-1860 avatar image
0 Votes"
VijayKamat-1860 asked AlexLi-MSFT commented

Drag, Cling, Dock a dialog

Hi,

I am working on a WPF project where I will launch a new dialog inside a Window. User should be able to drag this dialog box to the edge of the window and if it is close enough, it should cling on to that side of the window like docking. User can detach it and re-attach to another side if he likes.

Can someone give me some code pointers for this.

Thank you.

windows-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlexLi-MSFT avatar image
0 Votes"
AlexLi-MSFT answered VijayKamat-1860 commented

Welcome to our Microsoft Q&A platform!

I made a example,you can see my code:

ChildWindow:

    private void Window_Loaded(object sender, RoutedEventArgs e)
         {
             this.WindowStyle = WindowStyle.None;
             this.Width = 200;
             this.Height = 200;
         }
    
         private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (e.LeftButton == MouseButtonState.Pressed)
             {
                 this.DragMove();
    
             }
             if (MainWindow.timer.Enabled == false)
             {
                 MainWindow.timer.Enabled = true;
             }
    
         }
    
         private void Window_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
         {
             if (this.Width == 20)
             {
                 this.Width = 200;
             }
         }

MainWindow

  public partial class MainWindow : Window
     {
         [System.Runtime.InteropServices.DllImport("user32.dll", EntryPoint = "SetParent")]
         public extern static IntPtr SetParent(IntPtr childPtr, IntPtr parentPtr);
            
       public static System.Timers.Timer timer = new System.Timers.Timer();
         Window2 w2;
         public MainWindow()
         {
             InitializeComponent();
             w2 = new Window2();
         }
    
         private void Button_Click(object sender, RoutedEventArgs e)
         {
             w2.Show();
             WindowInteropHelper parentHelper = new WindowInteropHelper(this);
             WindowInteropHelper childHelper = new WindowInteropHelper(w2);
             SetParent(childHelper.Handle, parentHelper.Handle);
             timer.Elapsed += new System.Timers.ElapsedEventHandler(OnTimedEvent);
             timer.Interval = 100;
             timer.Enabled = true;
         }
         public void OnTimedEvent(object sender, System.Timers.ElapsedEventArgs e)
         {
             this.Dispatcher.Invoke(() =>
             {
                 if ((w2.Left - this.Left) < 10)
                 {
                       
    
                     w2.Width = 20;
    
                     timer.Enabled = false;
                 }
    
             });
    
         }
     }

7497-1.gif



Thanks.


1.gif (87.2 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you for the reply, I really appreciate it. But the situation is a little more complicated than this.

The dialog I want to drag is actually a usercontrol which sits in a grid column so I cant use DragMove() etc. Also, when I drag it out, it should come out of grid column so I can freely drag it around and when I cling it back to the left border it should sit back in the grid column.

Can you kindly help me with this?

I have tried this for the UserControl: Pls check my post below.


But it doesnt work properly. The control disspapears when Grid column size becomes 0 and I remove it from the Grid.

0 Votes 0 ·
VijayKamat-1860 avatar image
0 Votes"
VijayKamat-1860 answered AlexLi-MSFT commented

Thank you for the reply, I really appreciate it.
But the situation is a little more complicated than this.

The dialog I want to drag is actually a usercontrol which sits in a grid column so I cant use DragMove() etc.
Also, when I drag it out, it should come out of grid column so I can freely drag it around and when I cling it back to the left border it should sit back in the grid column.

Can you kindly help me with this?

I have tried this for the UserControl:

  private void titleBar_OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (e.LeftButton == MouseButtonState.Pressed)
             {
                 mousePosition = e.GetPosition(null);
    
    
                 if (tt.X < 10)
                 {
                    tt.X = 10;
                 }
    
                 if (tt.Y < 10)
                 {
                     tt.Y = 10;
                 }
                 this.RenderTransform = tt;
    
                 var Grid = TreeHelper.FindParent<Grid>(this);
                 Grid.ColumnDefinitions[0].Width = new GridLength(0);
                 Grid.Children.Remove(this);
                 this.Height = 1000;
                 this.Width = 400;
             }
         }
    
         private void TitleBar_OnPreviewMouseMove(object sender, MouseEventArgs e)
         {
             if (e.LeftButton == MouseButtonState.Pressed)
             {
                 tt.X +=  e.GetPosition(null).X - mousePosition.X;
                 tt.Y += e.GetPosition(null).Y - mousePosition.Y;
    
                 mousePosition = e.GetPosition(null);
                    
                 if (tt.X < 10)
                 {
                     tt.X = 0;
                 }
    
                 if (tt.Y < 10)
                 {
                     tt.Y = 0;
                 }
    
                 this.RenderTransform = tt;
             }
         }

But it doesnt work properly. The control disspapears when Grid column size becomes 0 and I remove it from the Grid.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Please provide full code for I can test it.

0 Votes 0 ·