Member Avatar for dsimonovski1

Hey.

So I have a flowlayoutpanel populated with custom user controls. Now, after each fifth control I want to have a separation label, pushing the following controls in a new row.

That works fine, except the distance between the label and the controls in the new row is way longer than required.

Here is a sample of how it looks like: http://prntscr.com/468a0y

I'd like to have the label closer to the controls, if possible.

Plesae let me know if you need anything else.

Cheers!

  • 2 Contributors
  • 4 Replies
  • 279 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dsimonovski1

Dani AI

Generated

A short explanation and a couple of robust ways to handle this (so the separator behaves the same when the panel is resized or when scrollbars appear).

FlowLayoutPanel computes each row height from the tallest control in that row (it uses each control's PreferredSize). That makes a label or any AutoSize control in the same row inflate the row height or create an apparent gap. Two cleaner options than manually guessing a width every time:

  1. Force a wrap after the fifth card and then add a fixed-size separator control. Use FlowLayoutPanel.SetFlowBreak on the fifth item so the next item starts a new row, and give the separator AutoSize = False with a controlled Height and minimal Margin.
' after adding a card:
If (i + 1) Mod 5 = 0 Then
    FlowLayoutPanel.SetFlowBreak(card, True)   ' start next items on new line
    Dim sep As New Label()
    sep.AutoSize = False
    sep.Tag = "groupSep"
    sep.Height = 18
    sep.Margin = New Padding(0, 6, 0, 6)
    sep.Text = "Group " & ((i + 1) \ 5).ToString()
    flowLayoutPanel.Controls.Add(sep)
End If
  1. Keep separator widths in sync with the panel (handle resizing/scrollbars). Recompute separator widths on ClientSizeChanged or Layout so they always match the available client width (account for the vertical scrollbar).
Private Sub flowLayoutPanel_ClientSizeChanged(sender As Object, e As EventArgs) Handles flowLayoutPanel.ClientSizeChanged
    Dim extra = If(flowLayoutPanel.VerticalScroll.Visible, SystemInformation.VerticalScrollBarWidth, 0)
    Dim avail = flowLayoutPanel.ClientSize.Width - flowLayoutPanel.Padding.Horizontal - extra
    For Each s As Label In flowLayoutPanel.Controls.OfType(Of Label)().Where(Function(l) l.Tag = "groupSep")
        s.Width = Math.Max(0, avail - s.Margin.Horizontal)
    Next
End Sub

Troubleshooting notes: set Margin and Padding to small values on cards and separators; avoid letting a separator be AutoSize=True if you want a thin row; a thin Panel can be more predictable than a Label for visual dividers; if you need a strict grid, TableLayoutPanel may be a simpler fit. This approach is more robust across resizing and scrolling than hard-coding widths.

Recommended Answers

All 4 Replies

Member Avatar for kb.net

I didn't exactly get what you need but I think you have to apply the height prperty of the row that contains the label to autosize instead of obselete or percentage.

Member Avatar for dsimonovski1

I want it to look like this instead: http://prntscr.com/46enm1

All controls have their padding and margin set on minimum so the distance between each of them should be short. However, the container seems to set the size of each row as it has cards, not a label. If there is an autosize property for the rows, please clarify, as I am not aware of it.

Thanks!

Member Avatar for kb.net

Sorry now I got you I mistakenly thought that you are using a TableLayoutPanel. You are right the flowlayoutpanel have now line height property.
I have built a similar example with regular labels and controls and it is working normally. Did you try to put a different background color for the label to see if it is wide? Did you try to make the label the same width of the flowlayoutpanel to make sure that none of your user controls is on the same line with the label?
If noothing works I have a bit complex solution I can propose.

Edited by kb.net
Member Avatar for dsimonovski1

Wow, thanks a lot!

The label's AutoSize property being set to True was the problem. I set the label width manually to approximately the container's width and it now works great.

Thanks again!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.