UWP图形和wpf变化不多

一般用到有椭圆、长方形、多边形、线

不过如果用的好,可以做出很漂亮的界面

一般使用画图都是使用Shape 类,Shape 类具有一个与其关联的画笔并可以呈现到屏幕,包括 Line、Ellipse、Rectangle、Polygon、Polyline

画圆

在uwp没有圆这东西,我们可以用长和宽一样的Ellipse作为圆

<Ellipse Height="200" Width="200" Fill="Black" />

如果长和宽不一样,那么就看起来是Ellipse

矩形

Rectangle要指定指定 Width、Height 和 Fill

<Rectangle Height="200" Width="200" Fill="Black"/>

圆角矩形

指定RadiusX 和 RadiusY ,RadiusX 和 RadiusY最大可以是宽高一半

<Rectangle Height="200" Width="200" Fill="Black" StrokeThickness="3" RadiusX="10" RadiusY="10"/>



我们有一个新的画圆的方法

RadiusX =Width/2

RadiusY =Height/2

<Rectangle Height="200" Width="200" Fill="Black" StrokeThickness="3" RadiusX="100" RadiusY="100" />

如果不要填充,那么使用 Border

多边形

Polygon 是通过任意数量的点来定义边的形状。边通过用直线将点一个一个连接起来(第最后一个点与第一个点相连)而创建。Points 属性定义组成边的点集。在 XAML 中,使用逗号分隔的列表定义点。在代码隐藏文件中,使用 PointCollection 定义各个点,并将每个点作为一个 Point 值添加到集合中。

<Polygon Fill="Black" Points="0,100,200,100,200,0,0,0"/>

线

设置X1 Y1和X2 Y2,如果不设置X1 Y1,X1 Y1=0

如果没有设置Stroke,线会不可见

<Line X1="10" Y1="10" X2="100" Y2="100" Stroke="Black"/>



设置StrokeThickness

<Line X1="10" Y1="10" X2="100" Y2="100" Stroke="Black" StrokeThickness="10"  Margin="10,10,10,10"/> 

path

这个是最能做漂亮的动画

应用可以参照http://www.cnblogs.com/isaboy/p/customprogress.html

参考:https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/mt280380.aspx

UWP 绘制图形的更多相关文章

  1. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  3. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  4. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

  5. 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)

    目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...

  6. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  7. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  8. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  9. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. 201521123082 《Java程序设计》第1周学习总结

    201521123082 <Java程序设计>第1周学习总结 标签(空格分隔): Java 1. 本周学习总结 0.初步了解Java语言及其发展历史和过程,同时也初步了解了Java具有跨平 ...

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

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

  3. 201521123030 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4 ...

  4. 201521123065 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 Q1:代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  5. 201521123095 《Java程序设计》第11周学习总结

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

  6. Java课程设计——学生基本信息管理

    1.团队名称.团队成员介绍 团队名称:学生基本信息管理设计小组 团队成员:花雨芸(组长)--负责管理界面的编写 丁蓉(组员)--负责登陆的设计编写 2.项目git地址 https://git.osch ...

  7. D3--数据可视化实战总结

    d3理解 标签(空格分隔): 未分类 1.绑定数据 [x] 定义:通过循环的方式将数据绑定在dom元素上,每个数据对应一个元素,所以这个数据的值就能来设定dom元素的width,height,x,y坐 ...

  8. HTTP第一篇

    为什么要学HTTP? 我们绝大多数的Web应用都是基于HTTP来进行开发的.我们对Web的操作都是通过HTTP协议来进行传输数据的. HTTP的诞生主要是为了能够让文档之间相互关联,形成超文本可以互相 ...

  9. Android 之JDBC

    JDBC(Java DataBase Connectivity)是使用 Java 存取数据库系统的标准解决方案,它将不同数据库间各自差异API与标准 SQL语句分开看待,实现数据库无关的 Java操作 ...

  10. Linux 内核模块程序结构

    1.内核加载函数 即我们常说的内核入口函数,当内核被加载的时候调用,在内核入口函数中多进行设备的注册和初始化,其中最常用的莫过于module_init().insmod xxx.ko的时候调用. 通常 ...