1

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

PandaSharp
  • 642
  • 7
  • 24

0 Answers0