Windows App开发之编辑文本与绘制图形
编辑文本及键盘输入
相信大家都会使用TextBox,但假设要让文本在TextBox中换行该怎么做呢?将TextWrapping属性设置为Wrap,将AcceptsReturn属性设置为True就好咯。
PasswordBox非常明显就是一个password框了。和其它的控件相比其有2个特殊之处。一个是其能够用MaxLength来控制最大的长度,一个是用PasswordChanged来捕捉password的改名。显然比方QQpassword的MaxLength就是16位了,而PasswordChanged能够用来监測比方用户设置的password和username是否相同。
大家在用电脑或者手机输入时偶尔键盘是出来的26字母拼音或是26字母英文亦或是10个数字对吧。那这个是怎么实现的呢?相同也是非常easy的噢!
直接在TextBox上用InputScope属性就好啦,比方有Default、TelephoneNumber、EmailSmtpAddress、Url、Search、Chat等能够设置。
除了在XAML中设置InputScope属性外,也能够在后台C#文件里设置。
InputScope inputScope = new InputScope();
InputScopeName inputScopeName= new InputScopeName();
inputScopeName.NameValue = InputScopeNameValue.TelephoneNumber;
inputScope.Names.Add(scopeName);
phoneNumberTtBox.InputScope = scope;
在这段代码中,phoneNumberTtBox是TextBox的名字哟。或者也能够简写这段代码的:
phoneNumberTtBox.InputScope = new InputScope()
{
Names = {new InputScopeName(InputScopeNameValue.TelephoneNumber)}
};
除此之外,我们还能够给RichEditBox控件设置IsSpellCheckEnabled属性让这个文本控件启用拼写检查。另外值得注意的是TextBox控件的拼写检查仅仅在Windows Phone上启用,在Windows上市禁用的。而文本预測属性在TextBox和RichEditBox以及在Windows和Windows Phone上都是可用的哦,也就是IsTextPredictionEnabled。
情节提要动画与关键帧动画
简单动画演示样例
由于以下这些Rectangle都是在ItemsControl中的,由于在容器控件中应用主题样式时。其全部的子对象也都会继承下来。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ItemsControl Grid.Row="1" x:Name="itemsControlRectangle">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Rectangle Fill="Red" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Wheat" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Yellow" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Blue" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Green" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Gray" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="White" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Gainsboro" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Magenta" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="CadetBlue" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="NavajoWhite" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Khaki" Width="100" Height="100" Margin="12"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
情节提要动画
就像我们前面介绍的定义样式资源一样,我们也能够将动画设为资源。
<Page.Resources>
<Storyboard x:Name="storyboardRectangle" >
<DoubleAnimation
Storyboard.TargetName="rectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</Page.Resources>
<Grid>
<Rectangle x:Name="rectangle"
Width="200" Height="130" Fill="Blue"/>
</Grid>
在理解这些代码意思之前,还是先让动画跑起来,你能够加上一个Button并设置其Click事件。也能够在MainPage方法下直接写例如以下代码:
storyboardRectangle.Begin();
执行应用后。Rectangle的透明度就会渐渐的消失而后出现。
在上面这个演示样例中,我们为Rectangle的Opacity(透明度)属性设置了动画。Storyboard通常存放在
Storyboard.TargetProperty="(rectangle.Fill).(SolidColorBrush.Color)"
假设你已经定义了TargetName属性为rectangle。那么Fill前的rectangle和点都能够去掉。
左右两个括号都是必要的,它表示一个属性的名称。中间的点意味着要先获取第一个括号的属性。也就是设置动画的相应对象,然后进入到其对象模型中。此处是Color。官网上还给出了其它演示样例:
(UIElement.RenderTransform).(TranslateTransform.X) 应用到RenderTransform上。并创建TranslateTransform的X值的动画
(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color) 应用到Fill上。并在LinearGradientBrush的GradientStop内创建Color的动画。这里方括号内的数字表示索引,表示集合中的一项,索引从0開始
(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) 应用到RenderTransform上,并创建TranslateTransform
我们还注意到。动画中还有From和To属性。顾名思义,From表示动画的開始值。To表示结束值。
假设未定义From值。那么动画起始值为该对象属性的当前值。
假设想要设置一个和起始值相对的结束值,建议使用By属性。
动画在这3个属性中至少应该设置一个。否则动画便不会更改值。且这3个属性也无法同一时候存在。
我们还能够用设置AutoReverse属性为真以使动画才结束后自己主动进行反向播放,但反向播放完后不会再继续播放。
设置RepeatBehavior属性为“1x”表示动画的播放次数,或者也能够直接设为“Forever”,让其永远播放。
假设动画较多的情况下。我们哈能够设置BeginTime来使不同的动画错开播放。
关键帧动画
什么是关键帧动画?
关键帧动画建立在上文的情节提要动画概念智商,它令动画沿着一条时间线来逐步达到多个目标值。也就是说假设要让上文的Fill属性从Blue变化到Lime之间还能够令其先变化到Red或Orange等。
更为巧妙的是,你能够同一时候指定不同的属性来制作复杂的动画。
假设略微会一点Flash,对于关键帧的概念肯定没有问题。
1.线性关键帧
我们为动画设置一个KeyTime来表示间隔的时间戳,比如我们能够设置4个时间戳为:KeyTime=”0:0:0”、”0:0:2”、”0:0:8”、”0:0:9”,能够看到动画在中间部分时跳跃性非常之大。
但其动画都是缓慢变化的,由于这是线性的,另一种第二种关键帧它会让动画在时间戳上产生突变而不是渐变。这就是离散式关键帧(就像概率论中的离散型和连续型一样)。
2.样条关键帧
其主要通过KeySpline属性来建立过渡,比如KeySpline=”0.1,0.1 0.7.0.8”,这里有两个点,分别相应贝塞尔曲线的第一个控制点和第二个控制点。描写叙述了动画的加速情况。
关于贝塞尔曲线,建议大家看看维基百科,在图形化编程中非经常常使用。
3.缓动关键帧
这样的模式就更加高级了。它由多个提前定义好的数学公式来控制。
以下是的缓动函数列表来源于网络:
BackEase:动画開始在指定路径上运动前略微收缩动画的执行。
BounceEase:创建回弹效果。
CircleEase:使用圆函数创建加速或减速的动画。
CubicEase:使用函数 f(t) = t3 创建加速或减速的动画。
ElasticEase:创建一个动画,模拟弹簧的来回振荡运动。直到它达到停止状态。
ExponentialEase:使用指数公式创建加速或减速的动画。
PowerEase:使用公式 f(t) = tp 创建加速或减速的动画,当中 p 等于 Power 属性。
QuadraticEase:使用函数 f(t) = t2 创建加速或减速的动画。
QuarticEase:使用函数 f(t) = t4 创建加速或减速的动画。
QuinticEase:使用函数 f(t) = t5 创建加速或减速的动画。
SineEase:使用正弦公式创建加速或减速的动画。
绘制图形
Rectangle
我们开篇先介绍一个之前用过。也是比較简单的Rectangle。简单的矩形就仅仅用定义长和宽了,但假设要有圆角的话呢。用RadiusX和RadiusY就好。那么RadiusX和RadiusY究竟是什么呢?看看下图就知道了。
<Rectangle Fill="Yellow" Width="300" Height="200" Stroke="Blue"
StrokeThickness="10" RadiusX="80" RadiusY="40"/>
和Rectangle相似,Border也能够创建矩形,并且后者还能够有自对象以及会自己主动调整大小。前者仅仅能有固定的大小哦。
Ellipse
看到这个名字大家应该都知道是什么意思吧,假设要定义成圆的话让Height和Width属性相等就可以。
那童鞋们都知道ProgressRing是由6个Ellipse组成的吗,RadioButton也是由2个同心的Ellipse组成的哦。
<Ellipse Fill="Blue" Height="200" Width="350"/>
Polygon
Polygon则显得比較自由,仅仅须要定义出各个顶点。它就会将这些点连接起来。
那么我们可能会有疑问,需不须要确定图形的起始点和终点呢?答案是不用的,由于Polygon会自己主动将终点和起始点连接起来(它会假设图形是闭合的)。
<Polygon Fill="Green" Points="0,0,100,0,100,100,0,100 "/>
假设要在后台C#文件里来写的话呢,原本的Point则由PointCollection来定义全部点后加入到一起。
Line
Line的使用也比較简单,但有一点要注意,必须设置好Stroke和StrokeThickness的属性值,否则Line就不会显示出来。原因非常easy。由于它是直线。
<Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>
Path
最后上台的自然是最厉害的啦。先上图。
<Path Stroke="Gold" StrokeThickness="7"
Data="M 0,0 C 100,200 50,200 40,150 H 200 V 100 "/>
前两个属性用过多次了。Data却还挺复杂的。这里有3个命令,M、C、H和V。假设按英文来记可能会easy些吧,各自是:Move、Control、Horizontal和Vertical。
那么,重头戏来了。先看图^_^
接着上代码。
<Path Stroke="Black" StrokeThickness="1" Fill="red">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="5,5 180,10" />
<RectangleGeometry Rect="5,5 95,180" />
<RectangleGeometry Rect="90,175 95,180"/>
<RectangleGeometry Rect="5,345 180,10" />
<EllipseGeometry
Center="95, 180" RadiusX="20"
RadiusY="30"/>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="true" StartPoint="50,50">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="100,180"
Point2="125,100" Point3="150,50"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure IsClosed="true" StartPoint="40,310">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="90,180"
Point2="115,250" Point3="140,310"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
这张图花了我好久时间呢。希望大家也都会画。尽管作用不大,只是花着玩玩也不错。
我在图上大概加了一些标注啦。另外RectangleGeometry的Rect属性有2个值,后者是相对于前者添加的长度哦。
最难的部分是BezierSegment,也就是贝赛斯曲线,当中StartPoint和Point3分别为起点和终点,而Point1和Point2不是路径哟,仅仅是给曲线的一个參考偏移方向。
详细大家能够上维基百科看看。
画笔与图像
画笔想必大家都不陌生,这里系统的介绍一下好了。先来介绍纯色画笔。
纯色画笔
最简单的纯色画笔就是已经定义好名字的啦。比方Red和Green这样的,据说一共同拥有256种已命名的,所以基本已经够用啦。XAML解析器会自己主动将这些颜色名称链接到Color结构。
还有就是传说中的十六进制颜色值,它能够定义精确的24位颜色值。当中有8位用于SolidColorBrush。例如以下代码所看到的的,alpha=”FF”。红色=”55”,绿色=”00”。蓝色=”88”。
<Rectangle Width="200" Height="100" Fill="#FF550088" />
另一种称为属性元素语法。
详细使用方法例如以下,当中Opacity就是透明度咯。
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="Yellow" Opacity="0.3" />
</Rectangle.Fill>
</Rectangle>
渐变画笔
除了纯色画笔外,还有渐变画笔。
小时候学PhotoShop的时候最喜欢渐变画笔了。
LinearGradientBrush会沿着一条称为渐变轴直线来进行渐变以绘制一个区域。我们还是拿Rectangle来做演示样例。
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Green" Offset="0.0" x:Name="GradientStop1"/>
<GradientStop Color="Blue" Offset="0.25" x:Name="GradientStop2"/>
<GradientStop Color="Wheat" Offset="0.7" x:Name="GradientStop3"/>
<GradientStop Color="Yellow" Offset="0.75" x:Name="GradientStop4"/>
<GradientStop Color="Gold" Offset="1.0" x:Name="GradientStop5"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
通过改变StartPoint和EndPoint的属性值能够创建各种渐变哦,比方垂直和水平方向的渐变,还能够颠倒渐变方向,甚至还能够加快渐变速度呢。
直接加入图片
除了用着两种画笔外,还能够直接将图片加入进来呢。
<Ellipse Height="100" Width="200">
<Ellipse.Fill>
<ImageBrush ImageSource="9327.jpg"/>
</Ellipse.Fill>
</Ellipse>
效果例如以下咯,主要是有一张合适的图片啦。
既然用到了ImageBrush,那就来看看Image和ImageBrush的差别好了。前者主要用来呈现图像,后者则为其它对象绘制为一个图像。
Stretch属性
对于Image,我们能够来拉伸图像。也就是Stretch属性:
None:图像不经过拉伸。假设源图像比所留给Image的区域大。那么就会被剪切。
Uniform:依照纵横比来缩放图像。
UniformToFill:依照纵横比来填满全部区域,这意味着可能会有一部分不可见。
Fill。由于不保留纵横比而填满屏幕,所以图像部分全部可见,但会产生画面变形(失真)。
详细效果见下图(来源于网络)。
Clip属性
用Clip属性能够对图像进行剪裁,Rect属性在上一篇博客中用过很多次。前2个值为起始点的X轴和Y轴坐标,后2个值为终点的X轴和Y轴坐标。
<Image Source="9327.jpg">
<Image.Clip>
<RectangleGeometry Rect="10,10,100,100"/>
</Image.Clip>
</Image>
Image和ImageBrush能处理的图像格式有例如以下几种:
JPEG XR
图标(ICO)
位图(BMP)
图像交换格式(GIF)
联合图像专家组(JPEG)
可移植网络图像(PNG)
标记图像文件格式(TIEF)
Windows App开发之编辑文本与绘制图形的更多相关文章
- 【万里征程——Windows App开发】控件大集合2
以下再来看看一些前面还没有讲过的控件,只是控件太多以至于无法所有列出来,大家仅仅好举一反三啦. Button 前面最经常使用的控件就是Button啦,Button另一个有意思的属性呢.当把鼠标指针放在 ...
- Windows App开发之文件与数据
读取文件和目录名 这一节開始我们将陆续看到Windows App是如何操作文件的. 在Windows上读取文件名称.目录名 首先我们在XAML中定义一个Button和TextBlock,将读取文件/目 ...
- Windows App开发之经常使用控件与应用栏
控件的属性.事件与样式资源 怎样加入控件 加入控件的方式有多种,大家更喜欢以下哪一种呢? 1)使用诸如Blend for Visual Studio或Microsoft Visual Studio X ...
- Windows App开发之集合控件与数据绑定
为ListView和GridView加入数据 ListView採用垂直堆叠得方式显示数据.而GridView则採用水平堆叠得方式. 长相的话嘛,它们都几乎相同. <Grid Name=" ...
- Windows App开发之集成设置、帮助、搜索和共享
应用设置和应用帮助 "设置"合约 上一节中我们学习了怎样将应用设置保存到本地.这样的方式是通过在App内加入设置选项,这里另一种方式. 微软将其称为"设置"合约 ...
- Windows App开发之应用布局与基本导航
简单演示样例看页面布局和导航 首先依照上一篇博客中的顺序来新建一个项目.新建好之后就点开MainPage.xaml開始写程序了. <Grid Background="{ThemeRes ...
- 【万里征程——Windows App开发】DatePickerFlyout、TimePickerFlyout的使用
已经有挺长时间没有更新这个专栏了,只是刚才有网友私信问我一个问题如今就火速更新上一篇~ 这一篇解说在WP上DataPickerFlyout和TimePickerFlyout的使用.但它们仅仅能在WP上 ...
- 【万里征程——Windows App开发】控件大集合1
加入控件的方式有多种.大家更喜欢哪一种呢? 1)使用诸如 Blend for Visual Studio 或 Microsoft Visual Studio XAML 设计器的设计工具. 2)在 Vi ...
- Windows Phone & Windows App应用程序崩溃crash信息抓取方法
最近有用户反馈,应用有崩溃的情况,可是本地调试却无法重现问题,理所当然的,我想到了微软的开发者仪表盘,可以查看一段时间内的carsh记录,不过仪表盘生成carsh记录不是实时的,而且生成的报告查看非常 ...
随机推荐
- 关于yii2 的db log 日志 错误处理errorHandler
log 通过配置Web.config来完成 1 数据库增加 ‘前缀_log’表 2 配置Web.config 'bootstrap' => ['log'], 'components' => ...
- 洛谷 P1049 装箱问题【正难则反/01背包】
题目描述 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30,每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使箱子的剩余 ...
- 51nod 1420 数袋鼠好有趣【贪心】
1420 数袋鼠好有趣 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 有n只袋鼠.每只袋鼠的大小用一个整数表示. ...
- Sql Jions 的简易理解
Sql Jions 的简易理解 Select * from TableA A left jion TableB B on A.key = B.key Select * from TableA ...
- cdq分治浅谈
$cdq$分治浅谈 1.分治思想 分治实际上是一种思想,这种思想就是将一个大问题划分成为一些小问题,并且这些小问题与这个大问题在某中意义上是等价的. 2.普通分治与$cdq$分治的区别 普通分治与$c ...
- (转)Limboy:自学 iOS 开发的一些经验
不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔了好久才重新耐下心去啃一啃.啃了一阵,觉得大概有了点概念,看到 Cocoa 那么多的 Class,又懵了, ...
- POJ 2886 Who Gets the Most Candies? (线段树)
[题目链接] http://poj.org/problem?id=2886 [题目大意] 一些人站成一个圈,每个人手上都有一个数字, 指定从一个人开始淘汰,每次一个人淘汰时,将手心里写着的数字x展示 ...
- 2.3多线程(java学习笔记)synchronized关键字
一.为什么要用synchronized关键字 首先多线程中多个线程运行面临共享数据同步的问题. 多线程正常使用共享数据时需要经过以下步骤: 1.线程A从共享数据区中复制出数据副本,然后处理. 2.线程 ...
- noip2017集训测试赛(十一)Problem C: 循环移位
题面 Description 给定一个字符串 ss .现在问你有多少个本质不同的 ss 的子串 t=t1t2⋯tm(m>0)t=t1t2⋯tm(m>0) 使得将 tt 循环左移一位后变成的 ...
- linux 自动删除n天前文件
现在系统每天生成一个日期文件夹,并压缩上传到ftp服务器,造成目录下文件太多,所以决定写个定时删除文件的任务 写脚本文件 find /home/data -mtime +90 -name " ...