Help with image enlargement bringing to front

[packj23]

What I am trying to do is show a collection of small images. If you mouse over 1 on the small images it expands. Problem is - parts of the expanded image is behind the other small images. I am using wpf and xaml in visual studio 2010 and using storyboards to expand the image.

here is my code
<Window x:Class="Chairs.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="487" Width="1166">


<Grid>
<Grid HorizontalAlignment="Left" Margin="82,75,0,273" Name="LegGrid1" Width="120" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="29" />
<ColumnDefinition Width="28" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="272*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>


<Image Height="36" HorizontalAlignment="Right" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="24" Source="/GuestTracker;component/images/Folding_Chairs_Large.jpg" Margin="1,3,3,0" Grid.Column="1" >
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<!--<ScaleTransform ScaleX="1" ScaleY="1" />-->
<ScaleTransform CenterX="1" CenterY="1"></ScaleTransform>
</Image.RenderTransform>
</Image>
<Image Height="36" Name="image2" Stretch="Fill" Width="24" Source="/GuestTracker;component/images/Folding_Chairs_Large2.jpg" Grid.Column="2" Margin="1,3,3,0" VerticalAlignment="Top">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
<Image Height="38" HorizontalAlignment="Right" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="24" Grid.Column="3" Source="/GuestTracker;component/images/Folding_Chairs_Large3.jpg" Margin="0,1,4,0">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
<Image Height="38" HorizontalAlignment="Left" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="24" Grid.Column="4" Source="/GuestTracker;component/images/Folding_Chairs_Large4.jpg" Margin="4,1,0,0">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
<Image Grid.Column="2" Height="50" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="47" Source="/GuestTracker;component/images/Chair_Left_Try.gif" Grid.ColumnSpan="2" Margin="7,42,0,0" >
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>

</Grid>
</Grid>
</Window>

thanks for your time and help

[kumarkarthik327]

HI this is karthik,
I have the same problem, but in my case I am using rectangles instead of images. Did you solve this... if so can you please help me by suggesting what is the change u made... I used storyboard and mouse over and mouse leave events... while mouse the rectangle enlarges but a small right portion of the enlarged rectangle is going behind the next rectangle..

tanq for ur time and help

[kumarkarthik327]

HI this is karthik,
I have the same problem, but in my case I am using rectangles instead of images. Did you solve this... if so can you please help me by suggesting what is the change u made... I used storyboard and mouse over and mouse leave events... while mouse the rectangle enlarges but a small right portion of the enlarged rectangle is going behind the next rectangle..

tanq for ur time and help