microsoft / microsoft/microsoft-ui-xaml

AnimatedIcon Doesn't get selected states

Open
#11,080 1 comment 0 reactions 1 assignee Claimed by @niels9001 View on GitHub
area-NavigationView bug team-Controls
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

### Describe the bug

I spent lots of yesterday afternoon trying to get an animation to work on the NavigationViewItem. According to the documenation here: https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/animated-icon

```
The NavigationViewItem automatically sets the following states on the AnimatedIcon:

Normal
PointerOver
Pressed
Selected
PressedSelected
PointerOverSelected
If GameSettingsIcon has a marker defined for "NormalToPointerOver", the icon will be animated until the pointer moves over the NavigationViewItem. See the following section for more information on creating markers.
```

I followed this and set states for all of these, but it only seems to respect Normal, PointerOver, and Pressed. None of the Selected states seem to work. I was able to manually set the state to Selected, but doing this in the code, made it jump straight to the selected state of the animation instead of doing the transition animation and it would go back to the regular PointerOver and Pressed states instead of the PointerOverSelected and PressedSelected states.

Is this a bug, or is the documentation incorrect? Looking at the sample app, all the examples don't seem to include a selected state like the gear that spins back to the beginning or the hamburger that goes back to the normal state when selected.

Here's a bare-bones example I made to test it:

### Why is this important?

There are a couple of icons I want to do this with where a selected state would signal it's selected like a folder opening and staying open.

### Steps to reproduce the bug

```
















```

Here's the markers used in my example:

```
"markers": [
// normal to pointer over transition
{
"tm": 0,
"cm": "NormalToPointerOver_Start",
"dr": 0
},
{
"tm": 10,
"cm": "NormalToPointerOver_End",
"dr": 0
},
// pointer over to normal transition
{
"tm": 10,
"cm": "PointerOverToNormal_Start",
"dr": 0
},
{
"tm": 0,
"cm": "PointerOverToNormal_End",
"dr": 0
},
// pointer over to pressed transition
{
"tm": 10,
"cm": "PointerOverToPressed_Start",
"dr": 0
},
{
"tm": 0,
"cm": "PointerOverToPressed_End",
"dr": 0
},
// pointer over to pointerOverSelected
{
"tm": 10,
"cm": "PointerOverToPointerOverSelected_Start",
"dr": 0
},
{
"tm": 150,
"cm": "PointerOverToPointerOverSelected_End",
"dr": 0
},
// pointer over selected to pointer over transition
{
"tm": 150,
"cm": "PointerOverSelectedToPointerOver_Start",
"dr": 0
},
{
"tm": 10,
"cm": "PointerOverSelectedToPointerOver_End",
"dr": 0
},
// normal to selected transition
{
"tm": 0,
"cm": "NormalToSelected_Start",
"dr": 0
},
{
"tm": 150,
"cm": "NormalToSelected_End",
"dr": 0
},
// selected to normal transition
{
"tm": 150,
"cm": "SelectedToNormal_Start",
"dr": 0
},
{
"tm": 0,
"cm": "SelectedToNormal_End",
"dr": 0
},
// selected to pointer over selected
{
"tm": 160,
"cm": "PointerOverSelectedToSelected_Start",
"dr": 0
},
{
"tm": 150,
"cm": "PointerOverSelectedToSelected_End",
"dr": 0
},
// pointer over selected to selected
{
"tm": 160,
"cm": "SelectedToPointerOverSelected_Start",
"dr": 0
},
{
"tm": 150,
"cm": "SelectedToPointerOverSelected_End",
"dr": 0
},
// pointer over selected to pressed selected
{
"tm": 160,
"cm": "PointerOverSelectedToPressedSelected_Start",
"dr": 0
},
{
"tm": 150,
"cm": "PointerOverSelectedToPressedSelected_End",
"dr": 0
}
]
```

### Actual behavior

Only the non-selected states are automatically set.

### Expected behavior

The selected states should be automatically set as the documentation indicates

### Screenshots

_No response_

### NuGet package version

WindowsAppSDK 2.0.1, Win2D 1.4.0

### Windows version

Windows 11 (24H2): Build 26100

### Additional context

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.