Vista - RoutedEvent Problems

I have written the following code which I grows and shrinks a button when a
mouse moves over them.

However, both buttons seem to grow when the Mouse is over one of them. I
ideally want only one button to expand at a time. Can someone shed some
light on what needs to be changed.

Thanks


<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="100" To="120" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="30" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="120" To="100" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="40" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="100" To="120" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="30" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="120" To="100" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="40" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

</StackPanel.Triggers>
<Button Height="30" Margin="50,50,50,50" Name="btnNew" Width="100"
ToolTip="Click here to create a new record">New</Button>
<Button Height="30" Margin="50,50,50,50" Name="btnSave"
Width="100">Save</Button>
<Button Height="30" Margin="50,50,50,50" Name="btnDelete"
Width="100">Delete</Button>

You'll probably laugh:

You weren't setting the SourceName for the RoutedEvent for any of the
Triggers. So, when the Mouse.MouseEnter RoutedEvent event happened over the
StackPanel, all corresponding MouseEnter's storyboards started (which
included both of your animated buttons). So, they were always animating
together.

--Aaron
http://www.wiredprairie.us


<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btnNew">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="100" To="120" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btnNew">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="30" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="btnNew">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="120" To="100" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="btnNew">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnNew"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="40" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btnSave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="100" To="120" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btnSave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="30" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="btnSave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Width">
<DoubleAnimation Duration="00:00:01" From="120" To="100" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="btnSave">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSave"
Storyboard.TargetProperty="Height">
<DoubleAnimation Duration="00:00:01" From="40" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

</StackPanel.Triggers>
<Button Height="30" Name="btnNew" Width="100" ToolTip="Click here to
create a new record">New</Button>
<Button Height="30" Name="btnSave" Width="100">Save</Button>
<Button Height="30" Name="btnDelete" Width="100">Delete</Button>
</StackPanel>

"MarkS" <MarkS@discussions.microsoft.com> wrote in message
news667A3D6-EF80-451F-A644-34242BA6DBDB@microsoft.com...
>I have written the following code which I grows and shrinks a button when a
> mouse moves over them.
>
> However, both buttons seem to grow when the Mouse is over one of them. I
> ideally want only one button to expand at a time. Can someone shed some
> light on what needs to be changed.
>
> Thanks
>
>
> <EventTrigger RoutedEvent="Mouse.MouseEnter">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnNew"
> Storyboard.TargetProperty="Width">
> <DoubleAnimation Duration="00:00:01" From="100" To="120" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseEnter">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnNew"
> Storyboard.TargetProperty="Height">
> <DoubleAnimation Duration="00:00:01" From="30" To="40" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseLeave">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnNew"
> Storyboard.TargetProperty="Width">
> <DoubleAnimation Duration="00:00:01" From="120" To="100" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseLeave">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnNew"
> Storyboard.TargetProperty="Height">
> <DoubleAnimation Duration="00:00:01" From="40" To="30" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseEnter">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnSave"
> Storyboard.TargetProperty="Width">
> <DoubleAnimation Duration="00:00:01" From="100" To="120" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseEnter">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnSave"
> Storyboard.TargetProperty="Height">
> <DoubleAnimation Duration="00:00:01" From="30" To="40" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseLeave">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnSave"
> Storyboard.TargetProperty="Width">
> <DoubleAnimation Duration="00:00:01" From="120" To="100" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> <EventTrigger RoutedEvent="Mouse.MouseLeave">
> <BeginStoryboard>
> <Storyboard Storyboard.TargetName="btnSave"
> Storyboard.TargetProperty="Height">
> <DoubleAnimation Duration="00:00:01" From="40" To="30" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
>
> </StackPanel.Triggers>
> <Button Height="30" Margin="50,50,50,50" Name="btnNew" Width="100"
> ToolTip="Click here to create a new record">New</Button>
> <Button Height="30" Margin="50,50,50,50" Name="btnSave"
> Width="100">Save</Button>
> <Button Height="30" Margin="50,50,50,50" Name="btnDelete"
> Width="100">Delete</Button>
>