# 編輯文本及鍵盤輸入 相信大家都會使用TextBox，但如果要讓文本在TextBox中換行該怎么做呢？將TextWrapping屬性設置為Wrap，將AcceptsReturn屬性設置為True就好咯。 PasswordBox很明顯就是一個密碼框了，和其他的控件相比其有2個特殊之處，一個是其可以用MaxLength來控制最大的長度，一個是用PasswordChanged來捕捉密碼的改名。顯然比如QQ密碼的MaxLength就是16位了，而PasswordChanged可以用來監測比如用戶設置的密碼和用戶名是否相同。 大家在用電腦或者手機輸入時偶爾鍵盤是出來的26字母拼音或是26字母英文亦或是10個數字對吧，那這個是怎么實現的呢？同樣也是很簡單的噢！直接在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就不會顯示出來。原因很簡單，因為它是直線。 ~~~ <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。如果按英文來記可能會容易些吧，分別是：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）