相信经历过Windows Insider的人对下面这个图都不会陌生,偶然看见邹欣老师领导的微软团队写了篇用xaml绘制这个静态页面,那咱也来亲手实验一番。唔。。。请做和放宽!


首先我们来看看xaml代码。

     <Grid Background="Black">
<Grid>
<TextBlock Margin="" FontSize="" Foreground="White" HorizontalAlignment="Center" FontFamily="Microsoft YaHei">请坐和放宽</TextBlock>
<Grid Height="" Width="" >
<Ellipse Stroke="Gray" StrokeThickness="3"></Ellipse>
<Ellipse Stroke="DeepSkyBlue" StrokeThickness=""
StrokeDashArray="61.89, 1000"
RenderTransformOrigin="0.5, 0.5">
<Ellipse.RenderTransform>
<RotateTransform Angle="-90" />
</Ellipse.RenderTransform>
</Ellipse>
<TextBlock FontSize="" FontFamily="Microsoft YaHei" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">%</TextBlock>
</Grid>
</Grid>
</Grid>

Shape.StrokeDashArray属性

Windows.UI.Xaml.Shapes.Shape基类,以及继承自它的Ellipse、Line、Path、Rectangle等类,都具有一些Stroke****之名的属性,可以实现描边效果。其中有一个比较特别的StrokeDashArray属性,它能实现虚线型的描边效果,加以扩展的话是我们实现重复性UI绘制的好帮手。

在XAML中,这一属性表现为形如”1,2,3,4”的字符串格式,而本质上它是一个DoubleCollection。其中的数值两两配对,依次表示虚线的短划线和空白间隔的长度,并且能周期性地出现。如果数值个数只有奇数个,那么匹配不满的那一组中,空白间隔的长度将和短划线的长度一致。

首先,将Grid的背景设置为黑色。然后画出两个圆形,一个圆形设置为灰色,StrokeThickness属性设置为3,将第二个圆设置为蓝色,StrokeThickness属性设置为3,此时圆形被蓝色填满,这是"进度100%"的效果。那么写这么一句StrokeDashArray="61.89, 1000"。此时我们可以看到一个坐和放宽就绘制出来了,是不是很简单。

【Win10开发】绘制静态UI的更多相关文章

  1. Win10 UWP开发中的重复性静态UI绘制小技巧 2

    小技巧1 地址:http://www.cnblogs.com/ms-uap/p/4641419.html 介绍 我们在上一篇博文中展示了通过Shape.Stroke族属性实现静态重复性UI绘制,使得U ...

  2. WP & Win10开发:实现ListView下拉加载的两种方法

    1.通过ListView控件的ContainerContentChanging方法.该方法在列表项被实例化时触发,在列表项最后一个项目实例化的时候触发刷新数据逻辑就可以实现下拉加载了. 代码如下:// ...

  3. iOS开发中静态库之".framework静态库"的制作及使用篇

    iOS开发中静态库之".framework静态库"的制作及使用篇 .framework静态库支持OC和swift .a静态库如何制作可参照上一篇: iOS开发中静态库之" ...

  4. iOS开发中静态库制作 之.a静态库制作及使用篇

    iOS开发中静态库之".a静态库"的制作及使用篇 一.库的简介 1.什么是库? 库是程序代码的集合,是共享程序代码的一种方式 2.库的类型? 根据源代码的公开情况,库可以分为2种类 ...

  5. iOS开发之静态库(五)—— 图片、界面xib等资源文件封装到静态框架framework

    编译环境:Macbook Air + OS X 10.9.2 + XCode5.1 + iPhone5s(iOS7.0.3) 一.首先将资源文件打包成bundle 由于bundle是静态的,所以可以将 ...

  6. Win10开发:学习资料汇总(转)

    距离2015.07.29 Windows 10 正式发布已经过去一个多月了.在那之前微软也早已退出Windows 10 SDK,距离目前已经半年过去了. 在Windows8/WindowsPhone时 ...

  7. WP8.1&Win10开发:TextBox获取和失去焦点小技巧

    获取焦点:用Focus方法让Textbox获取焦点.代码示例:textbox.Focus(FocusState.Pointer); 失去焦点:让其他控件获取焦点,如Textblock控件(注意要将Te ...

  8. 【Linux程序设计】之Linux库函数的使用,多文件程序开发,静态与共享函数

    这个系列的博客贴的都是我大二的时候学习Linux系统高级编程时的一些实验程序,都挺简单的.贴出来纯粹是聊胜于无. 实验题目:Linux基础程序设计综合实验 实验目的:熟悉并掌握Linux库函数的使用, ...

  9. 50个Android开发人员必备UI效果源码[转载]

    50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...

随机推荐

  1. ThoughtWorks代码挑战——FizzBuzzWhizz

    很久没发表过文章了,今天看到一篇文章 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏(C#解法) 看到LZ的2B青年代码,实在是惨不忍睹,故写篇文章来探讨下这类 ...

  2. 【完全开源】百度地图Web service API C#.NET版,带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  3. 飞鱼(FlyFish)——便捷的原型在线制作工具

    关于项目原型制作,小菜先前写过一篇文章<FastUI快速界面原型制作工具>,只不过那个是用C#写的原型制作工具,但是感觉用C#写起来比较费力,而且也不太好用,经过高人指点,茅塞顿开,决定重 ...

  4. cache4j轻量级java内存缓存框架,实现FIFO、LRU、TwoQueues缓存模型

    简介 cache4j是一款轻量级java内存缓存框架,实现FIFO.LRU.TwoQueues缓存模型,使用非常方便. cache4j为java开发者提供一种更加轻便的内存缓存方案,杀鸡焉用EhCac ...

  5. jieba.NET与Lucene.Net的集成

    首先声明:我对Lucene.Net并不熟悉,但搜索确实是分词的一个重要应用,所以这里还是尝试将两者集成起来,也许对你有一参考. 看到了两个中文分词与Lucene.Net的集成项目:Lucene.Net ...

  6. 老司机学Xamarin系列总目录

    Xamarin开发环境及开发框架初探 Xamarin Forms开发框架二探 (Prism vs MvvmCross) Xamarin Forms开发框架之MvvmCross插件精选 Xamarin开 ...

  7. .NET 基础 一步步 一幕幕 [注释、命名规则、访问修饰符、数据类型、常量、变量]

    注释.命名规则.访问修饰符.数据类型.常量.变量 话说一个不会写注释的程序猿的不是一个好吃货,我们本篇就从注释开始说起好了. 在C#中有三种注释: 第一种:单行注释  以//开头,后面的就是注释内容 ...

  8. 操作数据库mysql

    显示表结构 desc 表 显示数据库信息 show  create database 数据库名 show create table 表名

  9. Atitti 存储引擎支持的国内点与特性attilax总结

    Atitti 存储引擎支持的国内点与特性attilax总结 存储引擎处理的事情: · 并发性:某些应用程序比其他应用程序具有很多的颗粒级锁定要求(如行级锁定). · 事务支持:并非所有的应用程序都需要 ...

  10. 安装Oracle 12c精简客户端(不带数据库)

      注:Oracle客户端向下兼容,故也可以连接11g的数据库 下载页面皆为:http://www.oracle.com/technetwork/topics/winsoft-085727.html ...