Animation Issue with size changing elements - xaml

Question

So...
I've got a listview containing several flag images 20 px apart(as spec'ed) . When the user selects a flag, the flag needs to 'get bigger by 2x' to show that it is selected . So I tried the following:
I edited the SelectedUnfocused state on the listview.
At first, I just created a scaletransform to zoom the flag. but the problem is that the zoom factor makes the flag overlap its neighbour. So I animated the width of the container to grow by a few pixels so that it can accomodate the size change, however this results in a jagger on quick selection changes.So I thought it is caused by the stackpanel inside the listview not being able to re-measure and layout the containers fast enough. I created a sizechanged event to invalidate and re-layout but no success. Any ideas on what I could try to force the itemspanel to continually re-measure during an animation?
A video of the behaviour
here
Note thata the size of the image grows and overlaps a neighbour. only after the animation finishes do they re-layout
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="OuterContainer">
<EasingDoubleKeyFrame KeyTime="0" Value="108"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="150"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="OuterContainer">
<EasingDoubleKeyFrame KeyTime="0" Value="100"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
(I know that it is not traditional metro design and such but I'm following a spec)