Pictures slideshow with pinch zoom in WP8

问题

I am trying to make application with classic pictures view like in photo hub or any standard picture application on any mobile device. So far I began to use FlipView from Kinnara's toolkit fork and CompositeTransform for pinchzooming, but I don't understand how to align picture to the center of the screen (VerticalAlignment=Center seems to not working as a property of Image inside DataTemplate) and I don't understand how to make zoomed pictures not visible in background when viewing neighbor picture. Also, maybe there are some standard patterns for it that I missed?

UPD: Some Code

<toolkit:FlipView x:Name="FlipView"
                  d:DataContext="{d:DesignInstance viewModels:PostsViewModel}"
                  ItemsSource="{Binding Pictures}">
    <toolkit:FlipView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <ProgressBar Value="{Binding DownloadProgress}"
                             Maximum="100"
                             Minimum="1"
                             IsEnabled="{Binding IsLoading}" />
                <Image x:Name="PostImage"
                       Source="{Binding Sample}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Stretch="UniformToFill"
                       ManipulationDelta="Image_OnManipulationDelta">
                    <Image.RenderTransform>
                        <CompositeTransform />
                    </Image.RenderTransform>
                </Image>

            </StackPanel>
        </DataTemplate>
    </toolkit:FlipView.ItemTemplate>
</toolkit:FlipView>

UPD2: Pinchzooming code

    private void Image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        if (e.PinchManipulation != null)
        {
            var transform = (CompositeTransform)((Image) sender).RenderTransform;

            // Scale Manipulation
            transform.ScaleX = e.PinchManipulation.CumulativeScale;
            transform.ScaleY = e.PinchManipulation.CumulativeScale;

            // Translate manipulation
            var originalCenter = e.PinchManipulation.Original.Center;
            var newCenter = e.PinchManipulation.Current.Center;
            transform.TranslateX = newCenter.X - originalCenter.X;
            transform.TranslateY = newCenter.Y - originalCenter.Y;
            // end 
            e.Handled = true;
        }
    }

回答1:

If you want the more OS like look and feel ( like how images are shown in the pictures lib ), take a look at the nuget called Windows Phone Media Viewer ( https://www.nuget.org/packages/PhoneMediaViewer/ ).

There is even a sample app where it's been used up on MSDN ( http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b )

来源：https://stackoverflow.com/questions/23442856/pictures-slideshow-with-pinch-zoom-in-wp8

标签

xaml

windows-phone-8