Any chance that you can explain for myself (and the rest of our readers here)?

Of course!

The attached property VisualStateManager.VisualStateGroups can only be attached to the root XAML node of the control's content to work with VisualStateManager::GoToState(...), else it won't work (hard to detect because it won't crash the app or display an error/warning at compilation time).

The previous change added an additional grid (BackgroundElement) moving by accident the VisualStateManager out of the root node and making VisualStateManager::GoToState ineffective.
.

Thanks @rudyhuyn.

The attached property VisualStateManager.VisualStateGroups can only be attached to the root
XAML node of the control's content to work with VisualStateManager::GoToState(...), else it won't
work (hard to detect because it won't crash the app or display an error/warning at compilation
time).

That was what I figured based on your change. Thanks for the confirmation. I then found corresponding documentation to support that statement as well:

https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.VisualStateManager#remarks

Control authors or app developers add VisualStateGroup object elements to the root element of a
control template definition in XAML, using the VisualStateManager.VisualStateGroups attached
property.

But then I'm trying to understand other places where it appears to not be on the root XAML node of the control. Take for example,, the TitleContentControl:

Here we have a Grid which contains a Border, and the VisualStateMananger.VisualStateGroups is on the Border as opposed to the Grid element which should in theory be considered the root node.

I think your change here is completely right, no doubt. I'm just trying to wrap my head around some inconsistent usage (as far as I can tell) of VSM then within the project (although, as far as I can tell, this is the only other example in the project besides the one in this PR where VSM isn't attached to the root node).

Thoughts?

Here we have a Grid which contains a Border, and the VisualStateMananger.VisualStateGroups is on the Border as opposed to the Grid element which should in theory be considered the root node.

Even if the Border is a X(A)ML descendant of the Grid, they are not related and are part of 2 different XAML trees because the ContentTemplate has its own XAML tree structure.

The Grid is a content of the Page, and is part of its visual tree.
The Border isn't part of the visual tree but part of the template definition describing a Button and is the root node of this definition. (defined in Grid Resources).

So the definition is still correct: the VisualStateManager is attached to the root element of a control template.

Ah. Good catch. I completely missed that there was a ControlTemplate embedded within the ContentControl there. Thanks for looking into all of this.