[Windows Phone] How can I use the code to implement the Start Screen to start the screen tiles floating effect and layout transformation effect?

[Windows Phone] How can I use the code to implement the Start Screen to start the screen tiles floating effect and layout transformation effect?

By sinodragon21/Nathan

Reprinted please indicate the source http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2600948.html

 

I. Requirements

"Channels" paranormaitem page of "Sohu News:

Long press a square in it, it will float, drag it to a new location, the entire canvas will be re-laid, and also accompanied by layout transform animation, similar to windowsphone's own start screen function.

 

Ii. Final demo

Iii. Source Code

Download Page http://www.hugwp.com/forum.php? MoD = viewthread & tid = 3925)

 

Iv. Core design ideas

1. fluidmovebehavior (appliesto = "children ")

 1 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="17,0,17,0"> 2             <ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled"> 3                 <Canvas x:Name="canvasMain" VerticalAlignment="Top"> 4                     <i:Interaction.Behaviors> 5                         <el:FluidMoveBehavior AppliesTo="Children" Duration="0:0:1.5"> 6                             <el:FluidMoveBehavior.EaseY> 7                                 <CubicEase EasingMode="EaseOut"/> 8                             </el:FluidMoveBehavior.EaseY> 9                             <el:FluidMoveBehavior.EaseX>10                                 <CubicEase EasingMode="EaseOut"/>11                             </el:FluidMoveBehavior.EaseX>12                         </el:FluidMoveBehavior>13                     </i:Interaction.Behaviors>14                     <Border x:Name="firstBorder" Height="173" Width="173" Background="Red" Margin="0,0,20,20" Canvas.Top="0" Canvas.Left="0" ManipulationStarted="Border_ManipulationStarted_1" ManipulationDelta="Border_ManipulationDelta_1" ManipulationCompleted="Border_ManipulationCompleted_1" Hold="firstBorder_Hold_1" Tap="firstBorder_Tap_1">15                     </Border>16                     <Border Height="173" Width="173" Background="#FF19A588" Margin="0,0,20,20" Canvas.Top="0" Canvas.Left="193" ManipulationStarted="Border_ManipulationStarted_1" ManipulationDelta="Border_ManipulationDelta_1" ManipulationCompleted="Border_ManipulationCompleted_1" Hold="firstBorder_Hold_1" Tap="firstBorder_Tap_1">17                     </Border>18                     <Border Height="173" Width="173" Background="#FF19C854" Margin="0,0,20,20" Canvas.Top="193" Canvas.Left="0" ManipulationStarted="Border_ManipulationStarted_1" ManipulationDelta="Border_ManipulationDelta_1" ManipulationCompleted="Border_ManipulationCompleted_1" Hold="firstBorder_Hold_1" Tap="firstBorder_Tap_1">19                     </Border>20                 </Canvas>21             </ScrollViewer>22         </Grid>

Note: 1: Reference required: Microsoft. expression. Interactions and system. Windows. interactivity.

Note 2: Add namespace

Xmlns: I = "CLR-namespace: system. Windows. interactivity; Assembly = system. Windows. Interactivity"
Xmlns: El = "CLR-namespace: Microsoft. expression. interactivity. layout; Assembly = Microsoft. expression. Interactions"

 

2. Canvas automatically layout based on children's index

1         private void repfreshCanvasChildernPosition()2         {3             foreach (UIElement ue in canvasMain.Children)4             {5                 repositionCanvasChild(ue, canvasMain.Children.IndexOf(ue));6             }7         }

1         private void repositionCanvasChild(UIElement ue, int newIndex)2         {3             Canvas.SetLeft(ue, (double)(newIndex % 2 * 193));4             Canvas.SetTop(ue, (double)(newIndex / 2 * 193));5             Border border = ue as Border;6             TextBlock txb = new TextBlock() { Text = newIndex.ToString(), VerticalAlignment = VerticalAlignment.Center, HorizontalAlignment = HorizontalAlignment.Center, FontSize = 50 };7             border.Child = txb;8         }

 

5. animation Summary

There are three ways to implement an animation:

Level 1 difficulty: storyboard + Animation

Level 2 difficulty: visualstatemanager + visualstate

Level 3 difficulty: Built-in Windows Phone behaviors (for example, fluidmovebehavior above)

 

6. Related Links

Http://www.hugwp.com/thread-3925-1.html

Http://www.hugwp.com/forum.php? MoD = viewthread & tid = 2012 & reltid = 3925 & pre_pos = 1 & ext = CB

 

-Complete.

Blog title: [Windows Phone] how to simulate floating tiles and layouttransform of Windows Phone Start Screen?

Reprinted please indicate the source http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2600948.html