WPF - Setting usercontrol width using triggers and mouseenter event - wpf

Question

I have a wrap panel full of usercontrols. When I hover the mouse over a usercontrol I want it to expand to show more details.
Some stripped down sample code:
<UserControl x:Class="WPFTestBed.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<Setter TargetName="WPFTestBed.UserControl1" Property="Control.Width" Value="200"/>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
<Grid Height="95" Width="123">
<Button Height="23" HorizontalAlignment="Left" Margin="17,30,0,0" Name="button1" VerticalAlignment="Top" Width="75">Button</Button>
</Grid>
</UserControl>
I would appreciate it if someone could point out where I'm going wrong, and set me down the correct path.
Ideally, I want the usercontrol to delay for x seconds when there is a mouseover, before expanding and showing the extra details.

Answer 1

Here is a solution (tested):
Keep in mind that you have to set a Width manually on the UserControl for this to work.
Then add this to your UserControl's body:
<UserControl.Style>
<Style>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="0:0:4.0" Storyboard.TargetProperty="Width">
<DoubleAnimation To="200" Duration="0:0:1.0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
It will start after 4 seconds, then animate the width from its current value to 200, over 1 second.

Answer 2

I've managed to get a bit further with what I want:
<UserControl x:Class="WPFTestBed.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="200" Width="170">
<UserControl.Resources>
<Storyboard x:Key="ExpandDisplay">
<DoubleAnimation Storyboard.TargetProperty="(UserControl.Width)"
From="200" To="380" Duration="0:0:0.25" AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetProperty="(Border.Width)"
Storyboard.TargetName="mainBorder"
From="190" To="370" Duration="0:0:0.25" AutoReverse="False"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CollapseDisplay">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(UserControl.Width)"
From="380" To="200" Duration="0:0:0.25" AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetProperty="(Border.Width)"
Storyboard.TargetName="mainBorder"
From="370" To="190" Duration="0:0:0.25" AutoReverse="False"/>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseDown">
<BeginStoryboard Storyboard="{StaticResource ExpandDisplay}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="button2">
<BeginStoryboard Storyboard="{StaticResource CollapseDisplay}"/>
</EventTrigger>
</UserControl.Triggers>
<Border Name="mainBorder" Height="190" Width="160" Background="Black" CornerRadius="20,20,20,20">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="10" Opacity=".5"
Softness="9"/>
</Border.BitmapEffect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Height="23" Width="75" VerticalAlignment="Center" HorizontalAlignment="Center" Name="button1" >Details</Button>
<Button Grid.Row="1" Height="23" Width="23" VerticalAlignment="Center" HorizontalAlignment="Center" Name="button2" Visibility="Collapsed">-</Button>
</Grid>
</Border>
</UserControl>
This expands the usercontrol when I click, rather than mouseover, as I couldn't find a satisfactory way to wait for a second before beginning. I could delay the start and cancel on a mouseleave but this also cancelled the expand whenever the mouseleave was called.
I have a button to collapse the usercontrol, but I would prefer to switch which storyboard the usercontrol onclick event calls, can this be done?