win10 uwp 绘图 Line 控件使用
本文主要讲一个在绘图中,我们会有一个基础的控件,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 控件使用的更多相关文章
- UWP 用Thumb 控件仿制一个可拖动悬浮 Button
参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...
- FastReport.Net使用:[17]线(Line)控件使用
FastReport中,线(Line)控件怎么用?怎么画一条美观的线? 认识Line控件 1.线(Line)控件包含于形状(Shape)控件中,有5个可选项,一个标准线和四个对角线,其实都是同一种线, ...
- UWP开发之控件:用WebView做聊天框
目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...
- UWP自动填充控件AutoSuggestBox小优化
UWP提供的AutoSuggestBox本身非常好用,在项目中经常用到,但是当我们使用时发现一下不人性化的设置,例子1如下: <Page x:Class="SelfInkCanvas. ...
- [UWP]实现Picker控件
1. 前言 在WPF中,很多打开下拉框(Popup或Flyout)选择一个结果值的控件,除了ComboBox等少数例外,这种控件都以-Picker做名称后缀.因为要打开关闭下拉框和计算下拉框的弹出位置 ...
- UWP 播放媒体控件
最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...
- [UWP] 使用SemanticZoom控件
在写一个看新闻软件的时候,用到了SemanticZoom控件,遇到了一些问题,比如如何根据首字母分类,以及放大视图中有数据的和没数据的通过背景色或前景色区分,幸运的是,all solved. 先来个效 ...
- UWP Flyout浮动控件
看见没,点击"Options"按钮,浮动出来一个界面,这个界面可以用xaml自定义. 如果要点击的控件又Flyout属性那么,可以直接按照下面用 <Button Conten ...
- Win10系列:JavaScript 控件的使用
向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...
随机推荐
- 展示博客(Beta阶段)
展示博客 0x00 团队成员 成员 博客地址 简介 黄建英 http://www.cnblogs.com/smilehjy/ beta阶段的新成员,负责前端界面调整 谢晓萍 http://www.cn ...
- 201521123057 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...
- 201521123095《java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结上课内容. 对于一个系统中,对于名词大多为类或属性,对于动词大多为方法. 1.3 注释的应用 使用类的注释与 ...
- 201521123061 《Java程序设计》第一周学习总结
1.本周学习总结 (1) Java的来历与版本演进 最早是Sun公司绿色项目Green Project 中所撰写的Strar7应用程序的程序语言: (2)Java根据应用领域分为三大平台:Java S ...
- 201521123087 《Java程序设计》第11周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问)1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么 ...
- 域名解析>>"记录类型" 说明
(1)A (Address) 记录是用来指定主机名(或域名)对应的IP地址记录. 说明:用户可以将该域名下的网站服务器指向到自己的web server上.同时也可以设置自己域名的二级域名. (2)MX ...
- [Android FrameWork 6.0源码学习] View的重绘过程之Draw
View绘制的三部曲,测量,布局,绘画现在我们分析绘画部分测量和布局 在前两篇文章中已经分析过了.不了解的可以去我的博客里找一下 下面进入正题,开始分析调用以及函数原理 private void pe ...
- Jquery第三篇【AJAX 相关的API】
前言 前面我们已经学了讲解了Jquery的选择器,关于DOM 的API还有事件的API.本博文需要讲解Jquery对AJAX的支持- 我们在开始使用JavaScript学习AJAX的时候,创建异步对象 ...
- 【轉】使用jQuery播放/暂停 HTML5视频
jQuery不可以使用play()方法,但js是可以的: document.getElementById('movie1').play(); 解决方法:play并不是jQuery的函数,而是DOM ...
- 深入理解计算机系统chapter1
---恢复内容开始--- 预处理器+编译器+汇编器+链接器=编译系统 运行hello程序 操作系统: 无论是在单核还是多核系统中,一个CPU看上去都在并发的执行多个进程,这是通过处理器在进程间切换来实 ...