Click here to Skip to main content
15,889,403 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
XAML
<FlipView
            x:Name="flipView"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.RowSpan="2"
           
            >
               
                    <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin" Value="120,0,0,0"/>
                </Style>
            </FlipView.ItemContainerStyle>
 
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid DoubleTapped="LayoutRoot_DoubleTapped" PointerWheelChanged="LayoutRoot_PointerWheelChanged">
                    <Image x:Name="image" Source="{Binding Image}" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5" ManipulationDelta="Photo_ManipulationDelta" ManipulationMode="All">
                            <Image.RenderTransform>
                                <CompositeTransform ScaleX="{Binding Path=ScaleX,Mode=OneWay}" ScaleY="{Binding Path=ScaleY,Mode=OneWay}" TranslateX="{Binding Path=TranslateX,Mode=OneWay}" TranslateY="{Binding Path=TranslateY,Mode=OneWay}"></CompositeTransform>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>


C#
using AmazingPlaces.Data;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;



namespace AmazingPlaces
{
    /// <summary>
    /// A page that displays details for a single item within a group while allowing gestures to
    /// flip through other items belonging to the same group.
    /// </summary>
    public sealed partial class RelatedImages : AmazingPlaces.Common.LayoutAwarePage
    {
        PhotoTransform pt= new PhotoTransform("0.5", "0.5");
        public RelatedImages()
        {
            this.InitializeComponent();
            this.DataContext = pt;
            
        }

        /// <summary>
        /// Populates the page with content passed during navigation.  Any saved state is also
        /// provided when recreating a page from a prior session.
        /// </summary>
        /// <param name="navigationParameter">The parameter value passed to
        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
        /// </param>
        /// <param name="pageState">A dictionary of state preserved by this page during an earlier
        /// session.  This will be null the first time a page is visited.</param>
        protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {
            // Allow saved page state to override the initial item to display
            if (pageState != null && pageState.ContainsKey("SelectedItem"))
            {
                navigationParameter = pageState["SelectedItem"];
            }

            var item = (SampleDataItem)navigationParameter;

            this.gridView.ItemsSource = item.RelatedImages;
            this.snappedFlipView.ItemsSource = item.RelatedImages;

           
          
        }

        /// <summary>
        /// Preserves state associated with this page in case the application is suspended or the
        /// page is discarded from the navigation cache.  Values must conform to the serialization
        /// requirements of <see cref="SuspensionManager.SessionState"/>.
        /// </summary>
        /// <param name="pageState">An empty dictionary to be populated with serializable state.</param>
        protected override void SaveState(Dictionary<String, Object> pageState)
        {
            var selectedItem = this.gridView.SelectedItem;
            // TODO: Derive a serializable navigation parameter and assign it to pageState["SelectedItem"]
        }

        private void LayoutRoot_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
        {
            // Reset the CompositeTransform
           
            pt.TranslateX = pt.TranslateY = "0.0";
            pt.ScaleX = pt.ScaleY = "1.0";
        }


        private void Photo_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            double scalex = double.Parse(pt.ScaleX);
                double scaley = double.Parse(pt.ScaleY);
            double translatex=double.Parse(pt.TranslateX);
            double translatey=double.Parse(pt.TranslateY);

                // Translate the photo
                pt.TranslateX =(translatex+ e.Delta.Translation.X).ToString();
                pt.TranslateY =(translatey+ e.Delta.Translation.Y).ToString();

                // Scale the photo
                pt.ScaleX =(scalex* e.Delta.Scale).ToString();
                pt.ScaleY =(scaley* e.Delta.Scale).ToString();

                // Constrain scale factor
               

                pt.ScaleX = (Math.Min(scalex, 4.0)).ToString();
                pt.ScaleY = (Math.Min(scaley, 4.0)).ToString();
                pt.ScaleX = (Math.Max(scalex, 1.0)).ToString();
                pt.ScaleY = (Math.Max(scaley, 1.0)).ToString();
            
        }

        private void LayoutRoot_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
        {
                double scalex= double.Parse(pt.ScaleX);
                double scaley=double.Parse(pt.ScaleY);
                if (e.GetCurrentPoint(sender as UIElement).Properties.MouseWheelDelta > 0)
                {

                    // Zoom in
                    if (scalex < 4.0)
                    {
                       pt.ScaleX= (scalex +0.1).ToString();
                       pt.ScaleY= (scalex + 0.1).ToString();
                    }
                     
                     
                }
                else
                {
                    // Zoom out
                    if (scaley > 1.0)
                    {
                        pt.ScaleX = (scalex - 0.1).ToString();
                        pt.ScaleY = (scalex - 0.1).ToString();
                        
                    }
                    
                }
          
        }     
       
       
    }

    public class PhotoTransform : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public PhotoTransform(string scaleX, string scaleY)
        {
            this._scaleX = scaleX;
            this._scaleY = scaleY;
            this._translateX = "0.0";
            this._translateY = "0.0";
            
        }

        public PhotoTransform()
        { }
        private string _scaleX, _scaleY, _translateX, _translateY;

        public string TranslateY
        {
            get { return _translateY; }
            set { _translateY = value; OnPropertyChanged("TranslateY"); }
        }

        public string TranslateX
        {
            get { return _translateX; }
            set { _translateX = value; OnPropertyChanged("TranslateX"); }
        }

        public string ScaleY
        {
            get { return _scaleY; }
            set { _scaleY = value; OnPropertyChanged("ScaleY"); }
        }

        public string ScaleX
        {
            get { return _scaleX; }
            set { _scaleX = value; OnPropertyChanged("ScaleX"); }
        }

        private void OnPropertyChanged(string propName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propName));
            }
        }
    }
   
}



I am binding the ScaleX,ScaleY,TransformX and TransformY values from code behind by creating a class contains properties with same name , with the help of pointerwheelchanged event iam doing zoomin and zoom out but the zooming isnt working, but it is working without flipview.... plz any one help me how to do pinch and zoom on image when present inside a flipview. 
Posted
Updated 24-Aug-13 6:43am
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900