Looking for recommendations - Scrollable panel

[itg-assistant]

Carl Daniel asked 2017-12-11 00:55:28 UTC

I'm building a new app with WiseJ - so far, so good (despite many, many bugs in the designer, but I'm getting by).

The majority of my UI is a single UserControl containing a TabControl with several pages.  This control is displayed docked in a fullscreen window.  So far, so good.

Now, I need an "output window" - what I'd like is a scrollable panel within a tab of the tab control in which I can dynamically inject a variable amount of content, and have the panel display a vertical scroll bar when the content is too large.

So far, no luck though.  I've tried:

• Using a FlowLayoutPanel with the layout set to TopToBottom - when the browser is sized down, rather than scroll bars appearing, the panel goes to a two-column layout rather than showing scroll bars.  Scroll bars are enabled on the FLP.

• Using a TableLayoutPanel (with absolute sizes) inside a Panel - when the browser is sized down, the TLP is clipped to the available space for the panel, still no scroll bars.  Scroll bars are enabled on the Panel.

I'd like to do this within the WiseJ control suite and not resort to emitting HTML for this portion, although I suppose that's an option.  I'm not an HTML/CSS developer, so I prefer the stylistic consistency of staying with controls.

How would you go about building this UI?

[itg-assistant]

Luca answered 2017-12-11 15:23:36 UTC

See attached sample.

The TabPage is already a scrollable panel. You can simply set AutoScroll=true and it will scroll when the content exceeds the container. You can also set the scroll margin and min size, etc.

The FlowLayoutPanel manages the child controls using the flow layout engine. You can also set AutoScroll=true (margins, etc) and it will scroll automatically when the layout of the children exceeds the container. If you set the layout direction to TopToBottom then the flow is top to bottom and wraps to the next column. It will eventually scroll horizontally. The default is LeftToRight, which places the children left to right. You can also set a flow break on a child, or set the FillWeight to let children in a row expand horizontally.

The TabelLayoutPanel managed the child controls using a grid layout. This is the most complex one. It can also auto scroll, set the AutoScroll to true. You can also set if it automatically adds columns or rows when adding controls. You can preset columns and rows, when adding controls they will automatically occupy the next available cell (1 control per cell). When the cells are finished, it will automatically add a new row (or column). When it overflows it scrolls. Rows and columns can be set to autosize (fit the content), be a percentage of the container, or fixed size. You can also set the RowSpan and ColSpan properties for child controls to occupy more than 1 cell.

FlowLayoutPanel and TableLayoutPanel are also property extenders, which means that they add properties to the controls in the same container. You will see those properties in the designer only. To set the extender's properties programmatically, use this: flowLayoutPanel1.Set[PropertyName](control, value).

HTH

Please send a list of bugs you have found in the designer.

[itg-assistant]

Carl Daniel answered 2017-12-11 17:17:04 UTC

Thanks for the tips – I’ll give it a try tonight. I’ll start a list of bugs/quirks I see in the designer. I suspect many of these will be difficult to repro, but who knows.

[itg-assistant]

Mark Reed answered 2017-12-12 22:56:02 UTC

Sometimes I see weird UI bugs/quirks until I stop visual studio and clear this folder

%LOCALAPPDATA%\Microsoft\VisualStudio\15.0_667c22e8\ProjectAssemblies