GroupBox header background not updating when using Visual States

Question

I have a group box that has custom styling on it and I'm trying to create Visual states for it and move to those visual states when a button is hit on my program.

The code below stylizes the groupbox to and changes the header to solid blue

Also be warned still learning code so this code may be messy or poorly done.

<Style TargetType="GroupBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GroupBox">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="28" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Border Grid.Row="0"
          BorderThickness="1"
          BorderBrush="#3c4a55"
          Background="#FF0080D4">
                        <Label Foreground="White">
                            <ContentPresenter Margin="0"
                      ContentSource="Header"
                      RecognizesAccessKey="True" />
                        </Label>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup>
                                <VisualState Name="Normal"/>
                                <VisualState x:Name="Orange">
                                    <Storyboard>
                                        <ColorAnimation 
                                            Storyboard.TargetName="BackgroundColor"
                                            Storyboard.TargetProperty="Color"
                                            To="{StaticResource CVinYellow}"

                                            />

                                    </Storyboard>

                                </VisualState>

                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="Orange" GeneratedDuration="00:00:01"/>
                                    <VisualTransition To="Normal" GeneratedDuration="00:00:01"/>
                                </VisualStateGroup.Transitions>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>


                    </Border>

                    <Border Grid.Row="1"
          BorderThickness="1,1,1,1"
          BorderBrush="#25A0DA">
                        <ContentPresenter Margin="1" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The code behind is as follows:

 private void radioButton_Checked(object sender, RoutedEventArgs e)
    {

        VisualStateManager.GoToState(testGroupBox, "Orange", true);
    }

When this is ran and the button is clicked the style does not change at all and it produces no errors.

I'm not entirely sure what I am doing wrong at this point, Can you override colors of a custom control with a visual state?

Answer 1

Figured it out with the help of thumbmunkeys.

The VisualStateManager must be the top element. Had to move it so it was below the grid.

<Style TargetType="GroupBox">

    <Setter Property="Template">
        <Setter.Value>

            <ControlTemplate TargetType="GroupBox">

                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                            <VisualState Name="Normal"/>
                            <VisualState x:Name="Orange">
                                <Storyboard>
                                    <ColorAnimation 
                                            Storyboard.TargetName="BorderColors"
                                            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                            To="{StaticResource CVinYellow}"

                                            />

                                </Storyboard>

                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="28" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Border x:Name="BorderColors"
                            Grid.Row="0"
          BorderThickness="1"
          BorderBrush="#3c4a55"

          Background="#FF0080D4">

                        <Label Foreground="White">
                            <ContentPresenter Margin="0"
                      ContentSource="Header"
                      RecognizesAccessKey="True" />
                        </Label>




                    </Border>

                    <Border Grid.Row="1"
          BorderThickness="1,1,1,1"
          BorderBrush="#25A0DA">
                        <ContentPresenter Margin="1" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>