Happy Spring Festival and happy Spring Festival

Happy Spring Festival and happy Spring Festival

Hi,

We hope you will enjoy the Spring Festival!

I want to give you a gift for the spring festival, but our programmers don't have much money. We can't afford it, but we have technology, so we made a "Microsoft couplet" App at a very fast speed, which was launched in Windows Phone Store in February 10.

Link is here. Please download and entertain yourself:

Http://www.windowsphone.com/zh-cn/store/app/%E5%BE% AE %E8%BD%AF-%E5%AF%B9%E8%81%94/25035c46-0362-40b9-9c84-fd4a3cafe4df

Different from other couplet apps, because Microsoft MSRA's computer couplet system technical support is available in the background, users can draw up the uplink by themselves, and then ask the computer to give you some downlink suggestions, you can make further modifications, and then let the computer give you some horizontal suggestions. Of course, you can also make modifications and finally make a couplet that suits your satisfaction!

The following describes the development process of this App for your reference. Home Page

There are four animations on the home page, which can make users shine in front of each other, and will naturally become fond of your App.

The first animation: Fu CI rotates from the center to 360 degrees. The animation is defined as follows:

<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>

This is a combination of three small animations:

1) Perform a 360-degree plane rotation

2) stretch the X axis from 0 to 1, that is, the original size from none.

3) stretch the Y axis from 0 to 1

The second animation: five menus are sequentially routed from the left. The animation is defined as follows:

<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>

The parameters of each sub-animation are the same. They are all from the position of-250, that is, outside the left side of the page, and enter the page on the X axis (horizontal. However, if the time difference is poor, you can use BeginTime = "0: 0 from the second menu. 10 "sets a latency, that is, every 10 milliseconds, flying into a menu.

Third Animation: Fu Zi flew from the center to the bottom right corner of the Page, and can be clicked as the Setting Page entry. The animation is defined as follows:

<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>

It is also a combination of child animations.

1) The fu font plane rotates 540 degrees, and the last is inverted.

2) stretch on the X axis to 0.2 of the original size

3) stretch on the Y axis to 0.2 of the original size

4) Move the distance horizontally on the X axis.

5) Move the distance vertically on the Y axis.

In XAML, although the moving distance is defined as 100, considering that the screen sizes of different mobile phones are different, you need to calculate the actual 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();

First, get the actual screen width, divide by 2 and subtract 60, that is, move from the center to the right 60 pixels to the right, and then execute the animation in the Y direction.

The fourth animation is relatively simple, that is, the top four words of "" fly down:

<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>

The final position should be defined first on the screen and then-400 should be used to define the departure position. The final position must be 0.

 

Couplet writing

A total of three pages of peer join are written, which are proposed to be uplinked. for downlink, the question is in batch:

To be uplinked, predefine the example of a goat's year in a local file in JSON format and bind it to the ListView when displaying the page. Note that the ListView must be placed in the Grid. If it is placed in the StackPanel, the part of the ListView outside the screen will lengthen the StackPanel, so that the ListView cannot be rolled.

For downlink, the backend calls the API provided by MSRA to automatically generate some suggestions.

The API is also called to automatically generate a 4-character horizontal batch.

Results page

Results page creation is complicated.

This figure is an example of five characters, but the couplet can contain 1 to 10 characters. Therefore, when there are 10 characters, the font size must be reduced to a value filled with the screen height to make the entire effect perfect. In addition, TextBlock cannot be written vertically, and it is difficult to control the left and right margins with lines. Therefore, we use the most primitive method to combine one word and one word:

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);}

However, to ensure that the outer border is complete at the same time, the outer border is divided into three image elements:

The one in the middle can be expanded as the number of words increases, and the two ends can be spliced.

After improving the overall effect, you can share the results with your friends through text messages, emails, Weibo posts, images (available for sharing), and the cloud.

Optional results

The baseboard is changed to wood grain, and the red paper is changed to another Style. Note: you can click the lucky character, and rotate it 180 degrees at a time, so it can be right down.

Font

We use three types of fonts: regular and other font, which should be a simhei font;. The last two fonts are not available in WP. You can copy the Font file from Windows ControlPanel> Font and put it as part of Assets in the resource, then, when you edit the TextBlock, it will appear in the Font of the Text, at the top, there is an additional Font, that is, the Text body:

Why do we not use calligraphy questions because couplets are more handwritten? Because calligraphy is intended for purchase and has intellectual property rights. We need to pay attention to quality.

Cloud Couplet

If you are satisfied with your couplet, you can upload it to the cloud. At the same time, you can also download the satisfaction of other people from the cloud, as your work. Click the cloud couplet to go to the effect page.

Okay, write it here first, and pack it up later. Don't forget to download our Spring Festival couplets App!

Http://www.windowsphone.com/zh-cn/store/app/%E5%BE% AE %E8%BD%AF-%E5%AF%B9%E8%81%94/25035c46-0362-40b9-9c84-fd4a3cafe4df

MSRA web version couplets here: http://couplet.msra.cn/

 

Happy spring festival!