Лучший способ сделать эту анимацию в Silverlight 4?

Question

Я создаю приложение для Windows Phone 7 в Silverlight.

У меня есть список содержимого в ListBox. Когда пользователь нажимает кнопку, рядом с каждым элементом в списке должны появиться значки «Удалить». В идеале элементы списка могли бы скользить, а значки анимироваться.

Я не уверен, что лучший способ сделать это. Я не знаком с анимацией в Silverlight. Один из подходов: создать шаблон данных для ListBox, включающий значок и фактическое содержимое. Если пользователь нажимает кнопку, переключите видимость значка. Прикрепите обработчики событий к иконке, которую вы нажимаете. (Я не уверен, как включить анимацию в это.)

Или есть другой способ заставить это работать?

Обновление : Ладно, у меня есть хорошая анимация, когда контент выкатывается и обратно. Тем не менее, я хотел бы добавить значок для каждого элемента в списке. Как я могу это сделать?

<VisualStateManager.CustomVisualStateManager>
            <ic:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="EditingStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:1"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Editing">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="60" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="pivotItem" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="NotEditing">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="pivotItem" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Кроме того, сейчас это жестко запрограммировано, чтобы быть определенным элементом управления. Как я могу изменить его на pivotItem, который просматривает пользователь?

Answer 1

Это «канонический» случай для VisualStates - просто создайте одно состояние с открытой иконкой и одно с закрытой иконкой и переключайтесь между ними. Анимации между состояниями могут быть сделаны очень легко. Я бы порекомендовал вам использовать Blend для WP7 (бесплатно) и проверить это видео в качестве отправной точки:

http://expression.microsoft.com/en-us/ee426922.aspx

Edit:

Для части 2 вашего вопроса просто добавьте значок к ItemTemplate и заставьте его скользить снаружи и / или расти (изменяя ширину / высоту) с помощью анимации VS.

Вы должны добавить VisualStates к шаблону элемента в ListBox; сделав это, вы сможете ссылаться на правильный экземпляр элемента управления и значка в анимации VS.

Answer 2

Используйте раскадровки в элементе управления списком, если у вас нет идеи, попробуйте использовать смесь выражений для Windows Phone 7, а затем просто добавьте ключевой кадр, как в Adobe Flash.