[英]Drag and drop image in Windows 8 Metro App
Is there a way to drag and drop an image in a Windows 8 metro app. 有没有办法在Windows 8 metro应用程序中拖放图像。 I'm using C# and XAML.
我正在使用C#和XAML。 Following is what I need...
以下是我需要的......
Sure there is. 当然有。 You'll have to control it yourself, but it is pretty easy.
你必须自己控制它,但它很容易。 You need to use a few pointer events like this:
你需要使用这样的一些指针事件:
XAML: XAML:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" PointerMoved="GridPointerMoved">
<Image x:Name="image1" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Source="Assets/imageFile.png" PointerPressed="ImagePointerPressed" PointerReleased="ImagePointerReleased"/>
</Grid>
Then in your CS file: 然后在你的CS文件中:
Point positionWithinImage;
private void ImagePointerPressed(object sender, PointerRoutedEventArgs e)
{
Debug.WriteLine("Pressed");
holding = true;
positionWithinImage = e.GetCurrentPoint(sender as Image).Position;
}
private void ImagePointerReleased(object sender, PointerRoutedEventArgs e)
{
Debug.WriteLine("Released");
holding = false;
}
bool holding = false;
private void GridPointerMoved(object sender, PointerRoutedEventArgs e)
{
if (holding)
{
var pos = e.GetCurrentPoint(image1.Parent as Grid).Position;
image1.Margin = new Thickness(pos.X - this.positionWithinImage.X, pos.Y - this.positionWithinImage.Y, 0, 0);
}
}
I've found a good solution here: http://xatazch.blogspot.pt/2012/08/drag-and-drop-item-using.html 我在这里找到了一个很好的解决方案: http : //xatazch.blogspot.pt/2012/08/drag-and-drop-item-using.html
Using TranslateTransform we can get a smooth and "real time" movement for the draggable item. 使用TranslateTransform,我们可以为可拖动项目获得平滑且“实时”的移动。
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
image1.ManipulationDelta += DragableItem_ManipulationDelta;
image1.RenderTransform = new TranslateTransform();
}
private void DragableItem_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Image dragableItem = sender as Image;
TranslateTransform translateTransform = dragableItem.RenderTransform as TranslateTransform;
translateTransform.X += e.Delta.Translation.X;
translateTransform.Y += e.Delta.Translation.Y;
}
Hope it helps! 希望能帮助到你!
I tried your solution but it didn't really result in "perfect" moving of the image. 我试过你的解决方案,但它并没有真正导致图像的“完美”移动。
Alternatively you can try to use the Manipulation events: 或者,您可以尝试使用操纵事件:
XAML: XAML:
<Image x:Name="imgSanta" Width="250" Source="Assets/santa.png" ManipulationMode="All" ManipulationStarted="imgSanta_ManipulationStarted_1" ManipulationDelta="imgSanta_ManipulationDelta_1"></Image>
C# C#
private void imgSanta_ManipulationStarted_1(object sender, ManipulationStartedRoutedEventArgs e)
{
txtFeedback.Text = "Manipulation started";
}
private void imgSanta_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
var newTop = imgSanta.Margin.Top + e.Delta.Translation.Y;
var newLeft = imgSanta.Margin.Left + e.Delta.Translation.X;
imgSanta.Margin = new Thickness(newLeft, newTop, 0, 0);
}
Even with this I'm not 100% satisfied but I do think it has a better result. 即便如此,我并不是100%满意,但我认为它有更好的结果。 Let me know what you think about this.
让我知道你对此的看法。 (Even though this is an older post, it's worth mentioning)
(即使这是一篇较老的帖子,值得一提)
EDIT: I noticed the 1:1 movement only worked when my image was located within a StackPanel. 编辑:我注意到1:1运动仅在我的图像位于StackPanel内时才起作用。
joaquims方法是更快的...看看这个演示应用程序: http ://code.msdn.microsoft.com/windowsapps/Drag-and-Drop-a-picture-in-26580dc0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.