VisualState Only Changes Once in Custom Control WinUI/WASDK App

Question

I am working with a custom control in a WinUI/WASDK App and trying to modify the Foreground or BorderBrush of some elements using the VisualStateManager. However, I am encountering an issue where the VisualState only changes once, and after that, I am unable to update the elements.

Here is the scenario I would like to explain (I tested with ItemsRepeater, ItemsPresenter, and ItemsControl):

1. Initial State: When the app is launched, the first item is selected (its BorderBrush is Blue, and Foreground is also Blue), and all other items have a BorderBrush of Gray and Foreground of Red. This is the default state
2. Selecting the Next Item: When the user clicks on "Next," the next item is selected, and its BorderBrush and Foreground change to Blue, which is the correct behavior. The VisualState changes as expected in this case.
3. Selecting the Previous Item: When the user clicks on "Prev," the previous item should be selected, and its BorderBrush and Foreground should revert to the default state (Gray and Red). However, as shown in the attached GIF, the VisualState does not update correctly, and the item retains the old Blue values instead of reverting to the default state.

Despite defining default values in the VisualState and within the control itself, I cannot get the values to update. I can confirm that the VisualStateManager.GoTo method returns true and the item is in the correct state, but the values are not changing.

Additionally, I have tried changing the VisualState to another color, but it seems that the VisualState can only be updated once per item.

I Created a simple control in a WinUI/WASDK App that does not work with ItemsRepeater, ItemsControl, or ItemsPresenter. (Just a Simple Control to work with VisualState ) The issue arises when trying to reset the VisualState after it has been changed.

1. Color Change Works: I can change the VisualState to any color and update it multiple times without issues. The VisualState updates correctly and reflects the new color as expected.
2. Resetting to Default State Does Not Work: However, when attempting to reset the VisualState to the default state, it does not update properly. after changing the color to a new state, I cannot revert to the original default state.

There is some space on the left and right sides which will be increases or decreases by Changing Windows Size. How can I Remove this Spaces?

Could anyone assist with resolving this issues or provide insights into what might be going wrong?

I’ve created a repro/sample app to demonstrate the behavior.

Thank you!

https://github.com/user-attachments/files/18310294/VisualStateSample.zip

Answer 1

Hello,

Welcome to Microsoft Q&A!

I checked your sample, and I could see the behavior you mentioned. After debugging, I found that you are trying to go to a blank VisualState to recover the style of your StepBarItem like the document mentioned here- Default state, right?

The reason that why you failed is that you didn't put the blank VisualState and other VisualState in the same VisualStateGroup.

This is the same reason for the sample2 as well. You need to put the blank VisualState together with other VisualState in the same VisualStateGroup. But I noticed that your Sample2 will go to UnderWayInfo state first after initialization, so the item is blue. When you go to the blank VisualState, the item should be black as its the real default state.

You could modify the StepBarItem style a little bit like the following so the sample1 should work correctly. And for Sample2, just do the same in your Test style.

<ControlTemplate TargetType="local:StepBarItem">
    <StackPanel Spacing="5">
        <VisualStateManager.VisualStateGroups>
            <!--<VisualStateGroup>
               
            </VisualStateGroup>-->
            <VisualStateGroup>
                <VisualState x:Name="WaitingInfo">

                </VisualState>
                <VisualState x:Name="UnderWayInfo">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Border"
                                                       Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Blue" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Number"
                                                       Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Blue" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content"
                                                       Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Blue" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Besides, please keep one question in one thread. Feel free to open a new question for the space question. Our engineer will help you in the new thread.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.