Animating ListBox SelectedItem with flipping effect in WP7

published on: 12/1/2010 | Views: N/A | Tags: Animation UI

by WindowsPhoneGeek

In this article I will demonstrate how to add a simple flipping animation to the ListBox selected item using Expression Blend.

The final result should be:

 

To begin with lets first create a Windows Phone 7 application project , add a ListBox and some ListBoxItems. I will use the following code:

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

Expression Blend

The next step is to open the project in Expression Blend. Our final goal is to animate with flipping effect the selected ListBoxItem.

Create a sample ListBoxItem Style

The first thing we are going to do is to check the available VisualStates of the ListBoxItem control. To do this just select an item,press mouse right button and select "Edit Template" -> "Edit a Copy" option as shown in the next screen shot:

After that Expression Blend generates a sample style for the ListBoxitem.

Available VisualStates

Now you can fully customize its appearance by adding /removing items from the ControlTemplate or adding new animations in the VisualStates. You can also add some transitions and easing functions in order to animate the control when switching between different states. For more information about the VisualStateManager you can take a look at the MSDN documentation. To see the available VisualStates for the edited item go to the "States" tab as shows in the screen shot on the left.

Note: If for some reason you do not see "States" window then go to the Blend menu and select:

Window -> States.

In our case we are interested in Selection States group. As you can see the available states in this group are :

  1.SelectedUnfocused

  2.Unselected

  3.Selected

 

 

 

Modify the Selected VisualState

We will modify the Selected state. To do this just press the mouse left button over the Selected state and a new window will appear: "Objecst and TimeLine"

Note: If for some reason you do not see "Objecst and TimeLine" window then go to the Blend menu and select: Window -> Objecst and TimeLine.

We will add a record key point to the ContentContainer  element after the first second of the animation

        

Next we will add the flipping animation.

Understand Transforms

Lets say that we want a flipping effect around the X axis.

Before we begin with the animation lets first give some more information about  the way an element is drawn in Silverlight.(basically  Transforms determine the way an element is drawn.).

You can use the two-dimensional (2-D) Transform classes to rotate, scale, skew, and move (translate) objects.Silverlight provides the following 2-D Transform classes for common transformation operations:

• RotateTransform - Rotates an element by the specified Angle.
• ScaleTransform - Scales an element by the specified ScaleX and ScaleY amounts.
• SkewTransform - Skews an element by the specified AngleX and AngleY amounts.
• TranslateTransform - Moves (translates) an element by the specified X and Y amounts.

You can apply 3-D effects to any UIElement  using the so called "Perspective Transforms".The PlaneProjection class is used to create a perspective transform (a 3-D effect) on an object. It defines how the transform is rendered in space.

Every UIElement has a Projection property which gets or sets the perspective projection (3-D effect) to apply when rendering.

Note:Perspective transforms are not equivalent to a 3-D engine; however, they can be used to make 2-D Silverlight content appear as if it is drawn on a 3-D plane.

The following illustration demonstrates the usage of these properties separately.

RotateX = -45                 RotateY = -45                    RotateZ = 15

You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center; however, if you move the center of rotation to the outer edge of the object, it will rotate around that edge. The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0.

In addition, you can position these rotated objects in space relative to one another by using the following properties:

• LocalOffsets - the LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated.
• Global Offset - the GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen.

Flipping Animation

Next go to the Properties window and select Transform section. Here is the place where we will add the flipping effect.

So in order to have a  flipping effect around the X axis all you need t o do is just to change the rotation angel to 360 and make sure that CernerofRotationX and CenterofRotationY are set to 0.5 (this is the default value you do not need to change anything).  Finally you can see the flipping animation by selecting play button in the "Objecst and TimeLine" window:

 

 

 

 

 

 

 

The newly generated style looks like:

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

Now we have two options either to set the newly created style using the Style property of a particular ListBoxItem (this is the case when we have declarative scenario) or to use ItemContainerStyle property of the ListBox (this is the case when we have databinding.)

Applying style using the ListBoxItem Style property

The code for applying the newly created style to a ListBoxItem is as follows:

<ListBox Height="178" Margin="111,75,84,0" VerticalAlignment="Top">
    <ListBoxItem Content="ListBoxItem1" Style="{StaticResource ListBoxItemStyle1}"/>
    <ListBoxItem Content="ListBoxItem2"/>
    <ListBoxItem Content="ListBoxItem3"/>
    <ListBoxItem Content="ListBoxItem4"/>
</ListBox>

Note that you can optionally apply the stile to an item. In the given example only the first item will have the animation when selected.

Applying style using the ListBox ItemContainerStyle property

The code for applying the newly created style to a ListBox ItemContainerStyle is as follows:

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

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

That was all about how to add flipping animation to the ListBox that animate the selected item.

I hope that the article was helpful. The full source code is available here:

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Animating ListBox SelectedItem with flipping effect in WP7'

Title Your Name

Comment