WPF ClipToBounds=False not working on ZoomIn for image

See more:

WPF

image

storyboard

Hi all,

I've got a UserControl as follows:

<UserControl.Resources>
    <Storyboard x:Key="expandStoryboard">
      <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
    To="2" Duration="0:0:0.2" />
      <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
    To="2" Duration="0:0:0.2" />
    </Storyboard>
    <!-- This storyboard will make the image revert to its original size -->
    <Storyboard x:Key="shrinkStoryboard">
      <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>
  </UserControl.Resources>
  <Border CornerRadius="15" BorderBrush="Black" BorderThickness="3" Background="Black" ClipToBounds="False">
    <Grid Background="Transparent" ClipToBounds="False">
      <Grid.RowDefinitions>
        <RowDefinition Height="1.2*"/>
        <RowDefinition />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Border Name="bdrImage" BorderBrush="White" BorderThickness="2" CornerRadius="15" Width="Auto" >
        <Image Name="iAppImage"
           Margin="3" MaxHeight="75" MaxWidth="75" />
      </Border>
      <dockpanel:DockPanelSplitter DockPanel.Dock="Left" Foreground="Black" Width="2" />
      <Border BorderBrush="White" BorderThickness="2" Grid.Column="1" CornerRadius="15" ClipToBounds="False">
        <Grid ClipToBounds="False">
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <TextBlock Name="tbAppDetails" Background="Transparent" Foreground="White" Height="auto" Margin="5"/>
          <GridSplitter Height="2" Grid.Row="1" ResizeDirection="Rows" Foreground="White" HorizontalAlignment="Stretch" />
          <ScrollViewer Name="svScreenshots" Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Auto"
                 ScrollViewer.HorizontalScrollBarVisibility="Auto" Background="Transparent"
                 Margin="2" ClipToBounds="False">
            <StackPanel Name="spScreenshots" Orientation="Horizontal" ClipToBounds="False" />
          </ScrollViewer>
        </Grid>
      </Border>
      <Border BorderBrush="White" BorderThickness="2" Grid.Row="1" Grid.ColumnSpan="2" CornerRadius="15">
        <TextBlock Name="tbAppDescription" Background="Transparent" Height="Auto" MinHeight="100" Foreground="White" Margin="15" />
      </Border>
    </Grid>
  </Border>

I then add a list of images to spScreenshots that are displayed fine. I attach a ZoomIn and ZoomOut event to each image that triggers the two storyboards. I can't see a way to prevent to images being clipped by their parent containers when I zoom in and enlarge them slightly.

Anyone know what I'm doing wrong?

foreach (string screenshot in app.Screenshots)
          {
            Image sShot = new Image();
            sShot.Width = 80;
            BitmapImage bmShot = new BitmapImage();
            bmShot.BeginInit();
            bmShot.UriSource = new Uri(screenshot);
            bmShot.EndInit();
            sShot.Source = bmShot;
            sShot.Margin = new Thickness(2);
            sShot.MouseEnter += new MouseEventHandler(ZoomIn);
            sShot.MouseLeave += new MouseEventHandler(ZoomOut);
            sShot.RenderTransform = new ScaleTransform(1, 1);
            sShot.SetValue(StackPanel.ZIndexProperty, 0);
            Screenshots.Children.Add(sShot);
            sShot = null;
          }
          break;
        }
      }
    }
    void ZoomIn(object sender, MouseEventArgs e)
    {
      Storyboard story = (Storyboard)FindResource("expandStoryboard");
      Image image = sender as Image;
      image.SetValue(StackPanel.ZIndexProperty, 2);
      image.ClipToBounds = false;
      image.BeginStoryboard(story);
    }
    void ZoomOut(object sender, MouseEventArgs e)
    {
      Storyboard story = (Storyboard)FindResource("shrinkStoryboard");
      Image image = sender as Image;
      image.BeginStoryboard(story);
      image.SetValue(StackPanel.ZIndexProperty, 0);
    }

Thanks again,
Jib