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
As there is no support for multibinding, I inherited DataPager added few properties and was able to get it to work. you should be able to change the number of rows displayed by changing the value in the TextBox next to “Show Rows:”. 