Hi,
各位園主和博客園的工作人員們，先預祝大家春節快樂！
想任性地給大家送一份春節的禮物，但是我們程序員沒多少錢，真是送不起啊，可我們有技術啊，於是我們特地用飛快的速度制作了一個“微軟對聯”App，2月10日在Windows Phone Store上線了。
link在這里，請大家下載后娛樂一下：
與別的對聯App不同的是，由於在后台有微軟MSRA的電腦對聯系統的技術支持，用戶可以自己擬定上聯，然后讓電腦給你出一些下聯的建議，你可以做進一步的修改，然后再讓電腦給你出一些橫批的建議，你當然還可以修改，最后出一幅令自己滿意的對聯！
下面簡單介紹一下這個App的開發過程，供大家參考。
主頁
主頁上有四個動畫，可以先聲奪人地讓用戶眼前一亮，自然會對你的App產生好感。
第一個動畫：福字在中央從小到大360度旋轉着出現，動畫定義如下：
<Storyboard x:Name="sb_FuRotate"> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" From="0" To="360" Duration="0:0:1"/> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" From="0" To="1" Duration="0:0:1"/> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" From="0" To="1" Duration="0:0:1"/> </Storyboard>
這是三個小動畫的組合：
1）做360度平面旋轉
2）X軸拉伸，從0到1，也就是從無到原始大小
3）Y軸拉伸，從0到1
第二個動畫：五個菜單從左側順序飛入，動畫定義如下:
<Storyboard x:Name="sb_MenuFlyIn" Completed="sb_Fly_Completed"> <DoubleAnimation Storyboard.TargetName="menu1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" From="-250" To="0" Duration="0:0:0.20"/> <DoubleAnimation Storyboard.TargetName="menu2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.10"/> <DoubleAnimation Storyboard.TargetName="menu3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.20"/> <DoubleAnimation Storyboard.TargetName="menu4" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.30"/> <DoubleAnimation Storyboard.TargetName="menu5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.40"/> </Storyboard>
每個子動畫的參數都一樣，都是從-250的位置，也就是頁面左側外部，在X軸（橫向）進入頁面。但是如果一起進入效果不好，所以做了一個時間差，從第二個菜單開始，用BeginTime=”0:0:0.10”設置了一個延遲，也就是每隔10毫秒，飛入一個菜單。
第三個動畫：福字從中央的位置飛到頁面右下角，並作為Setting Page的入口可以點擊，動畫定義如下：
<Storyboard x:Name="sb_FuMoveDown" Completed="sb_FuMoveDown_Completed"> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" From="0" To="540" Duration="0:0:1"/> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" From="1" To="0.2" Duration="0:0:1"/> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" From="1" To="0.2" Duration="0:0:1"/> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" From="0" To="100" Duration="0:0:1"/> <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" From="0" To="100" Duration="0:0:1"/> </Storyboard>
也是一些子動畫的組合。
1）福字平面旋轉540度，最后是倒着的
2）在X軸拉伸到原尺寸的0.2
3）在Y軸拉伸到原尺寸的0.2
4）在X軸橫向移動一些距離
5）在Y軸豎向移動一些距離
在XAML中，雖然定義了移動的距離是100，但是考慮到不同手機的屏幕大小不一樣，所以需要用code實際算一下：
DoubleAnimation da1 = this.sb_FuMoveDown.Children[3] as DoubleAnimation; da1.To = this.ActualWidth / 2 - 60; DoubleAnimation da2 = this.sb_FuMoveDown.Children[4] as DoubleAnimation; da2.To = this.ActualHeight / 2 - 50; this.sb_FuMoveDown.Begin();
首先獲得實際的屏幕寬度，除以2再減去60，也就是從中間向右移動距離右邊60個像素的位置，Y方向同理，然后再執行動畫。
第四個動畫比較簡單，就是“微軟對聯”4個字總上部飛下來：
<Storyboard x:Name="sb_TitleFlyIn"> <DoubleAnimation Storyboard.TargetName="tb_Title" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" From="-400" To="0" Duration="0:0:1"/> </Storyboard>
這種“飛入”，要在屏幕上先定義好最終的位置，然后用-400來定義起飛的位置，終點位置一定是0。
寫對聯
寫對聯一共有3頁，擬上聯，對下聯，題橫批：
擬上聯，首先預定義一些羊年的吉祥話在本地文件里，用JSON格式，頁面顯示時綁定在ListView上就可以了。注意ListView一定要放在Grid里，如果放在StackPanel里，ListView在屏幕外的部分會把StackPanel拉長，從而造成ListView在屏幕外的部分始終看不到。
對下聯，后台調用了MSRA提供的API，自動生成一些建議。
題橫批，也是調用了API，自動生成4字橫批。
效果頁
效果頁的制作比較復雜。
這張圖是5個字的例子，但是對聯允許1-10個字，所以在10個字時，字號要縮小到剛好充滿屏幕高度的值，才能使整個效果完美。而且TextBlock里不能豎着寫字，用折行也不好控制左右邊距，因此我們使用了最原始的方法，一個字一個字的拼上去：
for (int i = 0; i < this.favCouplet.shanglian.Length; i++) { CharControl cc = new CharControl(); cc.DataContext = this.favCouplet.shanglian[i]; cc.FontFamily = this.favCouplet.Font; cc.Foreground = this.favCouplet.Color; this.sp_Left.Children.Add(cc); float scaleValueL = float.Parse((this.scrollLeft.ActualHeight / sp_Left.ActualHeight > this.scrollLeft.ActualWidth / sp_Left.ActualWidth ? this.scrollLeft.ActualWidth / sp_Left.ActualWidth : this.scrollLeft.ActualHeight / sp_Left.ActualHeight).ToString()); this.scrollLeft.ChangeView(null, null, scaleValueL); }
但是要同時保證外邊框完整，所以把外邊框分成了3個圖片元素：
中間的那個可以隨着字數任意擴展數量，兩頭的圖片最后拼接上去即可。
搞好整體效果后，可以通過5種方式分享給朋友們：短信，郵件，微博，圖片（可供微信分享），雲端。
可選效果
底板變成了木紋，紅色紙張也變了另一個樣子，是通過改Style實現的。福字是可以點擊的，點一次旋轉180度，可正可倒。
字體
我們使用了3種字體：普通等線字體，姑且叫黑體吧；楷體；隸書。后兩種字體在WP中沒有，你可以從Windows的ControlPanel->Font中把楷體字體文件拷貝下來，作為Assets的一部分放在資源中，然后當你編輯TextBlock時，會在Text的Font中，最上面，多出一種字體，就是楷體：
我們為什么沒有使用書法體從而使對聯更有手寫感呢？因為書法體是要買的，有知識產權。咱們要注意素質。
雲端對聯
你寫好的對聯，如果特滿意，可以上傳到雲端；同時你也可以從雲端下載其它人的得意之作，亂改一氣，作為自己的作品。點擊雲端對聯可以直接進入效果頁。
好吧，先寫到這里，一會兒收拾收拾回家了。別忘了下載我們的春聯App喲！
MSRA的網頁版對聯在這里：http://couplet.msra.cn/
祝大家春節快樂！
