问题描述
我在 Scrollviewer
中有一个 Image
...
I've got a Image
in Scrollviewer
...
<ScrollViewer x:Name="Scrollster" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="4"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" ManipulationMode="All">
<Image x:Name="Img" Source="{x:Bind ImgSource}" Stretch="UniformToFill" PointerPressed="Img_PointerPressed"/>
</ScrollViewer>
当我用鼠标指针拖动图像时,我想移动图像!
I want to move Image when I drag image with Mouse Pointer!
我试过了:
private void Img_PointerPressed(object sender,PointerRoutedEventArgs e)
{
var p = e.Pointer;
}
但我无法获得更改滚动查看器位置的指针位置.
but I can't get pointer position to change scrollviewer postion.
我的代码有什么问题?我做得对吗?
What's wrong with my code? Am I doing it right?
推荐答案
ManipulationMode
应该设置在 Img
控件上.此外,您可能希望指定所需的确切模式而不是 All
以防止不必要的手势处理.
The ManipulationMode
should be set on the Img
control instead. Also, you probably want to specify the exact modes you want rather than All
to prevent unnecessary gesture handling.
<Image x:Name="Img" Source="{x:Bind ImgSource}" Width="150" Height="150" Stretch="UniformToFill"
ManipulationMode="TranslateX, TranslateY"
ManipulationStarted="Img_ManipulationStarted"
ManipulationDelta="Img_ManipulationDelta"
ManipulationCompleted="Img_ManipulationCompleted">
<Image.RenderTransform>
<CompositeTransform x:Name="Transform" />
</Image.RenderTransform>
</Image>
根据您上面的描述,我认为同时打开 TranslateX
和 TranslateY
就足够了.然后,您将需要处理 ManipulationStarted
、ManipulationDelta
和 ManipulationCompleted
等操作事件.
From your description above, I think turning on both TranslateX
and TranslateY
should be sufficient. Then you will need to handle manipulation events like ManipulationStarted
, ManipulationDelta
and ManipulationCompleted
.
您的大部分逻辑应该在 ManipulationDelta
事件中完成,该事件将在平移过程中多次触发.这是您获取 X
和 Y
位置并进行相应设置的地方.
Most of your logic should be done in ManipulationDelta
event which will be fired multiple times during the progression of the panning. It's where you get the X
and Y
positions and set them accordingly.
这是一个简单的示例.
void Img_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
// dim the image while panning
this.Img.Opacity = 0.4;
}
void Img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
this.Transform.TranslateX += e.Delta.Translation.X;
this.Transform.TranslateY += e.Delta.Translation.Y;
}
void Img_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
// reset the Opacity
this.Img.Opacity = 1;
}
这篇关于ScrollViewer (UWP) 中的移动图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!