<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>
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
{
public sealed partial class RelatedImages : AmazingPlaces.Common.LayoutAwarePage
{
PhotoTransform pt= new PhotoTransform("0.5", "0.5");
public RelatedImages()
{
this.InitializeComponent();
this.DataContext = pt;
}
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
if (pageState != null && pageState.ContainsKey("SelectedItem"))
{
navigationParameter = pageState["SelectedItem"];
}
var item = (SampleDataItem)navigationParameter;
this.gridView.ItemsSource = item.RelatedImages;
this.snappedFlipView.ItemsSource = item.RelatedImages;
}
protected override void SaveState(Dictionary<String, Object> pageState)
{
var selectedItem = this.gridView.SelectedItem;
}
private void LayoutRoot_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
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);
pt.TranslateX =(translatex+ e.Delta.Translation.X).ToString();
pt.TranslateY =(translatey+ e.Delta.Translation.Y).ToString();
pt.ScaleX =(scalex* e.Delta.Scale).ToString();
pt.ScaleY =(scaley* e.Delta.Scale).ToString();
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)
{
if (scalex < 4.0)
{
pt.ScaleX= (scalex +0.1).ToString();
pt.ScaleY= (scalex + 0.1).ToString();
}
}
else
{
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.