Style Setters Overview

[antongit]

Style Setter TODO (wip):

• [x] SetCheckboxStyle Checkmark

• [x] SetPlotStyle Line LineHovered Histogram HistogramHovered

• [x] SetAlphaStyle Alpha DisabledAlpha

• [x] SetWindowStyle Padding Rounding BorderSize MinSize TitleAlign WindowBg (Color) MenuBarBg (Color) Joined from SetTitleStyle: TitleBackgroundColor TitleActiveColor TitleCollapsedColor Joined from SetResizeGrip: ResizeGripColor ResizeGripHovered ResizeGripActive

• [x] SetBorderStyle Border (Color) Shadow (Color)

• [x] SetChildStyle Rounding BoderSize ChildBg (Color)

• [x] SetPopupStyle Rounding BorderSize PopupBg Modal Dim Background (ModalWindowDimBg)

• [x] SetFrameStyle Padding Rounding BorderSize FrameBg (Color) FrameBgHovered (Color) FrameBgActive (Color)

• [x] SetSpacingStyle Item Spacing Item InnerSpacing

• [x] SetIndentStyle Spacing

• [x] SetTableStyle Cell Padding TableHeaderBg TableBoderStrong TableBorderLight TableRowBg TableRowBgAlt

• [x] SetTabStyle TabRounding Tab TabHovered TabActve TabUnfocused TabUnfocusedActive

• [x] SetButtonStyle ButtonTextAlign Button ButtonHovered ButtonActive

• [x] SetGrabStyle GrabMinSize GrabRounding

• [x] SetScrollStyle ScrollbarSize ScrollbarRounding ScrollbarBg ScrollbarGrab ScrollbarGrabHovered ScrollbarGarbActive

• [x] SetSliderStyle SliderGrab SliderGrabActive

• [x] SetHeaderStyle - added Tags: Selectable CollapsingHeader TreeNode MenuItem ??? Header HeaderHovered HeaderActive

• [x] SetSeparatorStyle Separator SeparatorHovered SeparatorActive

• [x] SetSelectableStyle TextAlign

• [x] SetTextStyle Color (ImGuiCol_Text) Disabled Color (ImGuiCol_TextDisabled) Selected Text Background (ImGuiCol SelectedTextBackground)

[antongit]

Button

Button itself has no padding, but it listens to the FramePadding style. It would be cool if the SetButtonStyle node has also the Padding pin, internally it will set FramePadding. But... maybe it is a bit strange, when someone sets padding in SetButtonStyle and somewhere above not only buttons, but other frames will get padding as well?

At the moment one should use two Set nodes to define how buttons should look like:

And to control the text color of the button, the third node SetTextStyle should be used.

Slider

An example of Slider that needs 4 nodes to style.

Scroll

Style for the scrollbar is very self contained, but an extra SetGrabStyle can set Min Size (min vertical size in this case).

Window

It looks like, that SetTitleStyle and SetResizeGripStyle can be part of the SetWindowStyle as they are affecting only windows, but then SetWindowStyle will be huge...

[azeno]

Well of course those properties should be independent. If they aren't we shouldn't pack them in one group. Better to put many nodes there and it makes sense in the end than to have convenience nodes making promises they can't fulfill.

[antongit]

@azeno

Better to put many nodes there and it makes sense in the end than to have convenience nodes making promises they can't fulfill.

Ähm, probably there is a misunderstanding here. I meant the other way around. What I meant is to have some convenient Node SetAllButtonPropertiesStyle (whatevername), that has pins of SetButtonStyle AND also some (relevant) pins from the SetFrameStyle. So only one node is needed to style buttons. The downside is that this SetAllButtonPropertiesStyle changes not only buttons, but all Frames upstream.

[joreg]

"The downside is that this SetAllButtonPropertiesStyle changes not only buttons, but all Frames upstream." exactly i think this is a no-go.

[antongit]

Missing in VL.ImGui. For now:

Values

• [ ] ImVec2 TouchExtraPadding; // Expand reactive bounding box for touch-based system where touch position is not accurate enough. Unfortunately we don't sort widgets so priority on overlap will always be given to the first widget. So don't grow this too much!
• [ ] float ColumnsMinSpacing; // Minimum horizontal spacing between two columns. Preferably > (FramePadding.x + 1).
• [ ] float LogSliderDeadzone; // The size in pixels of the dead-zone around zero on logarithmic sliders that cross zero..
• [ ] ImVec2 SelectableTextAlign; // Alignment of selectable text. Defaults to (0.0f, 0.0f) (top-left aligned). It's generally important to keep this left-aligned if you want to lay multiple items on a same line.
• [ ] ImVec2 DisplayWindowPadding; // Window position are clamped to be visible within the display area or monitors by at least this amount. Only applies to regular windows.
• [ ] ImVec2 DisplaySafeAreaPadding; // If you cannot see the edges of your screen (e.g. on a TV) increase the safe area padding. Apply to popups/tooltips as well regular windows. NB: Prefer configuring your TV sets correctly!
• [ ] float MouseCursorScale; // Scale software rendered mouse cursor (when io.MouseDrawCursor is enabled). May be removed later.
• [ ] bool AntiAliasedLines; // Enable anti-aliased lines/borders. Disable if you are really tight on CPU/GPU. Latched at the beginning of the frame (copied to ImDrawList).
• [ ] bool AntiAliasedLinesUseTex; // Enable anti-aliased lines/borders using textures where possible. Require backend to render with bilinear filtering (NOT point/nearest filtering). Latched at the beginning of the frame (copied to ImDrawList).
• [ ] bool AntiAliasedFill; // Enable anti-aliased edges around filled shapes (rounded rectangles, circles, etc.). Disable if you are really tight on CPU/GPU. Latched at the beginning of the frame (copied to ImDrawList).
• [ ] float CurveTessellationTol; // Tessellation tolerance when using PathBezierCurveTo() without a specific number of segments. Decrease for highly tessellated curves (higher quality, more polygons), increase to reduce quality.
• [ ] float CircleTessellationMaxError; // Maximum error (in pixels) allowed when using AddCircle()/AddCircleFilled() or drawing rounded corner rectangles with no explicit segment count specified. Decrease for higher quality but more geometry.

Colors

• [ ] ImGuiCol_DragDropTarget, // Rectangle highlighting a drop target
• [ ] ImGuiCol_NavHighlight, // Gamepad/keyboard: current highlighted item
• [ ] ImGuiCol_NavWindowingHighlight, // Highlight window when using CTRL+TAB
• [ ] ImGuiCol_NavWindowingDimBg, // Darken/colorize entire screen behind the CTRL+TAB window list, when active
• [x] ImGuiCol_ModalWindowDimBg, // Darken/colorize entire screen behind a modal window, when one is active

Not Working

• [ ] ImGuiCol.SeparatorHovered
• [ ] ImGuiCol.SeparatorActive

Missing in ImGuiNET

Values

• ImGuiDir WindowMenuButtonPosition; // Side of the collapsing/docking button in the title bar (None/Left/Right). Defaults to ImGuiDir_Left.
• ImGuiDir ColorButtonPosition; // Side of the color button in the ColorEdit4 widget (left/right). Defaults to ImGuiDir_Right
• float TabBorderSize;
• float TabMinWidthForCloseButton;