Silverlight Form Flip Animation

In my recent project I had a datagrid and needed to have a search option where the user can do a basic search or an advanced search, so I thought about implementing this using a form flip animation. Basic search on one side and advanced search on the other. This saved me space and all i had to do is add a search button above the grid and upon click pop up the search form. Below is a screen shots of what this looks like.

When the user clicks the search icon on the first screen shot, it pops up the basic search form and upon clicking Advanced search the form flips and shows the advanced search form. Now, let's look at some code.

First I am going to add a stack panel for the search icon then right underneath that I am addding a popup control in mainpage.xaml.

<StackPanel Orientation="Horizontal">

<Button Height="23"  

HorizontalAlignment="Left"   

Name="btnLaunchSearch" VerticalAlignment="Top"  

Click="btnLaunchSearch_Click">

<Button.Content>

<Image Source="./images/search.jpg"   ToolTipService.ToolTip="Search" />

</Button.Content>

</Button>

</StackPanel>

<Popup x:Name="SearchFormPopup" VerticalOffset="100" HorizontalOffset="100">

</Popup>

Now, I am going to add a view for the search form. I created a folder called UserControls then added a Search.xaml user control. I put the styles in a separate file - used a resource dictionary.

<UserControl x:Class="DB.Silverlight.UserControls.Search"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="200" d:DesignWidth="500">

<UserControl.Resources>

<ResourceDictionary x:Key="SD">

<ResourceDictionary.MergedDictionaries >

<ResourceDictionary  Source="../Dictionaries/SearchDictionary.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary> 

<Storyboard x:Name="StartingPosition">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="FormBack"

Storyboard.TargetProperty="(UIElement.RenderTransform).TransformGroup.Children[3].(TranslateTransform.X)">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="5000" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Name="AdvancedSearch">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="PanelProjection"

Storyboard.TargetProperty="RotationY">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="0" />

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="90" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="FormFront"

Storyboard.TargetProperty="(UIElement.RenderTransform).TransformGroup.Children[3].(TranslateTransform.X)">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="0" />

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="0" />

<SplineDoubleKeyFrame KeyTime="00:00:01.01"

Value="5000" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="FormBack"

Storyboard.TargetProperty="(UIElement.RenderTransform).TransformGroup.Children[3].(TranslateTransform.X)">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="5000" />

<SplineDoubleKeyFrame KeyTime="00:00:00.99"

Value="5000" />

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="0" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="BackPanelProjection"

Storyboard.TargetProperty="RotationY">

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="270" />

<SplineDoubleKeyFrame KeyTime="00:00:02"

Value="360" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Name="BasicSearch">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="FormBack"

Storyboard.TargetProperty="(UIElement.RenderTransform).TransformGroup.Children[3].(TranslateTransform.X)">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="0" />

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="0" />

<SplineDoubleKeyFrame KeyTime="00:00:01.01"

Value="5000" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="BackPanelProjection"

Storyboard.TargetProperty="RotationY">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="0" />

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="-90" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="PanelProjection"

Storyboard.TargetProperty="RotationY">

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="-270" />

<SplineDoubleKeyFrame KeyTime="00:00:02"

Value="-360" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="FormFront"

Storyboard.TargetProperty="(UIElement.RenderTransform).TransformGroup.Children[3].(TranslateTransform.X)">

<SplineDoubleKeyFrame KeyTime="00:00:00"

Value="5000" />

<SplineDoubleKeyFrame KeyTime="00:00:00.99"

Value="5000" />

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="0" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</UserControl.Resources>

<Canvas>

<StackPanel x:Name="FormFront">

<StackPanel.RenderTransform>

<TransformGroup>

<ScaleTransform />

<SkewTransform />

<RotateTransform />

<TranslateTransform />

</TransformGroup>

</StackPanel.RenderTransform>

<StackPanel.Projection>

<PlaneProjection x:Name="PanelProjection"

RotationX="0"

RotationY="0"

RotationZ="0" />

</StackPanel.Projection>

<Border Name="mainBorder" Style="{StaticResource ModalDialogBorder}" > 

<Grid x:Name="LayoutRoot" Width="399" Margin="10,10,10,10">

<Grid.RowDefinitions>

<RowDefinition Height="70" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="1*" />

</Grid.ColumnDefinitions>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" >

<TextBlock Margin="20" Text="Note:Search by user's first name, last name, or by business name."></TextBlock>

</StackPanel>

<TextBox TabIndex="0" Name="txtSearch" Grid.Row="1" Height="30" Width="260" Margin="0,5,0,20"/>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="2" Margin="89,0,89,55">

<Button x:Name="SearchButton" Height="30" Width="100"  Content="Search"/>

<Button x:Name="CancelButton" Height="30" Width="100"  Content="Cancel"/>

</StackPanel>

<Button x:Name="Advanced"

Content="Advanced Search"

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

Width="Auto"

Background="DarkGreen"

FontFamily="Georgia"

FontSize="10"

Grid.Row="5"

Margin="10,0"

Grid.Column="0" />

</Grid>

</Border>

</StackPanel>

<StackPanel x:Name="FormBack">

<StackPanel.RenderTransform>

<TransformGroup>

<ScaleTransform />

<SkewTransform />

<RotateTransform />

<TranslateTransform />

</TransformGroup>

</StackPanel.RenderTransform>

