Question

I’m building a Windows Phone 7 app in Silverlight.

I have a list of content in a ListBox. When the user presses a button, “Remove” icons should appear next to each item in the list. Ideally, the list items would slide over, and the icons would be animated in.

I’m not sure what the best way to go about doing this is. I’m unfamiliar with animation in Silverlight. One approach: make a data template for the ListBox that includes the icon and the actual content. If the user hits the button, toggle the visibility of the icon. Attach event handlers to the icon being tapped. (I’m not sure how to work animation into this.)

Or is there another way to make this work?

Update: Ok, I have a nice animation where the content slides out and back. However, I’d like to add an icon for each item in the list. How can I do this?

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

Also, right now this is hardcoded to be a specific control. How can I change it to be the pivotItem the user is currently viewing?

Answer 1

This is a “canonical” case for VisualStates – just create one state with the icon open and one with the icon closed, and switch between them. Animations between states can be done really easily. I’d recommend you to use Blend for WP7 (free) and check this video as a starting point:

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

Edit:

For part 2 of your question, simply add the icon to the ItemTemplate and make it slide from outside and/or grow (changing width/height) with the VS animation.

You should add the VisualStates to the item template in the ListBox; by doing that you’ll be able to reference the correct instance of the control and icon in the VS animation.