How to add new Visual States to a Custom control template dynamically in code?

Question

Is it possible to add a new VisualState to a CustomControl Template's VisualStateManager programmatically in code?
For example, I can add to a CustomControl Template this XAML manually in design-time:

<VisualState x:Name="First">
   <Storyboard>
      <ColorAnimation Duration="0:0:0"
                      Storyboard.TargetName="SBorder"
                      Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Red" />
    </Storyboard>
</VisualState>

But how could I add a new VisualState in runtime?

Answer 1

I think this is doable, but by no means easy...

this should work:

Grid grid = this.Template.FindName("RootElement", this) as Grid;
(VisualStateManager.GetVisualStateGroups(grid)).Add(new VisualStateGroup() { /* the code for your visualstategroup here */ });

(you'll need to adapt depending on the type of your template's root element's name, and the place where you set-up the visualstatemanager, but all in all this can work.

also, this adds a new visualStateGroup, not just a visualState. If you want to add a VisualState to an existing visualStateGroup, you'll have to get the group from the collection first, but this is common "get element from a collection" stuff

basically:

1. Get the template's element containing the visualStateManager
2. use the VisualStateManager.GetVisualStateGroups() static method to get the current visualStateGroups
3. get the group you want from the collection or create a new one and add it to the collection
4. add a new visualState in this group

hope this helps.

Answer 2

You should create the Group itself using XAML I suggest, then you have to find the VisualStateGroup you are Looking for like this:

VisualStateGroup visualStateGroupLookingFor = null;
var visualStateGroups = (VisualStateManager.GetVisualStateGroups(LayoutRoot));
foreach (VisualStateGroup state in visualStateGroups) {
    if (state.Name == "VisualStateGroupMine") {
        visualStateGroupLookingFor = state;
        break;
        }
    }

Then, you have to create a new VisualState and Storyboard to add, for example:

var visualState = new VisualState();
var storyBoard = new Storyboard();

Now, create the animation:

var animation = new DoubleAnimation();
animation.To = 10.0;

And set the target of the animation:

//assuming this is instance of class ClassFoo
//and you want to animate it's Width
Storyboard.SetTarget(animation, this);
Storyboard.SetTargetProperty(animation, new PropertyPath(ClassFoo.WidthProperty));

Finally add the animation(s) to your storyboard, give it a name, add it to the visualstategroup:

storyBoard.Children.Add(animation);
visualState.Storyboard = storyBoard;
visualState.Name = "CoolNameLikeWidthAnimation";
visualStateGroupLookingFor.States.Add(visualState);

Thats it, trigger it as usual with

VisualStateManager.GoToState(this, "CoolNameLikeWidthAnimation", true);