在ScrollViewer中动态图像（UWP） [英] Moving Image in ScrollViewer (UWP)

问题描述

我在的ScrollViewer得到了图片 ...

 <的ScrollViewer X：NAME =ScrollsterZoomMode =已启用MinZoomFactor =1MaxZoomFactor =4
 Horizo​​ntalScrollBarVisibility =自动VerticalScrollBarVisibility = 自动ManipulationMode =所有> 
<图像X：NAME =图来源={X：绑定ImgSource}拉伸=UniformToFillPointerPressed =Img_PointerPressed/> 
< /&的ScrollViewer GT; 
  

我想，当我拖动图像与鼠标指针移动图像！

我试过：

  Img_PointerPressed私人无效（对象发件人，PointerRoutedEventArgs E）
 {
变种p = e.Pointer; 
} 
  

但我不能让指针位置改变的ScrollViewer现在的位置。

这有什么错我的代码？我这样做对吗？

解决方案

的 ManipulationMode 应设置在在图控制来代替。此外，你可能想指定要而非所有，以防止不必要的手势操作。

<$ P $确切模式p> <图像X：NAME =图来源={X：绑定ImgSource}WIDTH =150HEIGHT =150拉伸=UniformToFill
ManipulationMode = TranslateX，TranslateY
在ManipulationStarted =Img_ManipulationStarted
在ManipulationDelta =Img_ManipulationDelta
在ManipulationCompleted =Img_ManipulationCompleted>
< Image.RenderTransform>
< CompositeTransform X：NAME =变换/>
< /Image.RenderTransform>
< /图像>


从你的描述上面，我想打开两个 TranslateX 和 TranslateY 应该是足够了。然后，你将需要处理操纵事件，如在ManipulationStarted ，在ManipulationDelta 和在ManipulationCompleted 。

你的大部分逻辑应该在在ManipulationDelta 将在被解雇多次事件平移进展。这是你在哪里得到的 X 和是位置，并相应设置。

下面是一个简单的示例。

 无效Img_ManipulationStarted（对象发件人，ManipulationStartedRoutedEventArgs E）
 {
 //昏暗的图像，同时平移
 this.Img.Opacity = 0.4; 
} 
 
无效Img_ManipulationDelta（对象发件人，ManipulationDeltaRoutedEventArgs E）
 {
 this.Transform.TranslateX + = e.Delta.Translation.X; 
 this.Transform.TranslateY + = e.Delta.Translation.Y; 
} 
 
无效Img_ManipulationCompleted（对象发件人，ManipulationCompletedRoutedEventArgs E）
 {
 //重新设置不透明度
 this.Img.Opacity = 1; 
} 
  

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!

I tried:

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?

解决方案

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>

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.

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.

Here is a simple sample for this.

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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！