We Keep Coding

WPF Storyboard with TranslateTransform

I have a Storyboard such as
<Storyboard x:Key="NewsFlow">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="TextBlock"
RepeatBehavior="Forever" AutoReverse="True">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-80"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="80"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
And Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="100" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="BlanchedAlmond"></Border>
<TextBlock Grid.Row="1" Text="News" FontSize="40" HorizontalAlignment="Center" ></TextBlock>
</Grid>
Grid.Row="1" is News Viewing zone (yellow line)
But Storyboard ignored Grid.RowDefinitions like picture
I want to like this
If you create a Storyboard should work like this:
<Storyboard x:Key="NewsFlow">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
Storyboard.TargetName="TextBlock"
RepeatBehavior="Forever" AutoReverse="True">
<EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,150"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:2" Value="0, 150,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
But Margin lagged behind TranslateTransform. And Textblock The other side is broken during the animation is played
Thank you, regards

<Window.Resources>
<Storyboard x:Key="NewsFlow">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height"
Storyboard.TargetName="News"
RepeatBehavior="Forever" AutoReverse="True">
<EasingDoubleKeyFrame KeyTime="0:0:00" Value="-80"/>
<EasingDoubleKeyFrame KeyTime="0:0:02" Value="80"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="BlanchedAlmond"/>
<TextBlock Grid.Row="1" x:Name="News" Text="News" FontSize="40" HorizontalAlignment="Center">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource NewsFlow}"/>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>

Animate control based on other control

I am creating a media player application and I am trying to animate hiding the controls when the mouse is not inside the program window.
I have a animation setup and working, but I can't think of how to set the EventTrigger to the parent grid rather than the grid I actually want to animate. Essentially I want to set the EventTrigger to be grdMain and animate the height of grdControls.
Animation:
<Window.Resources>
<Style x:Key="FadeInOut" TargetType="Grid">
<Style.Triggers>
<EventTrigger RoutedEvent="Control.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="40" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Grids:
<Grid x:Name="grdMain" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<MediaElement x:Name="meVideo" IsMuted="True" Stretch="Uniform" MediaOpened="meVideo_MediaOpened" MediaEnded="meVideo_MediaEnded" Grid.RowSpan="2" />
<Grid Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ProgressBar x:Name="pgbVideoTimeline" HorizontalAlignment="Stretch" Height="7" Background="#252525" Foreground="Maroon" BorderThickness="0" Grid.Row="1" MouseDown="pgbVideoTimeline_MouseDown" MouseMove="pgbVideoTimeline_MouseMove" MouseUp="pgbVideoTimeline_MouseUp" />
<Grid x:Name="grdControls" Grid.Row="2" Background="#0C0D0D" Height="0" Style="{StaticResource FadeInOut}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stpPlaybackControls" Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="0">
<Image x:Name="btnPlayPause" Height="30" Margin="10,0,5,0" ToolTip="Play" Source="Resources/Images/UI/Play.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnPlayPause_MouseUp" />
<Image x:Name="btnReplay" Height="20" Margin="5,0,5,0" ToolTip="Replay" Source="Resources/Images/UI/Replay.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnReplay_MouseUp" />
</StackPanel>
<StackPanel x:Name="stpMiscControls" Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1">
<Image x:Name="btnFullScreen" Height="25" Margin="5" ToolTip="Fullscreen" Source="Resources/Images/UI/FullScreen.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnFullScreen_MouseUp" />
<Image x:Name="btnSettings" Height="30" Margin="5,5,10,5" ToolTip="Settings" Source="Resources/Images/UI/Settings.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" />
</StackPanel>
</Grid>
</Grid>
</Grid>

The rule when using Trigger (in case TargetName can't be used) is the Trigger should belong to the element which has the properties you want to modify. In this case the Trigger should belong to the grdControls. However you can use DataTrigger to walk up the tree and listen to some other property change of any visual upwards in the tree. The following code should work:
<Style x:Key="FadeInOut" TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=grdMain}"
Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="40"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="0"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
The second approach close to what Peter Dunno suggested in his comment requires you to have to set the EventTrigger directly in the Triggers property of the main Grid. You can either set the Storyboards directly or define them as Resource. Here is the code for that approach:
<Grid x:Name="grdMain" Background="Black">
<Grid.Triggers>
<EventTrigger RoutedEvent="Control.MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="grdControls">
<DoubleAnimation Duration="0:0:1" To="40"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseLeave">
<BeginStoryboard>
<Storyboard TargetName="grdControls">
<DoubleAnimation Duration="0:0:1" To="0"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<!-- remaining code -->
</Grid>
Note that the Style you define now is no longer needed.

