Flipping Items in Listbox

There are many posts which shows how to do the flip animation, here is mine. In the sample the flip animation is applied to the ListBoxItem in the Styles

I created custom Listbox and listboxitem to add a few properties to hold the datatemplates

public class ListBoxItemEx : ListBoxItem
{

public ListBoxItemEx()
{

}

public DataTemplate FrontContentTemplate
{
get { return (DataTemplate)GetValue(FrontContentTemplateProperty); }
set { SetValue(FrontContentTemplateProperty, value); }
}

// Using a DependencyProperty as the backing store for FrontContentTemplate. This enables animation, styling, binding, etc…
public static readonly DependencyProperty FrontContentTemplateProperty =
DependencyProperty.Register(“FrontContentTemplate”, typeof(DataTemplate), typeof(ListBoxItemEx), null);

public DataTemplate RearContentTemplate
{
get { return (DataTemplate)GetValue(RearContentTemplateProperty); }
set { SetValue(RearContentTemplateProperty, value); }
}

// Using a DependencyProperty as the backing store for RearContentTemplate. This enables animation, styling, binding, etc…
public static readonly DependencyProperty RearContentTemplateProperty =
DependencyProperty.Register(“RearContentTemplate”, typeof(DataTemplate), typeof(ListBoxItemEx), null);

}

public class MyListBox : ListBox
{
public DataTemplate RearItemTemplate
{
get { return (DataTemplate)GetValue(RearItemTemplateProperty); }
set { SetValue(RearItemTemplateProperty, value); }
}

// Using a DependencyProperty as the backing store for RearItemTemplate. This enables animation, styling, binding, etc…
public static readonly DependencyProperty RearItemTemplateProperty =
DependencyProperty.Register(“RearItemTemplate”, typeof(DataTemplate), typeof(MyListBox), null);

protected override DependencyObject GetContainerForItemOverride()
{
ListBoxItemEx lbi = new ListBoxItemEx();
lbi.FrontContentTemplate = ItemTemplate;
lbi.RearContentTemplate = RearItemTemplate;
return lbi;
}
}

The ListBox is defined in XAML like this

<local:MyListBox Margin=”20″ ItemContainerStyle=”{StaticResource listBoxItemStyle}” x:Name=”list1″ RearItemTemplate=”{StaticResource dt2}” ItemTemplate=”{StaticResource dt1}”/>ItemTemplate – one that gets displayed when the item is not selected(FrontContentTemplate of the ListBoxItem is mapped to this)

The style of the ListboxItem will now include 2 contentpresenters one for holding the frontcontent and one for the rearcontent
RearItemTemplate – one that gets displyed when the item is selected

<ContentPresenter x:Name=”rearContentPresenter” Content=”{TemplateBinding Content}”  ContentTemplate=”{TemplateBinding RearContentTemplate}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}”  >
                                <ContentPresenter.Projection>
                                    <PlaneProjection x:Name=”rearContentProjection” RotationX=”-180″ CenterOfRotationX=”.5″></PlaneProjection>
                                </ContentPresenter.Projection>
                            </ContentPresenter>
                            <ContentPresenter x:Name=”frontContentPresenter” Content=”{TemplateBinding Content}”  ContentTemplate=”{TemplateBinding FrontContentTemplate}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}”  >
                                <ContentPresenter.Projection>
                                    <PlaneProjection x:Name=”frontContentProjection”  CenterOfRotationX=”.5″></PlaneProjection>
                                </ContentPresenter.Projection>
                            </ContentPresenter>

All the Animations will happen when the ListBoxItem is selected or unselected in the style

<vsm:VisualStateGroup x:Name=”SelectionStates” >
                                    <vsm:VisualState x:Name=”Unselected” >
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”rearContentPresenter” Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name=”Selected”>
                                        <Storyboard>
                                            <!–<DoubleAnimation Storyboard.TargetName=”fillColor2″ Storyboard.TargetProperty=”Opacity” Duration=”0″ To=”.75″ />–>
                                            <DoubleAnimation Storyboard.TargetName=”frontContentProjection” Storyboard.TargetProperty=”RotationX” Duration=”0:0:1″ To=”180″ />
                                         
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”rearContentPresenter” BeginTime=”0:0:.5″ Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”frontContentPresenter” BeginTime=”0:0:.5″ Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Storyboard.TargetName=”rearContentProjection” Storyboard.TargetProperty=”RotationX” Duration=”0:0:1″ To=”0″ />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>

you can see a demo here and download the code here

Advertisements

2 thoughts on “Flipping Items in Listbox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s