microsoft / microsoft/microsoft-ui-xaml
AnimatedIcon Doesn't get selected states
- 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
Assessment
This issue has not been assessed yet.