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?

can you try making the VisualStateManager the first child of border (before label) — thumbmunkeys, Dec 11 '14 at 20:25
I moved the VisualStateManager right below the Border tag and tried this as well and no dice, the groupbox's header remains blue. — Tbooty, Dec 11 '14 at 20:29
i remember that the visualstatemanager must be top element, see here: http://stackoverflow.com/questions/20483686/visualstatemanager-gotostate-returns-false-and-visual-state-is-not-changed but I am not sure how it applies to your example — thumbmunkeys, Dec 11 '14 at 20:36
Well it's hitting the code now and executing it but is erroring the project out with "'BackgroundColor' name cannot be found in the name scope of 'System.Windows.Controls.Grid'." — Tbooty, Dec 11 '14 at 20:45
you can put an answer to your own question and then mark it as answered, it might help someone in the future — thumbmunkeys, Dec 11 '14 at 22:12
I wasn't sure if I did that if you would get credit or not. Since you did answer it. — Tbooty, Dec 11 '14 at 22:27
I wouldn't get credit, but I don't have the concrete answer anyway. Post your xaml as answer and get it for yourself :) — thumbmunkeys, Dec 11 '14 at 22:52

score 2 · Answer 1 · answered Dec 11 '14 at 23:00

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>

GroupBox header background not updating when using Visual States

1 Answers1