Windows App开发之编辑文本与绘制图形

刺骨的言语ヽ痛彻心扉 2022-03-30 13:26 112阅读 0赞

# 编辑文本及键盘输入 #

相信大家都会使用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中的，由于在容器控件中应用主题样式时。其全部的子对象也都会继承下来。

## 情节提要动画 ##

就像我们前面介绍的定义样式资源一样，我们也能够将动画设为资源。

<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究竟是什么呢？看看下图就知道了。

![这里写图片描写叙述][20150403165004104]

和Rectangle相似，Border也能够创建矩形，并且后者还能够有自对象以及会自己主动调整大小。前者仅仅能有固定的大小哦。

## Ellipse ##

看到这个名字大家应该都知道是什么意思吧，假设要定义成圆的话让Height和Width属性相等就可以。

那童鞋们都知道ProgressRing是由6个Ellipse组成的吗，RadioButton也是由2个同心的Ellipse组成的哦。

## Polygon ##

Polygon则显得比較自由，仅仅须要定义出各个顶点。它就会将这些点连接起来。

那么我们可能会有疑问，需不须要确定图形的起始点和终点呢？答案是不用的，由于Polygon会自己主动将终点和起始点连接起来（它会假设图形是闭合的）。

![这里写图片描写叙述][20150403165436621]

假设要在后台C\#文件里来写的话呢，原本的Point则由PointCollection来定义全部点后加入到一起。

## Line ##

Line的使用也比較简单，但有一点要注意，必须设置好Stroke和StrokeThickness的属性值，否则Line就不会显示出来。原因非常easy。由于它是直线。

![这里写图片描写叙述][20150403170359857]

## Path ##

最后上台的自然是最厉害的啦。先上图。

![这里写图片描写叙述][20150403171848294]

前两个属性用过多次了。Data却还挺复杂的。这里有3个命令，M、C、H和V。假设按英文来记可能会easy些吧，各自是：Move、Control、Horizontal和Vertical。

那么，重头戏来了。先看图^\_^

![这里写图片描写叙述][20150403181114898]

接着上代码。

这张图花了我好久时间呢。希望大家也都会画。尽管作用不大，只是花着玩玩也不错。

![这里写图片描写叙述][20150403182002338]

我在图上大概加了一些标注啦。另外RectangleGeometry的Rect属性有2个值，后者是相对于前者添加的长度哦。

最难的部分是BezierSegment，也就是贝赛斯曲线，当中StartPoint和Point3分别为起点和终点，而Point1和Point2不是路径哟，仅仅是给曲线的一个參考偏移方向。

详细大家能够上维基百科看看。

# 画笔与图像 #

画笔想必大家都不陌生，这里系统的介绍一下好了。先来介绍纯色画笔。

## 纯色画笔 ##

最简单的纯色画笔就是已经定义好名字的啦。比方Red和Green这样的，据说一共同拥有256种已命名的，所以基本已经够用啦。XAML解析器会自己主动将这些颜色名称链接到Color结构。

还有就是传说中的十六进制颜色值，它能够定义精确的24位颜色值。当中有8位用于SolidColorBrush。例如以下代码所看到的的，alpha=”FF”。红色=”55”，绿色=”00”。蓝色=”88”。

另一种称为属性元素语法。

详细使用方法例如以下，当中Opacity就是透明度咯。

## 渐变画笔 ##

除了纯色画笔外，还有渐变画笔。

小时候学PhotoShop的时候最喜欢渐变画笔了。

LinearGradientBrush会沿着一条称为渐变轴直线来进行渐变以绘制一个区域。我们还是拿Rectangle来做演示样例。

![这里写图片描写叙述][20150403193540897]

通过改变StartPoint和EndPoint的属性值能够创建各种渐变哦，比方垂直和水平方向的渐变，还能够颠倒渐变方向，甚至还能够加快渐变速度呢。

## 直接加入图片 ##

除了用着两种画笔外，还能够直接将图片加入进来呢。

效果例如以下咯，主要是有一张合适的图片啦。

![这里写图片描写叙述][20150403193938442]

既然用到了ImageBrush，那就来看看Image和ImageBrush的差别好了。前者主要用来呈现图像，后者则为其它对象绘制为一个图像。

## Stretch属性 ##

对于Image，我们能够来拉伸图像。也就是Stretch属性：

None：图像不经过拉伸。假设源图像比所留给Image的区域大。那么就会被剪切。  
Uniform：依照纵横比来缩放图像。  
UniformToFill：依照纵横比来填满全部区域，这意味着可能会有一部分不可见。  
Fill。由于不保留纵横比而填满屏幕，所以图像部分全部可见，但会产生画面变形（失真）。  
详细效果见下图（来源于网络）。

![这里写图片描写叙述][20150403194838016]

## Clip属性 ##

用Clip属性能够对图像进行剪裁，Rect属性在上一篇博客中用过很多次。前2个值为起始点的X轴和Y轴坐标，后2个值为终点的X轴和Y轴坐标。

Image和ImageBrush能处理的图像格式有例如以下几种：

JPEG XR  
图标（ICO）  
位图（BMP）  
图像交换格式（GIF）  
联合图像专家组（JPEG）  
可移植网络图像（PNG）  
标记图像文件格式（TIEF）

[20150403165004104]: /images/20220330/041b2d975ac64d0eadcc803fb12d68b6.png
[20150403165436621]: /images/20220330/04b2af859560481bbd4b2d857c159ae4.png
[20150403170359857]: /images/20220330/4e6973d8ab6e4aaface2ba5656355910.png
[20150403171848294]: /images/20220330/a7a93351c3ed4de38d67ad71d2dc8c7e.png
[20150403181114898]: /images/20220330/112249761d9a47668946b69a030b0c7d.png
[20150403182002338]: /images/20220330/2898ba0169a24c93822d448e148c844c.png
[20150403193540897]: /images/20220330/796b30846807447fa35ab66e4b3154d8.png
[20150403193938442]: /images/20220330/924fc0db5e614780a6817c4b1aa47503.png
[20150403194838016]: /images/20220330/20b1e08270964081898c5718f103b84d.png