拖动在WPF图像 [英] Dragging an image in WPF

查看:432
本文介绍了拖动在WPF图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图创建一个WPF应用程序,我可以随意拖动图像。

目前我已经放在窗口的中心的形象,我想用三个mouseevents的MouseDown,的MouseMove和MouseUp计算出新的位置拖动图像时。

是否有关于如何做到这一点任何其他好的想法吗?我完全新的WPF,所以我的心态仍然是在Windows窗体的世界。

据我可以看到我需要使用       为了有绝对定位可用

解决方案

好了,这里有一个附加属性的行为,你可以用它来进行拖动任何元素,只要它是在画布上:

 公共类DraggableExtender:DependencyObject的
{
    //这是我们露出了依赖属性 - 我们将
    //访问本作DraggableExtender.CanDrag =真/假
    公共静态只读的DependencyProperty CanDragProperty =
        DependencyProperty.RegisterAttached(CanDrag
        typeof运算(布尔)
        typeof运算(DraggableExtender)
        新UIPropertyMetadata(假,OnChangeCanDragProperty));

    //预期的静态二传手
    公共静态无效SetCanDrag(UIElement的元素,布尔O)
    {
        element.SetValue(CanDragProperty,O);
    }

    //预期的静电吸
    公共静态布尔GetCanDrag(UIElement的元素)
    {
        返回(布尔)element.GetValue(CanDragProperty);
    }

    当CanDrag属性设置//这被触发。井
    //只需查看该元件是一个UI元素,它是
    //画布中。如果是,我们将钩住鼠标事件
    私有静态无效OnChangeCanDragProperty(DependencyObject的研发,
              DependencyPropertyChangedEventArgs五)
    {
        UIElement的元素= D为UIElement的;
        如果(元素== NULL)回报;

        如果(e.NewValue!= e.OldValue)
        {
            如果((布尔)e.NewValue)
            {
                元previewMouseDown + = element_ previewMouseDown。
                元previewMouseUp + = element_ previewMouseUp。
                元previewMouseMove + = element_ previewMouseMove。
            }
            其他
            {
                。元previewMouseDown  -  = element_ previewMouseDown;
                。元previewMouseUp  -  = element_ previewMouseUp;
                。元previewMouseMove  -  = element_ previewMouseMove;
            }
        }
    }

    //确定我们是否presently拖
    私有静态布尔_isDragging = FALSE;
    //从顶部的偏移的项目被拖动离开
    //和原装鼠标向下
    私人静点_offset;

    //这个被触发时,鼠标按键时pressed
    //元素上被钩住
    静态无效element_ previewMouseDown(对象发件人,
            System.Windows.Input.MouseButtonEventArgs五)
    {
        //确保它是因为我们需要一个框架元素
        //可以访问可视化树
        FrameworkElement的元素=发件人的FrameworkElement的;
        如果(元素== NULL)回报;

        //开始拖放鼠标得到的补偿
        //相对于元素
        _isDragging = TRUE;
        _offset = e.GetPosition(元);
    }

    //当鼠标移过元素这是触发
    私有静态无效element_ previewMouseMove(对象发件人,
              MouseEventArgs五)
    {
        //如果我们不拖,不打扰 - 也验证元素
        如果回报(_isDragging!);

        FrameworkElement的元素=发件人的FrameworkElement的;
        如果(元素== NULL)回报;

        帆布油画= element.Parent作为画布;
        如果(帆布== NULL)回报;

        //获取鼠标相对的位置​​到画布
        点mousePoint = e.GetPosition(画布);

        //偏移量由最初的偏移位置鼠标位置
        mousePoint.Offset(-_ offset.X,-_offset.Y);

        //移动元素在画布上
        element.SetValue(Canvas.LeftProperty,mousePoint.X);
        element.SetValue(Canvas.TopProperty,mousePoint.Y);
    }

    //当鼠标被释放,这是触发
    私有静态无效element_ previewMouseUp(对象发件人,
            MouseButtonEventArgs五)
    {
        _isDragging = FALSE;
    }

}
 

然后,您可以通过导入你的类包含在(像这样)命名空间使用在你的XAML

 <窗​​口x:类=WPFFunWithDragging.Window1
        XMLNS:地方=CLR的命名空间:WPFFunWithDragging..>
 

然后你可以只设置DraggableExtender.CanDrag =真的元素拖动周围的:

 <画布>
    <图像源=Garden.jpg
           WIDTH =50
           Canvas.Left =10Canvas.Top =10
           本地:DraggableExtender.CanDrag =真/>
