I'm going to finish a application but I have a problem about scroll selection. I has zoom in and out that's ok.I has asked so many question but no one are not reply.Help me about scroll... This picture is zooming in:
<ListView Name="lst_intro">
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding link}"
Stretch="Uniform"
RenderTransformOrigin="0.5,0.5"
ManipulationDelta="img_intro_ManipulationDelta"
ManipulationMode="Scale">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < mincale) ct.ScaleX = mincale;
if (ct.ScaleY < mincale) ct.ScaleY = mincale;
ScaleTransform scale=new ScaleTransform();
}
You set ManipulationMode="Scale", meaning you cannot drag it left/right/down/up - that is call a translation, set it as ManipulationMode="Scale,TranslateX,TranslateY".
In the event handler, similar to what you did for the Scale transform, you do a Translate transform.
private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
if (ct == null) return;
//Scale transform
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < mincale) ct.ScaleX = mincale;
if (ct.ScaleY < mincale) ct.ScaleY = mincale;
//Translate transform
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
//Confine boundary
BringIntoBounds();
}
After the transformation, brings the image back if it is out of the boundary. You can detect if the image is out of boundary by comparing the values of TranslateX/TranslateY and the width/height of the boundary. The boundary is the parent of the image (it is a Grid?), you need to debug the code to determine the boundary for TranslateX and TranslateY.
public void BringIntoBounds()
{
CompositeTransform ct = img.RenderTransform as CompositeTransform;
if (ct == null) return;
//out of screen, left edge
if (ct.TranslateX < 10 - img.ActualWidth * ct.ScaleX)
{
ct.TranslateX = 10 - img.ActualWidth * ct.ScaleX;
}
//out of screen, right edge
if (ct.TranslateX > Container.ActualWidth - 10 )
{
ct.TranslateX = Container.ActualWidth - 10;
}
...do the same for Y.
}
kennyzx gave a very good answer but the part where you test if the image is out of boundaries isn't working for me... that's my solution:
private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
ct.ScaleX = Math.Min(4, Math.Max(1, ct.ScaleX));
ct.ScaleY = Math.Min(4, Math.Max(1, ct.ScaleY));
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
var translateY = (img.ActualHeight * ct.ScaleY - img.ActualHeight) / 2;
ct.TranslateY = Math.Min(translateY, Math.Max(0 - translateY, ct.TranslateY));
var translateX = (img.ActualWidth * ct.ScaleX - img.ActualWidth) / 2;
ct.TranslateX = Math.Min(translateX, Math.Max(0 - translateX, ct.TranslateX));
}
Related
My requirement is to do pinch zooming in WPF platform. For that, i have created simple POC sample according to my requirement and it can be reproduced. Please find the snippets below
XAML:
<Grid>
<Image x:Name="JPGImage"
Source="TestImage.jpg"
IsManipulationEnabled="True"
ManipulationDelta="Image_ManipulationDelta"
ManipulationStarted="JPGImage_ManipulationStarted"
ManipulationCompleted="JPGImage_ManipulationCompleted"/>
</Grid>
C#:
private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
System.Diagnostics.Debug.WriteLine(e.DeltaManipulation.Translation.X + " " + e.DeltaManipulation.Translation.Y);
if (e.Manipulators.Count() > 1)
{
if (scale.ScaleX > 1.6 || scale.ScaleX < 0.5)
{
scale.ScaleX = 1;
scale.ScaleY = 1;
translation.X = 0;
translation.Y = 0;
this.JPGImage.RenderTransform = transformGroup;
}
else
{
if (isScale)
{
scale.ScaleX = previousCumlativeScale * e.DeltaManipulation.Scale.X;
scale.ScaleY = previousCumlativeScale * e.DeltaManipulation.Scale.Y;
var x = (e.ManipulationOrigin.X - previousXPosition) * (scale.ScaleX - 1);
var y = (e.ManipulationOrigin.Y - previousYPosition) * (scale.ScaleY - 1);
translation.X += x;
translation.Y += y;
}
else
{
scale.ScaleX *= e.DeltaManipulation.Scale.X;
scale.ScaleY *= e.DeltaManipulation.Scale.Y;
translation.X += e.DeltaManipulation.Translation.X;
translation.Y += e.DeltaManipulation.Translation.Y;
}
scale.CenterX = e.ManipulationOrigin.X;
scale.CenterY = e.ManipulationOrigin.Y;
this.JPGImage.RenderTransform = transformGroup;
}
previousCumlativeScale = scale.ScaleX;
previousTranslateX = translation.X;
previousTranslateY = translation.Y;
previousXPosition = scale.CenterX;
previousYPosition = scale.CenterY;
}
else
{
translation.X += e.DeltaManipulation.Translation.X;
translation.Y += e.DeltaManipulation.Translation.Y;
}
}
My problems are
If i try to Zoomout the image using pinch, then it get disappeared when its scale value becomes less than 1
Zooming is also not smooth
Also i have reset the zoom after certain level of scale (mentioned below) then the image is not get reset properly.
C#
if (scale.ScaleX > 1.6 || scale.ScaleX < 0.5)
{
scale.ScaleX = 1;
scale.ScaleY = 1;
translation.X = 0;
translation.Y = 0;
this.JPGImage.RenderTransform = transformGroup;
}
Please get the sample from the below link
WPFZooming
I have found the below issue only related to manipulation events in github
https://github.com/Microsoft/dotnet/issues/575
Could you please help me to resolve the problems?.
Thanks in advance
Vignesh.
Not sure why exactly your code seems so complicated. The following also works, where the important point is to handle the ManipulationDelta on the parent element of the Image element:
<Canvas IsManipulationEnabled="True"
ManipulationDelta="OnManipulationDelta">
<Image Source="...">
<Image.RenderTransform>
<MatrixTransform x:Name="imageTransform"/>
</Image.RenderTransform>
</Image>
</Canvas>
with this event handler:
private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
var origin = e.ManipulationOrigin;
var delta = e.DeltaManipulation;
var scale = (delta.Scale.X + delta.Scale.Y) / 2; // mean value
var matrix = imageTransform.Matrix; // current transform matrix
matrix.ScaleAt(scale, scale, origin.X, origin.Y);
matrix.Translate(delta.Translation.X, delta.Translation.Y);
imageTransform.Matrix = matrix; // new transform matrix
}
I display the images on canvas and I want to be able to move all the images. Currently I am only able to move the last image which I brought on canvas. I also want to be able to zoom these images. Please help me in this.
private TranslateTransform dragTranslation;
// Constructor
void Drag_ManipulationDelta(object sender,ManipulationDeltaRoutedEventArgs e)
{
// Move the rectangle.
dragTranslation.X += e.Delta.Translation.X;
dragTranslation.Y += e.Delta.Translation.Y;
}
private void Stickers1_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
var selecteditem = e.AddedItems[0] as StickersImageListModel;
Stickers1.Visibility = Visibility.Collapsed;
Image imageitem = new Image();
BitmapImage image = new BitmapImage(new System.Uri(selecteditem.Imageurl, UriKind.Absolute));
imageitem.Source = image;
my_canvas.Children.Add(imageitem);
imageitem.AllowDrop = true;
imageitem.ManipulationMode = ManipulationModes.All;
imageitem.ManipulationDelta += Drag_ManipulationDelta;
dragTranslation = new TranslateTransform();
imageitem.RenderTransform = this.dragTranslation;
var st = (ScaleTransform)imageitem.RenderTransform;
double zoom = e.Delta > 0 ? .2 : -.2;
st.ScaleX += zoom;
st.ScaleY += zoom;
my_canvas.Visibility = Visibility.Visible;
}
You dont have to use dragTranslation property
void Drag_ManipulationDelta(object sender,ManipulationDeltaRoutedEventArgs e)
{
// Move the rectangle.
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < 1.0) ct.ScaleX = 1.0;
if (ct.ScaleY < 1.0) ct.ScaleY = 1.0;
if (ct.ScaleX > 4.0) ct.ScaleX = 4.0;
if (ct.ScaleY > 4.0) ct.ScaleY = 4.0;
//Checking with canvas boundary so that image wont go behind canvas
if ((ct.TranslateX + e.Delta.Translation.X) <= (mycanvas.ActualWidth - img.ActualWidth) && ct.TranslateX + e.Delta.Translation.X>=0)
ct.TranslateX += e.Delta.Translation.X;
if ((ct.TranslateY + e.Delta.Translation.Y) <= (mycanvas.ActualHeight - img.ActualHeight) && ct.TranslateY + e.Delta.Translation.Y >= 0)
ct.TranslateY += e.Delta.Translation.Y;
}
private void Stickers1_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
...
//Using CompositeTransform instead of TranslateTransform
CompositeTransform ct = new CompositeTransform();
imageitem.RenderTransform = ct;
}
I am working on a gallery app where i need show the images on Flipview. When in Flipview, i would like to zoom in/out of the image. Here's my code where i am trying to display an image and performing a composite transform on it.
<Image Source="Assets/WP_20150914_11_30_50_Pro.jpg"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
ManipulationDelta="img_intro_ManipulationDelta"
ManipulationMode="All">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
if (ct.ScaleX < 1.0) ct.ScaleX = 1.0;
if (ct.ScaleY < 1.0) ct.ScaleY = 1.0;
if (ct.ScaleX > 4.0) ct.ScaleX = 4.0;
if (ct.ScaleY > 4.0) ct.ScaleY = 4.0;
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
if (ct.TranslateY > (((img.ActualHeight * ct.ScaleY) - img.ActualHeight) / 2))
{
ct.TranslateY = (((img.ActualHeight * ct.ScaleY) - img.ActualHeight) / 2);
}
if (ct.TranslateY < 0 - ((((img.ActualHeight * ct.ScaleY) - img.ActualHeight)) / 2))
{
ct.TranslateY = 0 - ((((img.ActualHeight * ct.ScaleY) - img.ActualHeight)) / 2);
}
if (ct.TranslateX > (((img.ActualWidth * ct.ScaleX) - img.ActualWidth) / 2))
{
ct.TranslateX = (((img.ActualWidth * ct.ScaleX) - img.ActualWidth) / 2);
}
if (ct.TranslateX < 0 - ((((img.ActualWidth * ct.ScaleX) - img.ActualWidth)) / 2))
{
ct.TranslateX = 0 - ((((img.ActualWidth * ct.ScaleX) - img.ActualWidth)) / 2);
}
}
This works well without a Flipview. But when i add it to a flipview i won't be able to flip to the next item or previous item.
Any suggestions how to fix this ?
Rather than making use of manipulation delta put the image inside a scrollviewer, as it wont fire an event every time for manipulation to occur on the ui thread.
try some thing like
<Flipview>
<ScrollViewer MaxZoomFactor="4">
<Image>
</Image>
</Scrollviewer>
</Flipview>
Since m not having an IDE currently this is the best possible help, give a try and let me know.
Into Copystransform, if I removed 2 in the end of line then I will could zoom in and out but could not drag while that have zoom in.
what else I did not remove then can't zoom and can't drag. It just zoom when the picture is small else if the picture is full screen then did not that.
Link:http://blogs.msdn.com/b/wsdevsol/archive/2014/06/10/constraining-manipulations.aspx
double mincale = 0.5;
//double maxscale = 10.0;
CompositeTransform savedtransform = new CompositeTransform();
private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
// FrameworkElement elemt = sender as FrameworkElement;
Image elemt = sender as Image;
CompositeTransform transform = elemt.RenderTransform as CompositeTransform;
//
copytransform(transform,savedtransform);
//apply
transform.ScaleX *= e.Delta.Scale;
transform.ScaleY *= e.Delta.Scale;
transform.TranslateX += e.Delta.Translation.X;
transform.TranslateY += e.Delta.Translation.Y;
if (transform.ScaleX < mincale) transform.ScaleX = mincale;
if (transform.ScaleY < mincale) transform.ScaleY = mincale;
// if (transform.ScaleX > maxscale) transform.ScaleX = maxscale;
// if (transform.ScaleY > maxscale) transform.ScaleY = maxscale;
if(elemt!=null)
{
if(!intersetElemnets(elemt,this.content,true))
{
copytransform(savedtransform, transform);
}
}
/*
double scalewidth = Zoomimages.ActualWidth * ct.ScaleX;
double scleheight = Zoomimages.ActualHeight * ct.ScaleY;
double xdiff = Math.Max(0, (scalewidth - this.content.ActualWidth) / 2);
double ydiff = Math.Max(0, (scleheight - this.content.ActualHeight) / 2);
if (Math.Abs(ct.TranslateX) > xdiff)
ct.TranslateX = xdiff * Math.Sign(e.Delta.Translation.X);
if (Math.Abs(ct.TranslateY) > ydiff)
ct.TranslateY = ydiff * Math.Sign(e.Delta.Translation.Y);
* */
}
private bool intersetElemnets(FrameworkElement inner, FrameworkElement outer,bool contains)
{
GeneralTransform testTransform = inner.TransformToVisual(outer);
//
Rect boundsinner = new Rect(0,0,inner.ActualWidth,inner.ActualHeight);
Rect bboxouter = new Rect(0, 0, outer.ActualWidth, outer.ActualHeight);
Rect bboxinner = testTransform.TransformBounds(boundsinner);
if(contains)
{
return bboxinner.X > bboxouter.Y &&
bboxinner.Y > bboxouter.Y &&
bboxinner.Right < bboxouter.Right &&
bboxinner.Bottom < bboxouter.Bottom;
}
else
{
bboxouter.Intersect(bboxinner);
return !bboxouter.IsEmpty;
}
}
private void copytransform(CompositeTransform orig,CompositeTransform copy)
{
copy.TranslateX = orig.TranslateX;
copy.TranslateY = orig.TranslateY;
copy.ScaleX = orig.ScaleX;
copy.ScaleY = orig.ScaleY;
}
I can drag this pictures to right or left,up,down It passed over an screens.I had zoom in and out. I want limit about that. Using windows phone 8.1 app.
After the transformation, brings the image back if it is out of the boundary. You can detect if the image is out of boundary by comparing the values of TranslateX/TranslateY and the width/height of the boundary. The boundary is the parent of the image (it is a Grid?), you need to debug the code to determine the boundary for TranslateX and TranslateY.
XAML
<Grid>
<Grid Name="container">
<Image Name="img_container" Source="/papers.co-mb00-baloon-fly-sea-wallpaper-1920x1080.jpg"
ManipulationDelta="Image_ManipulationDelta"
ManipulationMode="Scale,TranslateX,TranslateY"
Stretch="Uniform"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Grid>
</Grid>
C#
int mincale = 1;
private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image img = sender as Image;
CompositeTransform ct = img.RenderTransform as CompositeTransform;
//zoom
ct.ScaleX *= e.Delta.Scale;
ct.ScaleY *= e.Delta.Scale;
//checking
if (ct.ScaleX < mincale)
ct.ScaleX = mincale;
if (ct.ScaleY < mincale)
ct.ScaleY = mincale;
//drag whitle zooming.
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
//checking drag not passed over a screen.that's fails.
if (ct.TranslateX < 10 - img.ActualWidth * ct.ScaleX)
ct.TranslateX = 10 - img.ActualWidth * ct.ScaleX;
if (ct.TranslateX > container.ActualWidth - 10)
ct.TranslateX = container.ActualWidth - 10;
if (ct.TranslateY < 10 - img.ActualHeight * ct.ScaleY)
ct.TranslateY = 10 - img.ActualHeight * ct.ScaleY;
if (ct.TranslateY > container.ActualHeight - 10)
ct.TranslateY = container.ActualHeight - 10;
}
you can check for which resolution is there , according to set Image height and width.
var scalfactor = App.Current.Host.Content.ScaleFactor;
switch (scalfactor)
{
case 150:
//write code for 720p or other screen Resolution
break;
case 160:
//write code for Wxga screen Resolution
break;
case 100:
//write code for Wvga screen Resolution
break;
default:
throw new InvalidOperationException("Unknown resolution type");
}
Plz refer this link for more info
http://msdn.microsoft.com/en-us/library/windows/apps/jj206974%28v=vs.105%29.aspx