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.

score 2 · Accepted Answer · edited May 23 '17 at 11:44

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

Dhaval Patel · Answer 2 · 2014-06-05T12:06:18.063

0

you can use below menioned code

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

edited Jun 05 '14 at 12:06

answered Jun 05 '14 at 11:33

Dhaval Patel

7,471
6
37
70

I tried applying it in the code behind, but it doesn't do anything. Are you sure i'm actually applying to the itemtemplate? – JonasN89 Jun 05 '14 at 12:00
1

So you recommend I make a style in my resources where I put it? – JonasN89 Jun 05 '14 at 12:54
you can refer this answer http://stackoverflow.com/questions/24053112/wpf-button-mouse-moveover-change-color/24053354#24053354 – Dhaval Patel Jun 05 '14 at 12:57
I tried doing similar things to my Ellipse as you did for the Button, but I can't (Don't know how) use the VisualStaeManager in the . – JonasN89 Jun 11 '14 at 09:35

Change VisualState of ListBox element

2 Answers2