How to rotate Grid background image in WPF?

I want to rotate Grid background image in WPF. I have animation code for image rotation. But when I implement in grid background, Image not accepted so Imagebrush only accepted.
<Grid.Background>
<ImageBrush ImageSource="../Images/1.jpg" Stretch="UniformToFill" TileMode="Tile"/>
</Grid.Background>
I can't implemented below animation code in WPF.
<Canvas ClipToBounds="True" >
<Image Source="/Images/1.jpg" Width="600" >
<Image.RenderTransform>
<RotateTransform x:Name="TransRotate" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="Angle">
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="40" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="-40" Duration="0:0:15" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
EDIT 1-
If I set the images as a content in grid, row 0 only show the image animation.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Canvas ClipToBounds="True" >
<Image Name="logo" Source="/Images/1.jpg" Width="800" >
<Image.RenderTransform>
<RotateTransform x:Name="TransRotate" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="Angle">
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="40" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="-40" Duration="0:0:15" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
<Border Grid.Row="0" Height="180" >
<Image Source="Images/01.jpg" Height="100" />
</Border>
<Border Grid.Row="1" Height="180">
<Image Source="Images/01.jpg" Height="100" />
</Border>
<Border Grid.Row="2" Height="180">
<Image Source="Images/01.jpg" Height="100" />
</Border>
</Grid>

You could rotate an ImageBrush like in the example below. You may also want to set the CenterX and CenterY properties of the RotateTransform.
<Grid>
<Grid.Background>
<ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
Stretch="UniformToFill">
<ImageBrush.Transform>
<RotateTransform/>
</ImageBrush.Transform>
</ImageBrush>
</Grid.Background>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Background.Transform.Angle"
By="40" Duration="0:0:10"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>

As you figured out, Grid.Background can only take a Brush. A solution will be to add the Image as a child to the Grid control:
<Grid>
<Image ... />
... grid child elements ...
<Grid>
You will need to keep the Image element as the first child of the grid so that it will appear as grid background, and take care of possible additional problems (like ZOrder of the child elements, number of Grid row / columns, etc), but you should be able to obtain the effect you want.

How to invoke Application.MainWindow Property

