WidgetSetSkinState - ProGUI Reference Manual

Syntax

Success = WidgetSetSkinState(Widget, State$="", Component$="")

Description

Sets the current interaction state for a widget or one of its components. This affects which styles are applied from the skin. For example, setting the state to "hover" might change the widget's background color if a rule like .mywidget:hover { background-color: blue; } exists in the skin.

Parameters

Widget
The handle of the ProGUI widget.

State$ (optional)
The state name string (e.g., "hover", "active", "focus", "disabled", or custom states). An empty string ("") represents the default/normal state. Case-insensitive.

Component$ (optional)
The name of the component part of the widget to set the state for (e.g., "thumb", "trackbar" for a scrollbar). An empty string ("") applies the state to the main widget element. Case-insensitive.

Return Value

Returns #True if the state was successfully queued for update, or #False if the widget handle was invalid.

Remarks

This is the core function for dynamically changing a widget's appearance based on user interaction or application logic. ProGUI internally uses this for common states like hover and active. When a state changes, ProGUI checks the skin for properties defined for the new state (e.g., `widgetclass:newstate`) and compares them to the properties of the previous state. If differences are found and a `transition` property is defined, it initiates animations for the changed properties. If no transition is defined, the properties change instantly. The actual state change and potential animation start are handled asynchronously by the ProGUI render/animation thread. Setting the same state multiple times has no effect.

Example

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

; Define skin properties for different states
SkinSetValue("state-button", "", "", "background-color", "lightgrey")
SkinSetValue("state-button", "", "", "border", "2px outset grey")
SkinSetValue("state-button", "hover", "", "background-color", "lightblue")
SkinSetValue("state-button", "active", "", "background-color", "dodgerblue")
SkinSetValue("state-button", "active", "", "border", "2px inset darkblue")
SkinSetValue("state-button", "disabled", "", "background-color", "#E0E0E0")
SkinSetValue("state-button", "disabled", "", "color", "grey") ; Assume text color property exists
; Define transitions
SkinSetValue("state-button", "", "", "transition", "background-color 0.3s ease, border 0.2s")

Procedure DrawStateButton(Widget, EventType, *EventData.PG_EventDraw, Label$)
  WidgetGetSkinColor(Widget, "", "background-color", @bgColor.l, @bgOpacity.f)
  WidgetGetSkinColor(Widget, "", "color", @textColor.l, @textOpacity.f) ; For text
  MyBorder = WidgetGetSkinBorder(Widget, "", "border")

  DrawBox(0, 0, *EventData\width, *EventData\height, bgColor, bgOpacity)
  If MyBorder : DrawBorder(MyBorder, 0, 0, *EventData\width, *EventData\height) : EndIf

  Shared TxtObj
  If TxtObj = 0 : TxtObj = CreateText("", "Arial", 12) : EndIf
  TextSetContent(TxtObj, Label$)
  DrawTxt(TxtObj, 5, 5, textColor, textOpacity)
EndProcedure

Procedure MouseStateHandler(Widget, EventType, *EventData.PG_EventMouse, *UserData)
  Select EventType
    Case #PG_Event_MouseEnter
      WidgetSetSkinState(Widget, "hover")
    Case #PG_Event_MouseLeave
      WidgetSetSkinState(Widget, "") ; Back to default state
    Case #PG_Event_MouseLeftButtonDown
      WidgetSetSkinState(Widget, "active")
    Case #PG_Event_MouseLeftButtonUp
      ; Check if mouse is still inside before setting hover, otherwise set default
      If *EventData\x >= 0 And *EventData\x < WidgetGetWidth(Widget) And *EventData\y >= 0 And *EventData\y < WidgetGetHeight(Widget)
        WidgetSetSkinState(Widget, "hover")
      Else
        WidgetSetSkinState(Widget, "")
      EndIf
  EndSelect
EndProcedure

MyWindow = CreateWindow(0, 0, 300, 200, "Widget Skin State")
RootLayout = WindowGetLayout(MyWindow)
LayoutSetPadding(RootLayout, 10)

If MyWindow
  StateButton = CreateWidget(0, 0, 120, 40, @"Click Me")
  WidgetSetClass(StateButton, "state-button")
  AddEventHandler(StateButton, #PG_Event_Draw, @DrawStateButton())
  AddEventHandler(StateButton, #PG_Event_MouseEnter, @MouseStateHandler())
  AddEventHandler(StateButton, #PG_Event_MouseLeave, @MouseStateHandler())
  AddEventHandler(StateButton, #PG_Event_MouseLeftButtonDown, @MouseStateHandler())
  AddEventHandler(StateButton, #PG_Event_MouseLeftButtonUp, @MouseStateHandler())

  WindowShow(MyWindow, #True, #PG_Window_ScreenCentered)

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

StopProGUI()

Supported OS

Windows, Linux