Gallery like WP system gallery with pinchtozoom - gallery

Question

I'm trying to reproduce a gallery like the system gallery, but i have a problem with pinch to zoom, the container doesn't enlarge and the picturs overlays, I tried to use with listbox:
<ListBox x:Name="pictureListBox" Margin="10,10,10,0" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Visible" VerticalAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="3">
<StackPanel>
<Image x:Name="Image" Source="{Binding Source}" Width="400" Stretch="Uniform" Canvas.ZIndex="1">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" DragDelta="OnDragDelta" />
</toolkit:GestureService.GestureListener>
</Image>
</StackPanel>
<!--<Image Source="/Images/gallery_loading.jpg" Width="150" Height="150" Stretch="Uniform"/>-->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and with panorama:
<phone:Panorama x:Name="panorama" Margin="0,0,0,0" ItemsSource="{Binding}" Width="550">
<phone:Panorama.HeaderTemplate>
<DataTemplate>
<TextBlock Text=""/>
</DataTemplate>
</phone:Panorama.HeaderTemplate>
<phone:Panorama.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Source}" Margin="5">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" DragDelta="OnDragDelta" />
</toolkit:GestureService.GestureListener>
</Image>
</DataTemplate>
</phone:Panorama.ItemTemplate>
</phone:Panorama>
here is the c# code:
Image image = null;
CompositeTransform transform = null;
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
image = sender as Image;
transform = image.RenderTransform as CompositeTransform;
//initialAngle = transform.Rotation;
initialScale = transform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
//transform.Rotation = initialAngle + e.TotalAngleDelta;
transform.ScaleX = initialScale * e.DistanceRatio;
transform.ScaleY = initialScale * e.DistanceRatio;
}
Thanks all