This property driving me nuts , i have a button in my wpf form,what am trying to achieve here is
When i click button, disable the main window and pop up the message box.
this the code behind
private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
if (sender is Button)
{
Application.Current.Dispatcher.Invoke(new Action(() =>
{
Application.Current.MainWindow.IsEnabled = false;
MessageBox.Show(Application.Current.MainWindow, "test");
}));
}
}
Initialize my main window
protected override void InitializeShell()
{
base.InitializeShell();
Application.Current.MainWindow = (Shell)this.Shell;
Application.Current.MainWindow.Show();
}
It throws exception "'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[1].(2)'."at "Application.Current.MainWindow.IsEnabled = false;" .
Here is the stack trace of few lines
at System.Windows.Media.Animation.Storyboard.VerifyPathIsAnimatable(PropertyPath path)
at System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive(Clock currentClock, DependencyObject containingObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary clockMappings, Int64 layer)
If i bypass then it display message box but am wondering why it throw exception at isEnable=false ?
Any help much appreciated.
Thanks in Advance
My shell.xaml
<Window x:Class="Webster.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:Webster.Client"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
xmlns:Controls="clr-namespace:Webster.Client.Controls"
xmlns:inf="clr-namespace:Webster.Client.Infrastructure;assembly=Webster.Client.Infrastructure"
Title="Webster - News Segmentation and Encoding" WindowStartupLocation="CenterScreen" WindowState="Normal"
Icon="/Webster.Client;component/Resources/film_clip64.png" SizeToContent="Manual" HorizontalAlignment="Center"
MinWidth="390" Loaded="Window_Loaded">
<!-- window -->
<Window.Background>
<ImageBrush ImageSource="Resources/background.png" Stretch="Fill"/>
</Window.Background>
<Window.Resources>
<DataTemplate DataType="{x:Type inf:ExtendedHeader}">
<StackPanel Orientation="Horizontal" ToolTip="{Binding Path=ToolTip}">
<Image Source="{Binding Path=IconUri}" Width="16" Height="16" />
<TextBlock Text="{Binding Path=Title}" />
</StackPanel>
</DataTemplate>
<Storyboard x:Key="InTransition">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Logo" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-72"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-157"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:01.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Logo" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-50"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-101"/>
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:02.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainToolbar" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainToolbar" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" KeySpline="0,0.495999991893768,0.504000008106232,1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource InTransition}"/>
</EventTrigger>
</Window.Triggers>
<!-- content grid -->
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Grid RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*" />
<RowDefinition Height="25"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="627*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- logo -->
<Canvas x:Name="Logo" Grid.ColumnSpan="3" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<TextBlock
Text=""
TextAlignment="Center"
TextWrapping="NoWrap"
Foreground="#FFC4CFD6"
FontSize="50"
Opacity="0.85"
Canvas.Left="9"
Canvas.Top="6"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Height="60"
Width="{Binding ElementName=Logo,Path=ActualWidth}"
FontWeight="Bold" />
</Canvas>
<!-- main bar -->
<ItemsControl x:Name="MainToolbar" cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainToolBarRegion}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,0,0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Grid.Column="1">
<ItemsControl.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ItemsControl.RenderTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Margin="10, 0, 10, 10">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!-- content -->
<Grid x:Name="ContentGrid" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Controls:AnimatedTabControlWebster
x:Name="StoryTab"
SelectedIndex="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource ShellTabItemStyle}"
Background="{StaticResource headerBarBG}"
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainRegion}"
AutomationProperties.AutomationId="PositionSummaryTab" IsEnabled="True">
</Controls:AnimatedTabControlWebster>
</Grid>
<!-- footer -->
<StackPanel
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Horizontal"
FlowDirection="RightToLeft"
Margin="0 0 10 0"
>
<Button Name="btnExit" Click="btnExit_Click">Exit</Button>
</StackPanel>
<StackPanel
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"
Orientation="Horizontal"
>
<ItemsControl
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainFooterRegion}"
/>
</StackPanel>
</Grid>
</Grid>

Windows 8 Animation in Xaml and C# to move object from one column to another?

I have made a user control to expand on click and there are 7 of them in a grid with columns. When i click on the last one it goes out of the screen. I want to animate that if it expands then it should move to grid.column 1 and then when it collapse it goes back to its own grid.
Code:
<Grid x:Name="GrdVwSearchResults" Grid.Row="2" Margin="120,70,0,0" >
<Grid.Resources>
<Storyboard x:Name="moveBackAnimation" >
<DoubleAnimation x:Name="moveBackDoubleAnimation" EnableDependentAnimation="True" Storyboard.TargetName="usrFlight5" Storyboard.TargetProperty="Col" From="4" To="1" Duration="0:0:0.5"/>
</Storyboard>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight2" Grid.Column="1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight3" Grid.Column="2" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight4" Grid.Column="3" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight5" Grid.Column="4" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight6" Grid.Column="5" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight7" Grid.Column="6" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
</Grid>

I'm not sure how you're using this, but here is an animation that would provide a "popup" look and feel to the object.
<Storyboard x:Name="PopupFlight">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="usrFlight7">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>7</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="usrFlight7">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="500"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="usrFlight7">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>10</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="usrFlight7">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>3</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>

If you want to animate changes of an element's row or column in a Grid, the best way is to use the VisualStateManager. You can enable FluidLayout to animate layout changes such as row, grid, etc. This can be done very easily in Expression Blend.
Here's a brief example of the XAML of a Grid with 6 columns with a button in the last column, which will animate to the first column when you click it. For more advanced state changes you probably want to change the state in code, but this is using a behavior to change the state in XAML:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
x:Class="TestingWPF.MainWindow"
Title="MainWindow"
Height="350"
Width="525">
<Grid x:Name="LayoutRoot">
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Default"/>
<VisualState x:Name="Expanded">
<Storyboard>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="button">
<EasingInt32KeyFrame KeyTime="0" Value="0"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="button" Content="Button" Grid.Column="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Expanded"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</Window>