❔ Responsive UI in winforms
Hello. I'm trying to make my first responsive UI in winforms. In terms of width, everything seems to be responsive (except the header but that should be an easy fix).
The only thing I need help with and couldn't figure out myself are the big gaps (made them appear pink to make it clear) between header and the table below. The height should not increase for the row in the center.
Thanks in advance.
45 Replies
well, what's the configuration of the control
I'm assuming you mean the pink row in itself with control?
I think this is the most relevant config as to that
why is this not docked
how are you changing its dimensions
using anchors
it's not docked cause none of the options apply here. It should not stick to the top or bottom and the other option left would be fill and then it just fills the entire window.
😬 yeah i see it now
it's late and im tired
idk man, I'm new to this and yeah. I'm sorry if I'm making some rookie mistakes here
But I wanna learn
to me seems you are not using enough panels, as a first impression
The row is one big panel and the 3 censored blue boxes are panels in itself as well
the table below and the header aren't though
because of this:
Maybe if I make the header and the table on the bottom panels then it won't
to me this sounds like a job for a grid or for a splitpanel
if you use a grid you could maybe avoid the "pink" panel
Yeah I was looking for a grid but the only thing I found was the DataGridView and that seemed wrong
by grid i meant table layout panel
Ah right
Yeah I tried that too before but I can't have multiple items in one box
E.g. the header consists of a banner with a button on top of it
It didn't allow that
the banner would be the blue thing at the top?
i see browse and home
aren't those two buttons?
yeah so the gradient is the banner and then, indeed, 2 buttons
But I only tried with the home one and it didn't allow that
to me it seem solvable with another container
plus the browse button is in a panel along with text that isn't visible on the screenshot
you put a container like split panel in the table layout panel's first row
split panel will hold the two buttons and the background (gradient)
Right so I'm assuming this is called SplitContainer in the toolbox?
yeah
you make it fixed size, let's say
and change other cosmetic stuff
but it's the one
or you could use another table layout if you have more hidden stuff i don't know
Yeah I'm sorry about that but there might be mutual people in this server that could view this and shouldn't view it haha
right now vs is not really working great so i can't really go look names
it doesn't show me some controls, don't know why
i mean hidden stuff not as in censored but as in architectural
ah right
yeah there's a lot going on in the UI
doesn't help that the responsive UI wasn't built from the beginning but I had to implement it afterwards
ui is not easy, i'll give you that
you really need to put component into component to manage all the f** properties correctly
but when it works... it's good
yeah no it isn't. In terms of functionality, things are great but I got told to make it responsive right when things were about to be finished
doing this stuff in xaml or for web is a lesson in this sense
because once you learn that way of building stuff you don't go back on older ways
in the beginning it's cussing
In fact, I started with web development and I know CSS but this needed to be a desktop app
And I didn't feel like doing it in Electron so WinForms it is
why not xaml
Got no experience in that and didn't hear of it before
you could've then made the ui in html and loaded it with a browser component in the form
ok i'll go to sleep, i've said enough stupid crap for today
Right okay, I think I'll call it a day as well
Might just not make it responsive and rebuild the ui in XAML in a later version then
why not, what do you still need to correct
the pink row and 2 other forms would need to be made responsive as well
this form seems pretty doable
don't know about the other two
one is pretty similar, the other is a home screen which is pretty basic
then go for it
Even after using a TableLayout with separate containers, it shows up as this when it's maximized
how did you size rows and columns
to me looks like first row should be fixed and contain home and browse
then you should have a row with three columns and the three thingies, don't know if height should be fixed
and then row with one column (which would probably be a columnspan) which would be all the remainig size
Aah yeah I basically just made 3 rows and didn't use more than 1 column
The 3 boxes are fine but it's just the size between the top and bottom of the row containing those 3 is too big and it should be the same size in height after resizing the window
Whereas now it increases both the height as well as the width of that row but I just need the width to change
ok but in a table layout you are imposing the size of the rows, in %
like saying "this row should be 1/5 of the container" or "this row should be 150 px"
Ah okay. I think I found those properties yeah
Just one thing, I was wondering how I can make it so just one row has a column. Only the middle row should have 3 columns
you have to set rowspan or columnspan (which would be how many columns/rows the single object should occupy)
(these properties are in the control inside the grid)
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.