< /帆布>
 

希望这是一些使用:)

I'm trying to create a WPF application where I can drag an image around.

Currently I have an image placed in the center of the window, and I'm thinking of using the three mouseevents MouseDown, MouseMove and MouseUp to calculate the new position when dragging the image.

Are there any other good ideas on how to do this? I'm totally new to WPF so my mindset is still in the Windows Forms world.

As far as I can see I need to use a in order to have absolute positioning available.

解决方案

ok, here's an attached property "behaviour" that you can use to make any element draggable provided it's on a canvas:

public class DraggableExtender : DependencyObject
{
    // This is the dependency property we're exposing - we'll 
    // access this as DraggableExtender.CanDrag="true"/"false"
    public static readonly DependencyProperty CanDragProperty =
        DependencyProperty.RegisterAttached("CanDrag",
        typeof(bool),
        typeof(DraggableExtender),
        new UIPropertyMetadata(false, OnChangeCanDragProperty));

    // The expected static setter
    public static void SetCanDrag(UIElement element, bool o)
    {
        element.SetValue(CanDragProperty, o);
    }

    // the expected static getter
    public static bool GetCanDrag(UIElement element)
    {
        return (bool) element.GetValue(CanDragProperty);
    }

    // This is triggered when the CanDrag property is set. We'll
    // simply check the element is a UI element and that it is
    // within a canvas. If it is, we'll hook into the mouse events
    private static void OnChangeCanDragProperty(DependencyObject d, 
              DependencyPropertyChangedEventArgs e)
    {
        UIElement element = d as UIElement;
        if (element == null) return;

        if (e.NewValue != e.OldValue)
        {
            if ((bool)e.NewValue)
            {
                element.PreviewMouseDown += element_PreviewMouseDown;
                element.PreviewMouseUp += element_PreviewMouseUp;
                element.PreviewMouseMove += element_PreviewMouseMove;
            }
            else
            {
                element.PreviewMouseDown -= element_PreviewMouseDown;
                element.PreviewMouseUp -= element_PreviewMouseUp;
                element.PreviewMouseMove -= element_PreviewMouseMove;
            }
        }
    }

    // Determine if we're presently dragging
    private static bool _isDragging = false;
    // The offset from the top, left of the item being dragged 
    // and the original mouse down
    private static Point _offset;

    // This is triggered when the mouse button is pressed 
    // on the element being hooked
    static void element_PreviewMouseDown(object sender,
            System.Windows.Input.MouseButtonEventArgs e)
    {
        // Ensure it's a framework element as we'll need to 
        // get access to the visual tree
        FrameworkElement element = sender as FrameworkElement;
        if (element == null) return;

        // start dragging and get the offset of the mouse 
        // relative to the element
        _isDragging = true;
        _offset = e.GetPosition(element);
    }

    // This is triggered when the mouse is moved over the element
    private static void element_PreviewMouseMove(object sender, 
              MouseEventArgs e)
    {
        // If we're not dragging, don't bother - also validate the element
        if (!_isDragging) return;

        FrameworkElement element = sender as FrameworkElement;
        if (element == null) return;

        Canvas canvas = element.Parent as Canvas;
        if( canvas == null ) return;

        // Get the position of the mouse relative to the canvas
        Point mousePoint = e.GetPosition(canvas);

        // Offset the mouse position by the original offset position
        mousePoint.Offset(-_offset.X, -_offset.Y);

        // Move the element on the canvas
        element.SetValue(Canvas.LeftProperty, mousePoint.X);
        element.SetValue(Canvas.TopProperty, mousePoint.Y);
    }

    // this is triggered when the mouse is released
    private static void element_PreviewMouseUp(object sender, 
            MouseButtonEventArgs e)
    {
        _isDragging = false;
    }

}

You can then use this in your XAML by importing the namespace your class is contained in (something like this:)

<Window x:Class="WPFFunWithDragging.Window1"
        xmlns:local="clr-namespace:WPFFunWithDragging" .. >

And then you can just set DraggableExtender.CanDrag="true" on elements to drag around:

<Canvas>
    <Image Source="Garden.jpg" 
           Width="50" 
           Canvas.Left="10" Canvas.Top="10" 
           local:DraggableExtender.CanDrag="true"/>
</Canvas>

Hope this is of some use :)

这篇关于拖动在WPF图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