Rectangle Enlargement on mouse over...

Question

I am working on rectangle enlargement on mouse over and resize to the original shape on mouse leave... i have 4 rectangles placed side by side with a margin.. i used storyboards to create the enlarge... on mouse over the rectangle is enlarging and on mouse leave it is resizing to the original shape... but on enlarging some right portion of the rectangle 1 is behind the rectangle 2 which does not look good... so can any one please help me with this issue...

i ll be greatful...

storyboard for animation <Storyboard x:Name="StoryboardMenuItemOver"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="150"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="1" Springiness="2"/>

 </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="1" Springiness="2"/>

 </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="150"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="1" Springiness="2"/>

 </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="1" Springiness="2"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="3"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="1" Springiness="2"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FFFBF7F7"/> <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FFFBF7F7"/> </ColorAnimationUsingKeyFrames> </Storyboard>

used rectangles

 <Rectangle x:Name="rectangle"  Style="{StaticResource WidgetRectangleStyle}"
                   HorizontalAlignment="Center" VerticalAlignment="Center" 
                Fill="{Binding Backgroundgradient, ElementName=MenuWidget}" Stroke="Black" >


        </Rectangle>