How to customize DesignerView at client side to support user input
Opened this issue · 0 comments
Below is a demo of how a Button and a textbox control placed on design surface works in .net framework environment
Heres how it looks in .NET environment:
As you can see the UI is not responsive in NET environment. As i understand this is due the input shield covering whole DesignerView surface and intercepting all mouse events as a result its not possible to interact with any standard winforms controls located on Server Designer.
One of the solutions that comes to mind is to capture all mouse events at server side (as i understand this is the approach
which should be used to implement dragging and resizing behaviors) and implement hover/click behaviors for all winforms controls that are not part of the actual design surface as well
But, implementing all of the default behaviors manually seems like way too much work, there should be a way to make it work with less effort.
In our reporting tool we have a DesignerView which requires alot of user input see gif below.
In the middle theres the report area where user can drag n drop different components resize them etc.
There are also panels at the bottom with various buttons, top and left borders have rulers, there are additional panels with toggleable visibility which contain even more controls for user input and all of this is inside DesignView, so i would like to know the optimal approach to making them behave as usually using new sdk
Q1: As stated in docs, all user input should be located at client side, it seems like controls illustrated above should be located either on DesignerView or InputShield but those are internal classes.
Is it possible to implement a custom DesignerView with winforms controls and also be able to interact with server side designer at the same time?
Default DesignerView provided by Microsoft.DotNet.DesignTools.Client cannot be modified directly, so i tried using reflection to check what will happen if i change InputShield size and location and add controls to DesignView:
Yellow area consists of panels added to DesignView at client side using reflection, since i have moved input shield to the right everything seems to be fully interactable just like in a normal windows forms application.
Green area is the changed input shield area.
Q2: Could you please leave your comments about such solution, is it fine to customize DesignView like this? if so, is it possible to have some public API to achieve same results without using reflection?
Another interesting thing i noticed is that in above gif, the gray area is not covered by any client controls or the InputShield control and it allows interacting with the server form directly:
Q3:Button and checkbox controls seem to work as expected, but not textbox, why is that?
Could you please explain the purpose of InputShield in more detail?
To me, it seems like it's possible to have design surface which is not fully covered by input shield and be able to interact with controls form Server form as usual, thus avoiding alot of work related to splitting designer into client and server side parts. Please correct me if i'm wrong.
Best Regards,
Timur