How do I change VisualState in datagrid from ViewModel

Question

I have a collection in my ViewModel, each item as got specific state and based on that I want to show specific control and when the state changes I want to apply animation for the transition.

I use DataGrid to show the items on view, one column of it should show the state of the item.

What I did was I defined a style with VisualState groups (this works fine if I use if on another control, but I have to write GotoState in code behind).

And then I use following in my datagrid,

<DataGrid ItemsSource="{Binding DataItems}" AutoGenerateColumns="False">
<DataGrid.Columns>
    <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
    <DataGridTemplateColumn Header="Item state">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <ToggleButton DataContext="{Binding Item}"
                            x:Name="btnState"
                            Style="{StaticResource MyVisualStateStyle}">
                    <i:Interaction.Triggers>
                        <ei:DataTrigger Binding="{Binding ItemState}" Value="State1">
                            <ei:GoToStateAction StateName="State1"/>
                        </ei:DataTrigger>
                        <ei:DataTrigger Binding="{Binding ItemState}" Value="State2">
                            <ei:ChangePropertyAction PropertyName="Background" Value="#FF000000" TargetName="btnState" />
                            <ei:GoToStateAction StateName="State2"/>
                        </ei:DataTrigger>
                        <ei:DataTrigger Binding="{Binding ItemState}" Value="State3">
                            <ei:ChangePropertyAction PropertyName="Background" Value="#FFFFFFFF" TargetName="btnState" />
                            <ei:GoToStateAction StateName="State2"/>
                        </ei:DataTrigger>
                    </i:Interaction.Triggers>
                </ToggleButton>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

I added the change for backgroupd to see it that works but that also does not work. I checked output for any binding errors but there are no binding errors.

Is this the correct way to implement?

Any suggestions?

EDITED

I made a user control for ToggleButton that has state as dependency property and did the visual state state on change of that property in code behind :(

Bhupendra Bhupendra · Accepted Answer · 2013-07-17T07:24:37

I created a user control which has the visualstategroups in its style, added a dependency property to that control and on change of that dependency property changed the visual state in code behind.

How do I change VisualState in datagrid from ViewModel

1 Answers