本文主要讲一个在绘图中,我们会有一个基础的控件,Line。控件的基本使用和他能做出的我们很多时候需要的界面。

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

<!–more–>

<!–more–>

虽然是一个简单控件,但是可以做出很诡异的很好看的UI。

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);
            }
        }

首先,我们要知道,Line就是画直线。当然我们画他一般是在Canvas中。

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;
        }

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

图片 1

大神,请用力划。

大神:我的控件哪去?

控件:谁叫你那么用力

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

……

好在OneWindows的帮助

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

图片 2
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0
国际许可协议
进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd
),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

<script type=”text/javascript”> $(function () { $(‘pre.prettyprint
code’).each(function () { var lines =
$(this).text().split(‘\n’).length; var $numbering =
$(‘<ul/>’).addClass(‘pre-numbering’).hide();
$(this).addClass(‘has-numbering’).parent().append($numbering); for (i =
1; i <= lines; i++) { $numbering.append($(‘<li/>’).text(i)); };
$numbering.fadeIn(1700); }); }); </script>

       <Grid Margin="10,10,10,10">

            <Canvas>



            </Canvas>

        </Grid>

首先我们需要确定直线坐标,用X1X2,Y1Y2来获得两个点,也就是直线。

 <Line X1="0" X2="200" Y1="10" Y2="200"></Line>

有了直线,可以在设计看到一条线,但是运行是没有看到的,因为我们没有给线大小。

图片 3

Stroke就是线段设置颜色或用其他渐变填充,StrokeThickness就是线段的大小

我们写上Stroke="Black" StrokeThickness="5"

图片 4

如果我们把大小写为50,那么就会看到很不好看

图片 5

于是我们想要裁剪他,裁剪可以用Clip

我们用矩形来裁剪他。

矩形需要四个点。

可以看到线段裁剪了

图片 6

被一个大小为150的矩形裁剪了

图片 7

接着就是ms-uap 写的 http://www.cnblogs.com/ms-uap/p/4641419.html

我们给他一个StrokeDashArray,这个值就是很多数,奇数的数就是显示宽度,偶数的就是不显示的宽度,读到最后的数就循环到最前。我们设置一个0.1一个0.2就会显示0.1的宽度,然后空0.2再显示0.1

               <Line X1="0" X2="200" Y1="10" Y2="200"

                      Stroke="Black" StrokeThickness="50"

                      StrokeDashArray="0.1 0.2">

                    <Line.Clip>

                        <RectangleGeometry Rect="0 0 150 150"></RectangleGeometry>

                    </Line.Clip>

                </Line>

图片 8

需要知道,0.1的宽度是0.1*StrokeThickness的宽度

我们把宽度大一些

图片 9

然后加个线条,就可以做出ms-uap写的图

我们还可以设置线段的开始图形,要知道,我们线段画比较大,那么看起来就是矩形,StrokeStartLineCap就可以让线段看起来好看

StrokeStartLineCap="Round"

图片 10

StrokeStartLineCap="Triangle"

图片 11

线段两头尖的画法就是在设置后面的StrokeEndLineCap

图片 12
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0
国际许可协议
进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd
),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

<script type=”text/javascript”> $(function () { $(‘pre.prettyprint
code’).each(function () { var lines =
$(this).text().split(‘\n’).length; var $numbering =
$(‘<ul/>’).addClass(‘pre-numbering’).hide();
$(this).addClass(‘has-numbering’).parent().append($numbering); for (i =
1; i <= lines; i++) { $numbering.append($(‘<li/>’).text(i)); };
$numbering.fadeIn(1700); }); }); </script>

相关文章