先看效果图：
一共有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();