TableLayoutPanel CellBorderStyle

[itg-assistant]

Alex Prinias asked 2016-05-23 15:05:00 UTC

Hi,

There seems to be no CellBorderStyle property for the TableLayoutPanel control.

In general, all controls do not have a BorderWidth property.

Best regards,

Alex

[itg-assistant]

Luca answered 2016-05-23 15:31:31 UTC

Hi Alex,

The TableLayoutPanel has the BorderStyle for the entire panel. Internally, the cells, are only a layout logic group, they are not rendered on the client. You can place a panel inside a cell, or set the border style of the control in the cell. Child controls can span multiple cells (see the RowSpan and ColSpan properties added to all child controls).

The BorderStyle, for the controls that have it, defines the name of the style: none, solid, dotted, dashed and double. However, the way it's rendered is entirely defined in the theme. You can set, or override, the width, color and style of the border by setting the styles associated to a state in the theme. Each setting is a group comprised of (top, right, bottom, left).

For example, the BorderStyle.Solid for the editable controls in the material.theme is rendered only as the bottom border.

You can also override only a specific appearance without having to create a whole new theme by adding a theme mixin. Say, for example, that you want the border of all Wisej.Web.Panel controls (you can even theme a specific panel of you change the appearance key) to be 2px instead of 1px, add under /Themes:

double-border.mixin.theme as

{
"appearances": {
"panel": {
"inherit": "panel",
"states": {
"default": {
"styles": {
"width": 2
}
}
}
}
}
}

HTH

Best,

Luca

[itg-assistant]

Alex Prinias answered 2016-05-24 12:59:00 UTC

Hi Luca,

Thanks for your answer.

I use the TableLayoutPanel to create my forms. I define a TableLayoutPanel and then I "inject" controls/labels in its cells. In that way I can create forms programmaticaly without having to worry whether the controls are aligned and so on. So, I usually had the cell borders showing while I develop and then have them disappear in production. I mean, I agree I don't need the cell borders in the final product, but it is useful for development. It would be a nice enhancement if it is something easy to do, but it's up to you of course to decide.

All the best,

Alex

[itg-assistant]

Luca answered 2016-05-24 16:06:43 UTC

The cell borders should be visible in the designer. If not, it's a bug. You'd like the visible in debug mode at runtime? At runtime it may be difficult since we don't have the html created for the grid. Controls are all positioned absolutely and there is no container other than the panel itself. The only way to do that would be to put the controls in a panel and the panel (or group box) docked/fill in the cell. The panel adds the possibility to have the border, but also to have a title (see ShowHeader and HeaderPosition) in any of the four sides.

Also, look at the FlowLayoutPanel, we added the FillWeight property and enhanced the AutoSize to grow vertically. FillWeight, together with MinSize and MaxSize are great to have controls fill he row proportionally and wrap when necessary.

Best,

Luca

[itg-assistant]

mitch stephens answered 2018-02-04 03:27:36 UTC

Luca, I have read the docs regarding Mixin Themes, which from what I can tell, allow me to define appearances at design time. I understand that I can set the appearance key in the controls which will select a Mixin Theme. However, is it possible to create a dynamic mixin theme?

I am trying to replicate our form designer technology from VWG. In our tool today we allow the user to choose BorderStyle, BorderWidth and BorderColor (among other visual properties including color and font). There are many thousands of combinations of styles, width and color, so I don't think I can pre-define all the possible combinations that may exist.

Is there a practical way to allow the user to choose some of these properties and then render the controls accordingly at run time?

Thanks

Mitch