win10 uwp 拖动控件 Margin 移动Canvas 拖动控件Manipulation 拖动控件

林德熙

发布于 2018-09-18 17:44:59

2.5K0

发布于 2018-09-18 17:44:59

文章被收录于专栏：林德熙的博客林德熙的博客

我们会使用控件拖动，可以让我们做出好看的动画，那么我们如何移动控件，我将会告诉大家多个方法。其中第一个是最差的，最后的才是我希望大神你去用。

Margin 移动

我们可以使用Margin移动，但这是wr说不要这样做。

We can move the control by Margin,but using this method is not recommended.

我们可以在xaml写一个Button，然后就使用左键获取鼠标，这个可以去看 win10 uwp 获取按钮鼠标左键按下

http://lindexi.oschina.io/lindexi/post/win10-uwp-%E8%8E%B7%E5%8F%96%E6%8C%89%E9%92%AE%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8C%89%E4%B8%8B/

于是在Button_OnPointerMoved，我们获取移动的xy

PointerPoint point = e.GetCurrentPoint(btn);

这样point.Position.X就是移动的左边

我们可以通过x += point.Position.X - btn.ActualWidth / 2.0;

这是因为btn.ActualWidth / 2.0不用的话会是控件的左上角。

我们把它给Margin

        private void Button_OnPointerMoved(object sender, PointerRoutedEventArgs e)
        {
            Button btn=sender as Button;
            if (btn == null)
            {
                return;
            }
            e.Handled = true;

            PointerPoint point = e.GetCurrentPoint(btn);

            if (point.Properties.IsLeftButtonPressed)
            {
                double x = (double)btn.GetValue(Canvas.LeftProperty);
                double y = (double)btn.GetValue(Canvas.TopProperty);
                x += point.Position.X - btn.ActualWidth / 2.0;
                y += point.Position.Y - btn.ActualHeight / 2.0;
                btn.Margin=new Thickness(x,y,0,0);
            }
        }

Canvas 拖动控件

我们需要把控件放在Canvas，然后使用Margin一样的

我们需要设置附件属性，btn.SetValue(Canvas.LeftProperty, x)就是设置Canvas.Left

        private void Button_OnPointerMoved(object sender, PointerRoutedEventArgs e)
        {
            Button btn=sender as Button;
            if (btn == null)
            {
                return;
            }
            e.Handled = true;

            PointerPoint point = e.GetCurrentPoint(btn);

            if (point.Properties.IsLeftButtonPressed)
            {
                double x = (double)btn.GetValue(Canvas.LeftProperty);
                double y = (double)btn.GetValue(Canvas.TopProperty);
                x += point.Position.X - btn.ActualWidth / 2.0;
                y += point.Position.Y - btn.ActualHeight / 2.0;
                btn.SetValue(Canvas.LeftProperty, x);
                btn.SetValue(Canvas.TopProperty, y);
            }
        }

Manipulation 拖动控件

我们可以使用手势，这个需要在控件设置ManipulationMode="All"，使用ManipulationDelta

        private void Button_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            Button btn = sender as Button;
            if (btn == null)
            {
                return;
            }

            if (dragTranslation == null)
            {
                dragTranslation = new TranslateTransform();
            }

            btn.RenderTransform = dragTranslation;

            dragTranslation.X += e.Delta.Translation.X;
            dragTranslation.Y += e.Delta.Translation.Y;
        }

做好之后，我们发现实在奇怪

大神，请用力划。

大神：我的控件哪去？

控件：谁叫你那么用力

Canvas：我的左边可以长度无限。

……

好在OneWindows的帮助

参见：http://www.cnblogs.com/cjw1115/p/5323339.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度