Silverlight: Animate a data-template property / bind to code-behind?

I'm building a Windows Phone 7 app. For it, I'm making a ListBox that has two modes: editing and not-editing. When it's in editing mode, + and - icons are displayed next to the items. When it's in normal modes, the icons are hidden.

I'm trying to figure out how to do this. Here is the control:

 <Grid x:Name="LayoutRoot">
        <ListBox x:Name="ContentListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Image Source="{Binding Path=IconSource}"
                               Grid.Column="0"
                               Width="96"
                               Height="96"
                               VerticalAlignment="Center" />

                        <TextBlock Text="{Binding Path=Name}" Grid.Column="1" />

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

Ideally, I'd like to animate the icons first column to slide from Width="0" to Width="Auto". I looked into Visual States, but was unsure how to use them.

For testing purposes, I am now trying to just bind the first column's visibility to some property indicating if we are in editing mode or not.

I could set Width of the first column from code-behind, but I'm not sure how to do that.

I tried setting Visibility on ColumnDefinition, but it complained that no such element exists.

I could set Visibility on each Image. Ideally, I'd like to bind it to a property in the code-behind instead of a property on each item in the list box. I tried this, but was unable to get it to work:

Code behind:

public bool Editing { get; set; }

XAML:

                    <Image Source="{Binding Path=IconSource}"
                           Grid.Column="0"
                           Width="96"
                           Height="96"
                    开发者_开发问答       VerticalAlignment="Center"
                           Visibility="{Binding Path=Editing, Converter={StaticResource visibilityConverter}}" />

What else can I try? Am I doing something wrong? Ideally, I'd like to just use Visual States.

You are on the right track with using the visibilityConverter to bind the visibility property. Its kind of hard to say without seeing the rest of your code, but what it looks like you are trying to bind the Visibility of the image to an editing property on your page (in the code behind). However the data context within your item template will not be the page, but the list item itself (i.e. what ever you are binding the ItemSource to).

Your code is actually trying to bind to an Editing property on the list item. If this is what you want (i.e. to control editing on a per item basis) then just make sure that each object in the list has an Editing property (as opposed to one Editing property on the page itself).