Change VisualState of ListBox element

Question

I've got a Lisbox in which I've made a ItemsTemplate, in this itemTemplate I've got a element in which I wish to change the visualState, The problem is I do not know how to change the state. Here is what I've got so far.

<ListBox Name="My_LB" ItemsSource="{Binding Users}"  Canvas.Left="45.8256" Canvas.Top="39.3065" Canvas.ZIndex="2" ScrollViewer.VerticalScrollBarVisibility="Disabled">                            
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Ellipse x:Name="user_ellipse" Width="7.87566" Height="7.87563" Canvas.Left="25.3505" Canvas.Top="5.08428e-005" Stretch="Fill" StrokeThickness="1.6" StrokeLineJoin="Round" Stroke="#FF000000">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="IsTurn">
                                                <VisualState x:Name="PlayersTurn">
                                                    <Storyboard>
                                                        <ColorAnimation To="Yellow" Storyboard.TargetName="user_ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"/>
                                                        <ColorAnimation To="Yellow" Storyboard.TargetName="user_ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"/>
                                                        <ColorAnimation To="Yellow" Storyboard.TargetName="user_ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup> 
                                    </VisualStateManager.VisualStateGroups>
                                    <Ellipse.Fill>
                                        <RadialGradientBrush RadiusX="0.651141" RadiusY="0.651175" Center="0.380114,0.308228" GradientOrigin="0.380114,0.308228">
                                            <RadialGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <RotateTransform CenterX="0.380114" CenterY="0.308228" Angle="47.4886"/>
                                                    </TransformGroup>
                                                </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Color="#FF9F9065" Offset="0"/>
                                            <GradientStop Color="#FF4F4832" Offset="0.685767"/>
                                            <GradientStop Color="#FF000000" Offset="1"/>
                                        </RadialGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </Canvas>
                        </Viewbox>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

This is what I've got so far, if anyone could just help me change the state in anyway to start of with, that would be appreciated.

Further if possible I would like to change the state depending on a parameter in my ViewModel, I'm using the MVVM design, I've found this soltuion, but I do not know the namespace of "b", and d hence do not know how to get the "VisualStateSettingBehavior".

UPDATE I've changed my Ellipse to a button and made a style for the button in my resourcedictionary, so what I have now is:

The MainPage:

 <ListBox Name="My_LB" ItemsSource="{Binding Users}"  Canvas.Left="45.8256" Canvas.Top="39.3065" Canvas.ZIndex="2" ScrollViewer.VerticalScrollBarVisibility="Disabled">                            
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
<Button Name="Shield_Light" Canvas.Left="25.3505" Canvas.Top="5.08428e-005" Style="{StaticResource Style1}"/>

                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

And in my ResourceDictionary I've got the syle:

<Style x:Key="Style" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Ellipse x:Name="Ellipse_Light" Width="7.87566" Height="7.87563" Stretch="Fill" StrokeThickness="1.6" StrokeLineJoin="Round" Stroke="#FF000000" Fill="Red">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommomStates">
                            <VisualState x:Name="IsNotTurn"/>
                            <VisualState x:Name="IsTurn">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Ellipse_Light" Storyboard.TargetProperty="Fill" To="Yellow"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Ellipse>
            </ControlTemplate>
        </Setter.Value>
    </Setter>


</Style>

But i still do not know how to change the VisualState such that it turn yellow.

Answer 1

To start of it is a good idea to make your ellipse to a button instead, as you've done in the updated version. However your targetProperty for the storyboard is not set correct, you should ser it to:

Storyboard.Targetproperty ="(Fill).(SolidColorBrush.Color)"

If you wish to change the VisualState from the code behind you should find the Button and then change the state of it. I found these two examples which helped me:

1

2

That is you find the button through the visualTreeHelper and obj.FindName.

If you however want to change the VisualState from the ViewModel you should make an Attached property, these two sites will help you with this:

3

4

Answer 2

you can use below menioned code

 VisualStateManager.GoToState(this, "PlayersTurn", false);