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

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

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

我们先在一个页面新建一下,写下必要的代码。


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

            <Canvas>

            </Canvas>

        </Grid>

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


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

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

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

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

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

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

我们用矩形来裁剪他。

矩形需要四个点。

可以看到线段裁剪了

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

接着就是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>

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

我们把宽度大一些

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

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


StrokeStartLineCap="Round"


StrokeStartLineCap="Triangle"

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


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

win10 uwp 绘图 Line 控件使用的更多相关文章

  1. UWP 用Thumb 控件仿制一个可拖动悬浮 Button

    参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...

  2. FastReport.Net使用:[17]线(Line)控件使用

    FastReport中,线(Line)控件怎么用?怎么画一条美观的线? 认识Line控件 1.线(Line)控件包含于形状(Shape)控件中,有5个可选项,一个标准线和四个对角线,其实都是同一种线, ...

  3. UWP开发之控件:用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  4. UWP自动填充控件AutoSuggestBox小优化

    UWP提供的AutoSuggestBox本身非常好用,在项目中经常用到,但是当我们使用时发现一下不人性化的设置,例子1如下: <Page x:Class="SelfInkCanvas. ...

  5. [UWP]实现Picker控件

    1. 前言 在WPF中,很多打开下拉框(Popup或Flyout)选择一个结果值的控件,除了ComboBox等少数例外,这种控件都以-Picker做名称后缀.因为要打开关闭下拉框和计算下拉框的弹出位置 ...

  6. UWP 播放媒体控件

    最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...

  7. [UWP] 使用SemanticZoom控件

    在写一个看新闻软件的时候,用到了SemanticZoom控件,遇到了一些问题,比如如何根据首字母分类,以及放大视图中有数据的和没数据的通过背景色或前景色区分,幸运的是,all solved. 先来个效 ...

  8. UWP Flyout浮动控件

    看见没,点击"Options"按钮,浮动出来一个界面,这个界面可以用xaml自定义. 如果要点击的控件又Flyout属性那么,可以直接按照下面用 <Button Conten ...

  9. Win10系列:JavaScript 控件的使用

    向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...

随机推荐

  1. 控制结构(9) 管道(pipeline)

    // 上一篇:线性化(linearization) // 下一篇:指令序列(opcode) 最近阅读了酷壳上的一篇深度好文:LINUX PID 1 和 SYSTEMD.这篇文章介绍了systemd干掉 ...

  2. 201521123080《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 在covnertS ...

  3. 201521123118《java程序设计》第一周学习总结

    1. 本周学习总结 根据学习的过程中,虽然听学习过的人说过,c语言和java语言差不多,学习过c语言 在学java会比较容易,但是这一周发现,java和c还是有一些差别的: java语言是面向对象的语 ...

  4. 201521123093 java 第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  5. 《JAVA程序设计》第10周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fin ...

  6. 201521123054 《Java程序设计》 第十周学习总结

    1. 本周学习总结 2. 书面作业 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 无论是否抛出异常,也无论从什么地方返回,finally语句 ...

  7. JavaSE(十)之Map总结

    上一篇是总结了Collection接口的各种实现类,这一篇我将分享的是Map的总结,希望大家点评! 一.Map接口 1.1.为什么Collection不能满足集合的所有功能? Collection接口 ...

  8. Mybatis第二篇【CRUD、分页】

    完成CRUD操作 我们在上一篇中已经简单知道了Mybatis是怎么使用的以及工作流程了,这次我们使用Mybatis来完成CRUD的操作,再次巩固Mybatis的开发步骤以及一些细节 包与类之间的结构 ...

  9. 工作总结--如何定位web系统前后台的bug,以及bug分析/测试感想

    对于web项目前台和后台bug定位分析:一. 系统整体了解 懒企鹅营销服务平台用的架构:web前端: Bootstrap 3.0 组件丰富,兼容性好,界面美观 Server端: jsp+Servlet ...

  10. python实例编写(2)--等待,一组对象,层级元素,frame对象处理

    一.设置等待 #coding=utf-8 from selenium import webdriver from selenium.webdriver.support.ui import WebDri ...