WPF - Setting usercontrol width using triggers and mouseenter event

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

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?