Navigation Drawer following the cursor position even after toggled once.

Hello,

I am trying to make the navigation drawer toggle behavior only be triggered by a click of a button using the 'ToggleDrawer()' method in a button's click event.

However when I bring the cursor inside the drawer, It start following the cursor position and moves left and right which makes it difficult to work inside the drawer. The issue I guess is that the toggle don't remain permanent and as soon as it finds the cursor hovering over it, it starts following the cursor (due to its touch friendly nature I believe.) Here you can check what exactly I am saying.


There is a Navigation Drawer example application in Essential Studio which is working the way I want but I can't really find the line of code in that application that makes it only triggerable via button and not by hovering over it.

Is there any property or any method that enforces this nature?

Thank you.

6 Replies 1 reply marked as answer

VR Vijayalakshmi Roopkumar Syncfusion Team December 22, 2020 01:12 AM UTC

Hi Shankul 
 
Thank you for using our Syncfusion Products. 
 
We have checked your query and understood that the drawer position get changed according to cursor position, but we are unable to reproduce it in our dashboard sample of NavigationrDrawer as you reported. However, we recommend you to handle the Mouse related events of Navigation drawer or DrawMenuItem to avoid this behavior. If possible, please share us the sample you are using, so that we can check and provide you the solution accordingly. 
 
Please let us know if you need any other assistance. 
 
Regards, 
Vijayalakshmi VR 



SG shankul gupta December 22, 2020 04:51 AM UTC

Thank you for replying,

Its strange that you are not able to reproduce this error because I've created many projects and they behaving the same as I described in the original post.
For better understanding I've attached a sample project containing only a navigation drawer and a button for toggling the drawer. The project is already compiled you can directly check the executable with the issue.

Attachment: DrawerSample_d4bbb275.7z


VR Vijayalakshmi Roopkumar Syncfusion Team December 22, 2020 01:37 PM UTC

Hi Shankul

Thank you for your update.

We have checked the provided sample and we too able to reproduce this behavior that Drawer position get changed according to cursor. We have forwarded to development team to validate it and update you the details on 24th Dec, 2020.

Please let us know if you need any other assistance on this.

Regards,
Vijayalakshmi VR


SG shankul gupta December 23, 2020 06:28 AM UTC

Got the solution myself in the essential studio's Navigation Drawer Sample application itself, there were 4 lines present inside the constructor of the Main Form. Below are the lines I found:

var filter = navigationDrawer1.GetType().GetField("filter", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
dynamic navigationDrawerMouseMessageFilter = filter.GetValue(navigationDrawer1);
NavigationDrawerMouseMessageFilter MouseMessageFilter = navigationDrawerMouseMessageFilter;
Application.RemoveMessageFilter(MouseMessageFilter);


Upon searching a bit more, I found that this thing is actually preventing any mouse event (MouseUp, MouseDown and MouseMove) to be triggered which was causing the drawer to catch the cursor's position and move accordingly.

What exactly happening in the first line of the above snippet is that an object named 'filter' is declared getting its type from an Inner (Private and an Instance) Field of NavigationDrawer Class named as 'filter' using:

var filter = navigationDrawer1.GetType().GetField("filter", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);

This Inner field is Private and an instance of 'NavigationDrawerMouseMessageFilter' class that extends IMessageFilter Interface. This class is actually responsible for dealing with the mouse events that will be occurring inside the Navigation Drawer container. In the 2nd line the current value of 'NavigationDrawerMouseMessageFilter's instance is retrieved from the current instance of the 'NavigationDrawer' class which is "navigationDrawer1" and is stored inside a dynamic object named as "navigationDrawerMouseMessageFilter" using:

dynamic navigationDrawerMouseMessageFilter = filter.GetValue(navigationDrawer1);

In the 3rd line a new 'NavigationDrawerMouseMessageFilter' instance as "MouseMessageFilter" is declared and the dynamic object created in the previous line is stored inside this new instance. Thus this new instance will be holding the current MessageFilters of Mouse actions (MouseUp, MouseDown and MouseMove) of "navigationDrawer1" using:

NavigationDrawerMouseMessageFilter MouseMessageFilter = navigationDrawerMouseMessageFilter;

In the last line these Message Filters are removed from the application thus making it ignore all the Mouse events defined in the 'NavigationDrawerMouseMessageFilter' class for the current instance of the NavigationDrawer using:

Application.RemoveMessageFilter(MouseMessageFilter);

I tried to be as detailed as I can so rather than doing copy and paste other readers will actually understand the inner working of the code which helps them change the code and make it adaptable to their needs.

Thank you.


SG shankul gupta December 23, 2020 06:32 AM UTC

Here is a sample project I forgot to add in the previous reply with those lines of code in the application's constructor and the result is perfect!! :)

Attachment: DrawerSample_8af93a4e.7z

Marked as answer

EM Elakkiya Muthukumarasamy Syncfusion Team December 24, 2020 11:46 AM UTC

Hi Shankul, 
  
Most Welcome. Thanks for your detailed explanation about the code. We hope the reported issue resolved at your end. 
  
Please let us know if you need any further assistance on this. We will be glad to assist you. 
  
Regards, 
Elakkiya 


Loader.
Up arrow icon