先看效果圖：

一共有8個GRID，黃色的負責移動，其他7個負責定位。新建一個頁面page，替換預設程式碼：

 1 <UserControl.Resources>
 2         <!--#region 動畫-->
 3         <Storyboard x:Name="Storyboard">
 4             <!--整體縮小動畫-->
 5             <DoubleAnimation x:Name="dh" From="0" To="
 
100" Duration="00:00:0.2" 
 6             Storyboard.TargetName="y" 
 7             Storyboard.TargetProperty="X">
 8                 <DoubleAnimation.EasingFunction>
 9                     <PowerEase  EasingMode="EaseInOut" 
10                                          
11                              />
12
 
                 </DoubleAnimation.EasingFunction>
13             </DoubleAnimation>
14         </Storyboard>
15         <!--#endregion-->
16     </UserControl.Resources>
17     <Grid>
18         <FlipView>
19             <FlipViewItem Width="400">
20
 
                 <Grid>
21                     <Grid Canvas.ZIndex="9000" Opacity="0.8" x:Name="w" Background="Yellow" Width="{Binding ElementName=aa,Path=ActualWidth}" HorizontalAlignment="Left">
22                         <Grid.RenderTransform>
23                             <TranslateTransform x:Name="y"></TranslateTransform>
24                         </Grid.RenderTransform>
25                     </Grid>
26 
27                     <Grid>
28                         <Grid.ColumnDefinitions>
29 
30                             <ColumnDefinition Width="1*"/>
31                             <ColumnDefinition Width="1*"/>
32                             <ColumnDefinition Width="1*"/>
33                             <ColumnDefinition Width="1*"/>
34                             <ColumnDefinition Width="1*"/>
35                             <ColumnDefinition Width="1*"/>
36                             <ColumnDefinition Width="1*"/>
37                         </Grid.ColumnDefinitions>
38                         <Grid x:Name="aa" Grid.Column="0" Background="Black" Tapped="aa_Tapped">
39                             <Grid.RenderTransform>
40                                 <TranslateTransform x:Name="b"></TranslateTransform>
41                             </Grid.RenderTransform>
42                         </Grid>
43                         <Grid x:Name="bb" Grid.Column="1" Background="White" Tapped="bb_Tapped">
44                             <Grid.RenderTransform>
45                                 <TranslateTransform x:Name="bbb"></TranslateTransform>
46                             </Grid.RenderTransform>
47                         </Grid>
48                         <Grid x:Name="cc" Grid.Column="2" Background="Green" Tapped="cc_Tapped">
49                             <Grid.RenderTransform>
50                                 <TranslateTransform x:Name="ccc"></TranslateTransform>
51                             </Grid.RenderTransform>
52                         </Grid>
53                         <Grid x:Name="dd" Grid.Column="3" Background="Azure" Tapped="dd_Tapped">
54                             <Grid.RenderTransform>
55                                 <TranslateTransform x:Name="ddd"></TranslateTransform>
56                             </Grid.RenderTransform>
57                         </Grid>
58                         <Grid x:Name="ee" Grid.Column="4" Background="Red" Tapped="ee_Tapped">
59                             <Grid.RenderTransform>
60                                 <TranslateTransform x:Name="eee"></TranslateTransform>
61                             </Grid.RenderTransform>
62                         </Grid>
63                         <Grid x:Name="ff" Grid.Column="5" Background="Blue" Tapped="ff_Tapped">
64                             <Grid.RenderTransform>
65                                 <TranslateTransform x:Name="fff"></TranslateTransform>
66                             </Grid.RenderTransform>
67                         </Grid>
68                         <Grid x:Name="gg" Grid.Column="6" Background="DarkRed" Tapped="gg_Tapped">
69                             <Grid.RenderTransform>
70                                 <TranslateTransform x:Name="ggg"></TranslateTransform>
71                             </Grid.RenderTransform>
72                         </Grid>
73                     </Grid>
74                    
75                 </Grid>
76             </FlipViewItem>
77         </FlipView>
78     </Grid>

我這是用使用者控制元件做的，所以把UserControl.Resources改成Page.Resources就行了。

後臺程式碼：

 1  public void to(int i)
 2         {
 3             
 4             dh.From = getX(w);
 5 
 6             double to = 0;
 7             switch (i)
 8             {
 9                 case 0:
10                     to = getX(aa);
11                     break;
12                 case 1:
13                     to = getX(bb);
14                     break;
15                 case 2:
16                     to = getX(cc);
17                     break;
18                 case 3:
19                     to = getX(dd);
20                     break;
21                 case 4:
22                     to = getX(ee);
23                     break;
24                 case 5:
25                     to = getX(ff);
26                     break;
27                 case 6:
28                     to = getX(gg);
29                     break;
30             
31             }
32 
33             dh.To = to;
34         }
35         public double getX(Grid g)
36         {
37             
38             GeneralTransform gf = g.TransformToVisual(this);
39 
40             
41             Point p = gf.TransformPoint(new Point(0, 0));
42 
43             return p.X;
44 
45         }
46 
47         private void gg_Tapped(object sender, TappedRoutedEventArgs e)
48         {
49             to(6);
50             Storyboard.Begin();
51         }
52 
53         private void ff_Tapped(object sender, TappedRoutedEventArgs e)
54         {
55             to(5);
56             Storyboard.Begin();
57         }
58 
59         private void ee_Tapped(object sender, TappedRoutedEventArgs e)
60         {
61             to(4);
62             Storyboard.Begin();
63         }
64 
65         private void dd_Tapped(object sender, TappedRoutedEventArgs e)
66         {
67             to(3);
68             Storyboard.Begin();
69         }
70 
71         private void cc_Tapped(object sender, TappedRoutedEventArgs e)
72         {
73             to(2);
74             Storyboard.Begin();
75         }
76 
77         private void bb_Tapped(object sender, TappedRoutedEventArgs e)
78         {
79             to(1);
80             Storyboard.Begin();
81         }
82 
83         private void aa_Tapped(object sender, TappedRoutedEventArgs e)
84         {
85             to(0);
86             Storyboard.Begin();
87         }

收尾。

好吧小結一下，重點在佈局和獲取控制元件的相對座標，通過表格定義同等寬度7列，從而達到不管在什麼裝置上多能平均分佈，然後獲取7個座標進行位置移動就可以了，可以改變緩動函式以及引數實現一些有意思的動畫，比如彈簧啊什麼的，還可以疊加更多動畫讓它看上去不那麼單調。

this.close();