# Uno Toolkit Visualstatemanager Extensions

> Use VisualStateManagerExtensions to create data-driven visual states. Bind VisualState directly to view model properties.

- Skill: `unoplatform/uno-toolkit-visualstatemanager-extensions` (Agent Skill)
- Install (CLI): `npx skillmds@latest add unoplatform/uno-toolkit-visualstatemanager-extensions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unoplatform/uno-toolkit-visualstatemanager-extensions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: unoplatform (https://skillmd.com/u/unoplatform)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/unoplatform/uno-toolkit-visualstatemanager-extensions

---


# Uno Toolkit VisualStateManager Extensions — Agent Skill

## Workflow

> **Docs lookup:** call `uno_platform_docs_search(...)` first, then `uno_platform_docs_fetch(sourcePath="…")` using the `sourcePath` field from a result (a relative `.md` path; add the result's `anchor` for a section). Never pass a URL, a `.html` link, or a hand-built path.

### Step 1: Fetch the VisualStateManager Extensions Documentation

```
uno_platform_docs_search("Uno Toolkit VisualStateManager extensions data driven visual state binding")
```

Primary documentation page:
- **VisualStateManager Extensions**: `external/uno.toolkit.ui/doc/helpers/VisualStateManager-extensions.md`

Fetch the page:

```
uno_platform_docs_fetch(sourcePath="external/uno.toolkit.ui/doc/helpers/VisualStateManager-extensions.md")
```

## Key Principles (Stable)

- `utu:VisualStateManagerExtensions.States` — attached property bound to a string property (note: **States** plural)
- Supports comma, semicolon, or space separated list for multiple concurrent states from different VisualStateGroups
- When the bound property changes, the matching VisualState is activated
- Property value maps directly to VisualState name
- Eliminates need for code-behind `VisualStateManager.GoToState()` calls
- **Important**: `VisualStateManager.VisualStateGroups` must be defined on the same element that has the `States` attached property
- XAML namespace: `xmlns:utu="using:Uno.Toolkit.UI"`

## Related Skills

- [[uno-toolkit-responsive]] — Responsive layout based on screen size