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. GUI(国际象棋棋盘)

    package com.niit.javagui; import java.awt.BorderLayout; import java.awt.Color; import java.awt.GridB ...

  2. 团队作业4——第一次项目冲刺(Alpha版本) Day2

    1.Day 2 站立式会议: 2.leangoo任务分截图: 3.会议记录及任务分配: 队员 今日进展 明日安排 林燕 完善逻辑架构框架,继续学习微信开发 完成4.24随笔 王李焕 初步总结微信开发的 ...

  3. 201521123019 《java程序设计》 第14周学习总结

    1. 本章学习总结 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) ...

  4. 201521123096《Java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  5. SharePoint备份文件

    stp文件:SharePoint的.stp文件   在做一个和SharePoint有关的项目时,由于对SharePoint的unfamiliar,所以客户发了几个后缀为.stp的文件将我纳闷了半天,不 ...

  6. Eclipse: eclipse文本文件编码格式更改(GBK——UTF-8)

    Eclipse中设置编码的方式 Eclipse工 作空间(workspace)的缺省字符编码是操作系统缺省的编码,简体中文操作系统 (Windows XP.Windows 2000简体中文)的缺省编码 ...

  7. Hibernate注解配置与XML配置区别

    注解配置的方式与xml很很多类似: 首先是需要加入4个jar包:hibernate-commons-annotations.jar . hibernate-annotations.jar.ejb3-p ...

  8. java控制台输入输出

    一.比较传统的输入方法用输入流,得到字符串后要另行判断.转换 案例 import java.io.BufferedReader; import java.io.IOException; import ...

  9. Hadoop的safeMode

    当集群启动的时候,会首先进入到安全模式.系统在安全模式下,会检查数据块的完整性.假设我们设置的副本数(即参数dfs.replication)是5,那么在dataNode上就应该有5个副本存在,假设只存 ...

  10. Apache Spark 2.2.0 中文文档 - Spark SQL, DataFrames and Datasets Guide | ApacheCN

    Spark SQL, DataFrames and Datasets Guide Overview SQL Datasets and DataFrames 开始入门 起始点: SparkSession ...