Add a flip animation (Source Code) to SelectedItem of listbox)

In this article, I will demonstrate how to use Expression Blend to add a flip animation to the selected project in ListBox.

First, create a Windows Phone 7 Application project and add a ListBox and some ListBoxItems. The Code is as follows:

<ListBox Height="200"  VerticalAlignment="Top">
    <ListBoxItem Content="ListBoxItem1"/>
    <ListBoxItem Content="ListBoxItem2"/>
    <ListBoxItem Content="ListBoxItem3"/>
    <ListBoxItem Content="ListBoxItem4"/>
</ListBox>

Here, I have to thank the author who has always supported me for writing such an article with interest. I would like to thank the author again for a very good wp7 Development Forum, I will also post several high-quality articles to you later. Please contact me on the noodles.

Enter the subject:

 

Expression Blend

The next step is to open the project in Expression Blend. Our final goal is to add an animation flip effect to the selected ListBoxItem.

Create a sample ListBoxItem Style

The first thing we need to do is check the available VisualStates of the ListBoxItem control. To do this, select a project, right-click it, and select "Edit template"> "edit copy", just like on the following screen:

Available VisualStates

Now, you can create a custom display on ControlTemplate by adding/deleting items or adding a new animation to VisualStates. When switching between different States, you can also add some transition and gradient animation control. For more information about VisualStateManager, see the MSDN documentation.
In our example, the available status is:
1. SelectedUnfocused
2. Unselected
3. Selected

Modify the selected VisualState
We will modify the selected status. To do this, just press the left button on the selected status and a new window will appear: "Objecst and TimeLine"
NOTE: If for some reason you do not see the "Objecst and TimeLine" window, go to the blend menu and select Window> Objecst and TimeLine.
We will add an animation Key Point

Next, we will add a flip animation.

Understanding Transforms
For example, we want to have a flip effect around the X axis.
Before starting the animation, let's first provide some knowledge about the element painting methods in Silverlight.
You can use two-dimensional (2D) transformations such as rotation, scaling, skew, and movement to process elements.
Silverlight provides the following common 2-D transformation operations:
RotateTransform-rotate the element at the specified angle.
ScaleTransform-stretch elements with the specified ScaleX and ScaleY.
SkewTransform-skewed transformation.
TranslateTransform movable (conversion)
You can use the 3-D effect, that is, use the so-called "Perspective Transforms" to give any UIElement.
The PlaneProjection class is used to create an object's angle Transformation (3-D effect ).
Note: Perspective conversion is not a complete 3-D engine, but they can be used to make 3d effects.
The following illustration demonstrates the effect of using these attributes.

Flip Animation
Next, go to the "properties" window and select the transform part. Here is where we will add the flip effect.
Therefore, to have a flip effect around the X axis, you only need to change the rotation angle to 360 and confirm that CernerofRotationX and CenterOfRotationY are set to 0.5 (this is the default value, you don't need to change anything ). Finally, select the play button in the "Objecst and TimeLine" window to see the flip Animation:

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}"
                   BorderThickness="{TemplateBinding BorderThickness}"
                   Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                   VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#FF1BA1E2"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="ContentContainer">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                      Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                      Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentControl.Projection>
                            <PlaneProjection/>
                        </ContentControl.Projection>
                    </ContentControl>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The style created for ItemContainerStyle in ListBox is as follows:

<ListBox x:Name="list" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" FontSize="40">
</ListBox>

this.list.ItemsSource = new List<string> { "ListItem1", "ListItem2", "ListItem3", "ListItem4" };

I hope these articles will help you. Complete source code can be found here:

Click here for the source code