skills.rest
unoplatform
unoplatformOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatformGitHub

uno-toolkit-visualstatemanager-extensions

Bind VisualStateManager states to view-model properties in XAML.

9|1|Updated Dec 10, 2024
Search Tags:#ui#xaml#viewmodel#binding#uno-toolkit#visualstate
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-visualstatemanager-extensions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uno-toolkit-visualstatemanager-extensions
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-toolkit-visualstatemanager-extensions
Command: npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-visualstatemanager-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data-driven VisualState binding eliminates manual GoToState calls and keeps UI in sync with view-model properties.

Core Features & Use Cases

  • Attached property utu:VisualStateManagerExtensions.States bound to a string property to drive VisualState changes automatically.
  • Supports comma, semicolon, or space separated lists for multiple states from different VisualStateGroups.
  • Automatically activates the matching VisualState when the bound property changes and maps to VisualState names.
  • Eliminates code-behind VisualStateManager.GoToState calls and enforces that VisualStateGroups are defined on the same element.
  • XAML namespace: xmlns:utu="using:Uno.Toolkit.UI"

Quick Start

Bind the States property to a view model property to drive visual states automatically.

Frequently Asked Questions about uno-toolkit-visualstatemanager-extensions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bind UI visual states to a view model property in XAML without using code-behind?▼

Data-driven VisualState binding connects VisualStateManager states to view model properties automatically using the utu:VisualStateManagerExtensions.States attached property. This eliminates manual VisualStateManager.GoToState calls and keeps UI synchronized with dynamic data.

Can I activate multiple visual states from different VisualStateGroups using a single bound property?▼

Yes, VisualStateManagerExtensions.States supports multiple states by accepting comma, semicolon, or space separated lists. The bound string property maps values to VisualState names across different VisualStateGroups defined on the same element.

How does VisualStateManagerExtensions.States map view model values to VisualState names in Uno Platform?▼

VisualStateManagerExtensions.States maps bound view model string values directly to VisualState names. When the bound property changes, the extension automatically activates the matching VisualState defined within the VisualStateGroups on that element.

Do I need to define VisualStateGroups on the same element as the States attached property?▼

Yes, VisualStateGroups must be defined on the same element where the utu:VisualStateManagerExtensions.States attached property is applied. This ensures the data-driven binding can correctly locate and activate the matching VisualState.

What XAML namespace is required to use VisualStateManagerExtensions for data-driven UI states?▼

You must declare xmlns:utu="using:Uno.Toolkit.UI" in your XAML file to use the VisualStateManagerExtensions.States attached property for binding VisualStateManager states to view model properties.

Why are my manual VisualStateManager.GoToState calls becoming hard to maintain in Uno Platform?▼

Manual GoToState calls scatter UI logic across code-behind, making it difficult to keep visual states synchronized with dynamic data. Binding VisualStateManager states directly to view model properties centralizes state management and eliminates manual updates.

Related Skills

Explore More Software Engineering Skills→
unoplatformunoplatform
9

uno-toolkit-itemsrepeater-extensions

Add selection and incremental loading to ItemsRepeater via attached properties.

Official
Intermediate
quanngynxquanngynx

view-transitions

Animate DOM changes with the View Transitions API.

Community
Intermediate
unoplatformunoplatform
9

uno-navigation-xaml

Adds View-based navigation to Aurelia apps with routing and state preservation.

Official
Intermediate
VincentH-NetVincentH-Net
7

uno-csharpmarkup2

Build Uno Platform UIs in pure C# using C# Markup 2.

Community
Advanced