Animate Grid Width and Height when a TextBox is Clicked - xaml

Question

The following code successfully changes the width and height of a Grid when myTextBox is clicked. What I would like to be able to do is animate animate the transition when the TextBox is clicked.
How can I animate the following transition when myTextBox is clicked/InFocused?
<Grid HorizontalAlignment="Center" Margin="0,-180,0,0">
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Setter Property="Background" Value="White"/>
<Setter Property="Width" Value="350"/>
<Setter Property="Height" Value="150"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myTextBox, Path=IsFocused}" Value="True">
<Setter Property="Background" Value="#FFF7F7F7" />
<Setter Property="Width" Value="320" />
<Setter Property="Height" Value="120" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>

Answer 1

You can put a Storyboards under TextBox.Triggers, that should run when it GotFocus/LostFocus:
<!-- Your grid, width and height of which should be animated -->
<Grid x:Name="myGrid" HorizontalAlignment="Center" >
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Setter Property="Background" Value="White"/>
<Setter Property="Width" Value="350"/>
<Setter Property="Height" Value="150"/>
</Style>
</Grid.Style>
<!-- Your textbox (inside grid), that should trigger animation when Got/Lost focus -->
<TextBox x:Name="myTextBox">
<TextBox.Triggers>
<!-- When TextBox got focus -->
<EventTrigger RoutedEvent="TextBox.GotFocus">
<BeginStoryboard>
<Storyboard>
<!-- Animating width -->
<DoubleAnimation Storyboard.TargetName="myGrid"
Storyboard.TargetProperty="(Grid.Width)"
From="350" To="320" Duration="0:0:0.1">
</DoubleAnimation>
<!-- Animating height -->
<DoubleAnimation Storyboard.TargetName="myGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="150" To="120" Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- When TextBox lost focus -->
<EventTrigger RoutedEvent="TextBox.LostFocus">
<BeginStoryboard>
<Storyboard>
<!-- Animating width -->
<DoubleAnimation Storyboard.TargetName="myGrid"
Storyboard.TargetProperty="(Grid.Width)"
From="320" To="350" Duration="0:0:0.1">
</DoubleAnimation>
<!-- Animating height -->
<DoubleAnimation Storyboard.TargetName="myGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="120" To="150" Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBox.Triggers>
</TextBox>
</Grid>
TextBox may not be inside Grid, that you animate, I put inside just for example.
Example tested and works fine on me.