I’m updating my UI pieces to ETO (It is time, and I’m excited). However, I’m not sure how to get my docking dialogs to resize in a width change when docked. I have an event handler that triggers with the event OnSizeChanged, and it resizes all of my components appropriately. It will fire with a height change, but not a width change.
So my question: is that by design, and if so how do I catch and handle the width change?
The SizeChanged event should fire for any changes (width and height). Perhaps the controls within the panel are not letting the width get smaller, set the size explicitly somewhere, or are listening to the event on the wrong control.
If you can post a sample of what you are trying to do I can help figure out what might be going wrong.
…these things being my tables, layouts, and groupboxes.
As I stated, this fires if I change the height by dragging on one side, but not if I drag a side. If I drag a side, and then drag the bottom, it updates the width.
I confirmed this behavior by setting a breakpoint as well. The point is hit on a height change, but not a width change.
So - thoughts? I might do a github commit this evening, and I can send you the file then.
I think you’ll be better off if you can get it to work with automatic Eto layout features rather than manual adjustments upon events firing.
I’ve been using the DynamicLayout but there are several others available (I think I recall one expert here recommending StackLayout).
If you post small, focused questions about how to get groups of controls to behave, there are a few experts here (not me) who seem very helpful.
I spent a long time fiddling to get:
An upper left checkbox that doesn’t resize
An upper right row of buttons and combobox that’s anchored to the right edge of the form without the controls resizing
A section of controls in the main part of the form which expands the right but not the left section when the user resizes the width.
All of that is doable with nested DynamicLayouts (built up by row) and Panels (to get padding around things). I think that covers all of the needs I see in your screenshot above.
The result wasn’t all that intuitive from my prior experience in windows/mac ui libraries and html/css, but after the learning curve the behavior makes sense.
My form is an Eto.Forms.Form used nonmodally (it sits over Rhino but lets normal user flow in Rhino continue while it’s open).
I don’t THINK the layouts care what ‘owns’ them (form or docked panel) so long as it tells them how big they are when the owner gets resized but I haven’t built any docked panels yet. It does seem like your dynamic layouts are getting the ‘correct’ update messages and just aren’t configured to do what you actually want them to.
Things that I don’t want resized (such as the buttons) I assign a width to.
Things that I do want to resize (sometimes nested), I don’t assign widths to but just use AddRow to toss them into the sometimes nested dynamic layouts.
It was a little fiddly figuring out what Eto would decide it wanted to resize vs hold constant but that seems to be my learning curve rather than inconsistent behavior.
Looking at your example, I’m not sure what should be resized except possibly the file path text box: all of those controls seem to have relatively fixed width requirements at design time unless as a design decision you want that trio of buttons to be full width.
I’m afraid that I don’t understand what the ‘I want it to…’ behavior is then. I’ve reread the thread a few times and all I see is you saying what it does, not what you want it to do. (I do see the description of when the event fires and when it doesn’t, but not the desired visual output- actually, I like the when-width-dragged output better than the height-dragged)
When I drag the side, it will not resize the components. When I drag the bottom, it will resize the components. I need it to resize whenever the size of the container changes, whether it be a width change or a height change. Right now it does not resize on a width change.
Ok, so you want a two column layout (except for the three buttons) in which each pair of components stays lined up against its respective far edge?
Here’s how I did that on a basic form (definitely responsive to width resizing). I’m not going to claim that it’s the best way to do it, only the best way I’ve figured out so far.
If that doesn’t work in a docked panel I’d wonder if it might be a bug because I thought they were supposed to respond similarly regardless of what contains them but would enjoy playing with sample code (haven’t done docking with Eto yet).
Thanks for this. Your code does behave as expected, so I tried disabling some of my code tracking the OnSizeChanged event, and now it does work properly.
I’m a little baffled because I started looking for those events because I couldn’t seem to get it to behave this way without them. I guess there was something I was overlooking. Anyway, thanks for your help.
If you would like to play with sample code, here is how I implemented this: