SkinSetValue - ProGUI Reference Manual

Syntax

Success = SkinSetValue(Path$, State$, Component$, Property$, Value$, Skin=#Null)

Description

Defines or modifies a styling rule within a specified skin object. This is the core function for programmatically building or altering skin definitions. It associates a value with a specific property, considering the widget's class path, state, and component part.

Parameters

Path$
The widget class selector path, using dot notation for hierarchy (e.g., "window.container.button", "mylistview"). Can optionally include a theme prefix (e.g., "dark:button", "light:window.list").

State$
The widget state to which this rule applies (e.g., "", "hover", "active", "disabled"). An empty string targets the base (default) state.

Component$
The specific component part within the widget to style (e.g., "", "thumb", "trackbar", "header"). An empty string targets the main widget element.

Property$
The name of the CSS-like property to set (e.g., "background-color", "border", "font-size", "transition", "border-top-left-radius") - See CSS Reference for supported properties.

Value$
The string value for the property (e.g., "red", "#FF0000", "10px", "solid blue 2px", "url('image.png')", "0.5s ease-in"). The string will be parsed internally based on the property name.

Skin (optional)
The handle of the skin object to modify. If #Null, the current default skin is used. Default is #Null.

Return Value

Returns #True if the value was successfully set or updated in the skin object. Returns #False if any of the required parameters (Path$, Property$) are empty, if the state/component/property names contain invalid characters (like ':'), or if the skin handle is invalid.

Remarks

This function adds or replaces a rule in the skin's internal storage. The `Value$` string is parsed based on the `Property$` name (e.g., "color" properties expect color values, "border-width" expects pixel values). Invalid value formats for a given property might lead to errors or unexpected behavior during rendering or data retrieval.

Modifying skin values at runtime invalidates the internal skin cache for affected widgets, automatically triggering a redraw across the UI to reflect the changes. If a transition is applied to the skin property then the new value will animate smoothly from the old value.

Example

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

; Define initial skin properties for our dynamic button
SkinSetValue("dynamic-button", "", "", "background-color", "rgb(100, 150, 200)")
SkinSetValue("dynamic-button", "", "", "border", "2px solid #555")
SkinSetValue("dynamic-button", "", "", "border-radius", "8px")
SkinSetValue("dynamic-button", "", "", "color", "white")
SkinSetValue("dynamic-button", "", "", "font-family", "Arial")
SkinSetValue("dynamic-button", "", "", "font-size", "14pt")
SkinSetValue("dynamic-button", "", "", "font-weight", "bold")
SkinSetValue("dynamic-button", "", "", "text-align", "center")
SkinSetValue("dynamic-button", "", "", "vertical-align", "center")
SkinSetValue("dynamic-button", "", "", "box-shadow", "2px 3px 26px rgba(0, 0, 0, 0.4)")

; Add hover and active states for better interactivity
SkinSetValue("dynamic-button", "hover", "", "border-color", "white")
SkinSetValue("dynamic-button", "hover", "", "background-color", "rgb(100, 0, 0)")
SkinSetValue("dynamic-button", "hover", "", "border-radius", "30px")
SkinSetValue("dynamic-button", "active", "", "border-color", "black")
SkinSetValue("dynamic-button", "active", "", "background-color", "rgb(100, 0, 0)")

; Add a transition so the color changes smoothly when we update it!
SkinSetValue("dynamic-button", "", "", "transition", "background-color 0.6s ease, border-color 0.2s, border-radius 0.6s")
SkinSetValue("window-client", "", "", "transition", "background 0.6s ease") ; And the window client background too!

; Event handler for the button click
Procedure ButtonClickHandler(Widget, EventType, *EventData, *UserData)
    
  Protected R, G, B, NewColor$, NewColor2$
    
  ; Generate a random RGB color
  R = Random(200) + 55 ; Keep it bright enough
  G = Random(200) + 55
  B = Random(200) + 55
  NewColor$ = "rgb(" + Str(R) + ", " + Str(G) + ", " + Str(B) + ")"
  
  R = Random(200) + 55 ; Keep it bright enough
  G = Random(200) + 55
  B = Random(200) + 55
  NewColor2$ = "rgb(" + Str(R) + ", " + Str(G) + ", " + Str(B) + ")"
  
  Debug "Changing button color to: " + NewColor$
  
  ; Update the skin property dynamically.
  ; Because the skin has a transition defined, it will animate smoothly to the new color!
  SkinSetValue("dynamic-button", "hover", "", "background-color", NewColor$)
  SkinSetValue("window-client", "", "", "background-color", NewColor2$)
  
EndProcedure

; --- Create window and layout ---
MyWindow = CreateWindow(0, 0, 350, 250, "SkinSetValue Dynamic Example", #PG_Window_Default | #PG_Window_LayoutFlex)

If MyWindow
    
  ; Center contents in the window
  LayoutFlexSetAlignItems(#Null, #PG_Flex_AlignItems_Center)
  LayoutFlexSetJustify(#Null, #PG_Flex_Justify_Center)

  ; Create the button and assign our custom class
  MyButton = CreateButton(0, 0, 250, 60, "Click for Random Color!")
  WidgetSetClass(MyButton, "dynamic-button")
  
  ; Bind the click event to our handler
  AddEventHandler(MyButton, #PG_Event_Action, @ButtonClickHandler())
  
  WindowShow(MyWindow, #True, #PG_WindowShow_ScreenCentered)

  Repeat : Event = WaitWindowEvent() : Until Event = #PB_Event_CloseWindow
  
EndIf

StopProGUI()

Supported OS

Windows, Linux