<StackPanel.Projection>

<PlaneProjection x:Name="BackPanelProjection"

RotationX="0"

RotationY="0"

RotationZ="0" />

</StackPanel.Projection>

<Border Style="{StaticResource ModalDialogBorder}" >

<Grid x:Name="theForm" Width="399">

<Grid.RowDefinitions>

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="130" />

<ColumnDefinition Width="1*" />

</Grid.ColumnDefinitions>

<TextBlock Text="Placard Type"

Grid.Row="0"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<ComboBox  

Name="cbPlacardType"   

Grid.Row="0"

Grid.Column="1" 

Style="{StaticResource EntryDrop}" />

<TextBlock Text="Status"

Grid.Row="1"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<ComboBox  

Name="cbStatus"   

Grid.Row="1"

Grid.Column="1" 

Style="{StaticResource EntryDrop}" />

<TextBlock Text="Date Entered"

Grid.Row="2"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<TextBlock Text="From" Margin="8,0,231,0"

Grid.Row="2"

Grid.Column="1" Width="30" />  

<TextBox x:Name="txtFrom"

Grid.Row="2"

Grid.Column="1"

Width="80" Margin="37,0,162,0" />

<TextBlock Text="To" Width="30"

Grid.Row="2"

Grid.Column="1" Margin="116,0,123,0" />

<TextBox x:Name="txtTo"

Grid.Row="2"

Grid.Column="1"

Width="80" Margin="150,0,49,0" />

<TextBlock Text="Placard Id"

Grid.Row="3"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<TextBox x:Name="txtPlacardId"

Grid.Row="3"

Grid.Column="1"

Style="{StaticResource Entry}"  />

<TextBlock Text="Business Name"

Grid.Row="4"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<TextBox x:Name="txtBusinessName"

Grid.Row="4"

Grid.Column="1"

Style="{StaticResource Entry}" />

<TextBlock Text="Contact First Name"

Grid.Row="5"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<TextBox x:Name="txtContactFirstName"

Grid.Row="5"

Grid.Column="1"

Style="{StaticResource Entry}" />

<TextBlock Text="Contact Last Name"

Grid.Row="6"

Grid.Column="0"

Style="{StaticResource Prompt}" />

<TextBox x:Name="txtContactLastName"

Grid.Row="6"

Grid.Column="1"

Style="{StaticResource Entry}" />

<Button x:Name="btnAdvancedSearch"

Content=" Search "

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

Width="95"

Background="DarkGreen"

FontFamily="Georgia"

FontSize="12"

Grid.Row="7"

Margin="30,0,0,10" />

<Button x:Name="btnAdvancedSearchCancel"

Content=" Cancel "

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

Width="95"

Background="DarkGreen"

FontFamily="Georgia"

FontSize="12"

Grid.Row="7"

Margin="10,10"

Grid.Column="1" />

<Button x:Name="Basic"

Content="Switch to Basic Search"

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Width="112"

Background="DarkGreen"

FontFamily="Georgia"

FontSize="10"

Grid.Row="8"

Margin="0,0,12,5"

Grid.Column="1" />

</Grid>

</Border>

</StackPanel>

</Canvas>

</UserControl>

Now, in the code behind of the search form I added the mecanics to do the flip animation.

public partial class Search : UserControl

{

public Search()

{

InitializeComponent();

Loaded += new RoutedEventHandler(Search_Loaded);

Advanced.Click += new RoutedEventHandler(Advanced_Click);

Basic.Click += new RoutedEventHandler(Basic_Click);

}

void Search_Loaded(object sender, RoutedEventArgs e)

{

StartingPosition.Begin();

//TODO: Load comboboxes..

}

void Advanced_Click(object sender, RoutedEventArgs e)

{

AdvancedSearch.Begin();

}

void Basic_Click(object sender, RoutedEventArgs e)

{

BasicSearch.Begin();

}

}

All i have left now is the code to handle the search button in mainpage.xaml and it's pretty simple - i just have to new up an instance of the popup control that i created in mainpage and also new up an instance of the search form user control and ofcourse code to handle my data. Since my data code involves WCF and is a bit lengthy I am just gonna leave that up to you to add your own data handling here. Below is the code needed in mainpage.

private void btnLaunchSearch_Click(object sender, RoutedEventArgs e)

{

SearchFormPopup = new Popup();

form = new Search();

form.CancelButton.Click += new RoutedEventHandler(CancelButton_Click);

form.SearchButton.Click += new RoutedEventHandler(SearchButton_Click);

form.btnAdvancedSearchCancel.Click += new RoutedEventHandler(CancelButton_Click);

form.btnAdvancedSearch.Click += new RoutedEventHandler(AdvancedSearchButton_Click);

SearchFormPopup.Child = form;

SearchFormPopup.IsOpen = true;

}

private void AdvancedSearchButton_Click(object sender, RoutedEventArgs e)

{

LoadFilterdDataboardDataAdvancedSearch();

SearchFormPopup.IsOpen = false;

}

private void CancelButton_Click(object sender, RoutedEventArgs e)

{

SearchFormPopup.IsOpen = false;

}

private void SearchButton_Click(object sender, RoutedEventArgs e)

{

LoadFilteredDashBoardDataSearch();

SearchFormPopup.IsOpen = false;

}

And that's it. If you have any comments or better ways to do this, let me know.