Silverlight: Анимировать свойство шаблона данных / привязать к выделенному коду?

Question

Я создаю приложение для Windows Phone 7. Для этого я делаю ListBox, который имеет два режима: редактирование и отсутствие редактирования. Когда он находится в режиме редактирования, рядом с элементами отображаются значки + и -. Когда он находится в нормальных режимах, значки скрыты.

Я пытаюсь понять, как это сделать. Вот элемент управления:

 <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>

В идеале я бы хотел анимировать первый столбец значков, чтобы он скользил от Width="0" до Width="Auto". Я изучал визуальные состояния, но не знал, как их использовать.

В целях тестирования я сейчас пытаюсь просто привязать видимость первого столбца к некоторому свойству, указывающему, находимся ли мы в режиме редактирования или нет.

Я мог бы установить Width первого столбца из-за кода, но я не уверен, как это сделать.

Я попытался установить Visibility на ColumnDefinition, но пожаловался, что такого элемента не существует.

Я мог бы установить Visibility на каждый Image. В идеале я хотел бы связать его со свойством в выделенном фрагменте кода, а не со свойством каждого элемента в списке. Я попробовал это, но не смог заставить его работать:

Код позади:

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}}" />

Что еще я могу попробовать? Я делаю что-то неправильно? В идеале я хотел бы просто использовать визуальные состояния.

Answer 1

Вы находитесь на правильном пути, используя visibilityConverter для привязки свойства видимости. Трудно сказать, не видя остальной части вашего кода, но похоже, что вы пытаетесь связать видимость изображения со свойством редактирования на вашей странице (в коде позади). Однако контекст данных в вашем шаблоне элемента будет не страницей, а самим элементом списка (т.е. с чем бы вы ни связывали ItemSource).

Ваш код на самом деле пытается связать свойство Editing элемента списка. Если это именно то, что вам нужно (т. Е. Управлять редактированием для каждого элемента), то просто убедитесь, что каждый объект в списке имеет свойство Editing (в отличие от одного свойства Editing на самой странице).