none
Metro翻页效果 RRS feed

  • 问题

  • Metro官方有没有推荐的翻页效果。应用是用Canvas加载背景图像和PNG上的图像,资源比较大,有点类似于Photo前后翻。目前的做法是做2个Canvas,做Storyboard,让一个Canvas移出,一个Canvas移入。用DoubleAnimation控制Canvas.Left感觉好像有点卡,特别是第一次翻页。有没有好的方法。


    • 已编辑 whyuan 2012年9月3日 14:15
    2012年9月3日 14:14

答案

  • 你可以用 RenderTransform + SkewTransform + ScaleTransform变换来实现。

    简单的例子:

    <StackPanel x:Name="grid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
            <Button Content="Play" Click="Button_Click_1"/>
            <Grid>
                <Grid x:Name="pageBottom" Background="Green" Opacity="1">
                    <Image Source="Assets/Logo.png"/>
                </Grid>
                <Grid x:Name="pageTop" Background="Blue" Opacity="1">
                    <Image Source="Assets/Logo.png">
                    </Image>
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <ScaleTransform CenterX="0" CenterY="0" ScaleX="1"/>
                        </TransformGroup>
                    </Grid.RenderTransform>
                </Grid>
            </Grid>
        </StackPanel>
            private async void Button_Click_1(object sender, RoutedEventArgs e)
            {
                Storyboard sb = new Storyboard();
                DoubleAnimation daSkew = new DoubleAnimation()
                {
                    Duration = TimeSpan.FromSeconds(0.5),
                    From = 0,
                    To = -89,
                    EnableDependentAnimation = true
                };
                Storyboard.SetTarget(daSkew, pageTop);
                Storyboard.SetTargetProperty(daSkew, "(TextBlock.RenderTransform).(TransformGroup.Children)[0].(SkewTransform.AngleY)");
                sb.Children.Add(daSkew);
                DoubleAnimation daScale = new DoubleAnimation()
                {
                    Duration = TimeSpan.FromSeconds(0.5),
                    From = 1,
                    To = 0,
                    EnableDependentAnimation = true
                };
                Storyboard.SetTarget(daScale, pageTop);
                Storyboard.SetTargetProperty(daScale, "(TextBlock.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)");
                sb.Children.Add(daScale);
                DoubleAnimation daOpacity = new DoubleAnimation()
                {
                    Duration = TimeSpan.FromSeconds(0.5),
                    From = 1,
                    To = 0,
                    EnableDependentAnimation = true
                };
                Storyboard.SetTarget(daOpacity, pageTop);
                Storyboard.SetTargetProperty(daOpacity, "Opacity");
                sb.Children.Add(daOpacity);
                sb.Begin();
            }

    下载: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%211100


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us


    2012年9月4日 5:18
    版主

全部回复

  • 你可以用 RenderTransform + SkewTransform + ScaleTransform变换来实现。

    简单的例子:

    <StackPanel x:Name="grid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
            <Button Content="Play" Click="Button_Click_1"/>
            <Grid>
                <Grid x:Name="pageBottom" Background="Green" Opacity="1">
                    <Image Source="Assets/Logo.png"/>
                </Grid>
                <Grid x:Name="pageTop" Background="Blue" Opacity="1">
                    <Image Source="Assets/Logo.png">
                    </Image>
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <ScaleTransform CenterX="0" CenterY="0" ScaleX="1"/>
                        </TransformGroup>
                    </Grid.RenderTransform>
                </Grid>
            </Grid>
        </StackPanel>
            private async void Button_Click_1(object sender, RoutedEventArgs e)
            {
                Storyboard sb = new Storyboard();
                DoubleAnimation daSkew = new DoubleAnimation()
                {
                    Duration = TimeSpan.FromSeconds(0.5),
                    From = 0,
                    To = -89,
                    EnableDependentAnimation = true
                };
                Storyboard.SetTarget(daSkew, pageTop);
                Storyboard.SetTargetProperty(daSkew, "(TextBlock.RenderTransform).(TransformGroup.Children)[0].(SkewTransform.AngleY)");
                sb.Children.Add(daSkew);
                DoubleAnimation daScale = new DoubleAnimation()
                {
                    Duration = TimeSpan.FromSeconds(0.5),
                    From = 1,
                    To = 0,
                    EnableDependentAnimation = true
                };
                Storyboard.SetTarget(daScale, pageTop);
                Storyboard.SetTargetProperty(daScale, "(TextBlock.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)");
                sb.Children.Add(daScale);
                DoubleAnimation daOpacity = new DoubleAnimation()
                {
                    Duration = TimeSpan.FromSeconds(0.5),
                    From = 1,
                    To = 0,
                    EnableDependentAnimation = true
                };
                Storyboard.SetTarget(daOpacity, pageTop);
                Storyboard.SetTargetProperty(daOpacity, "Opacity");
                sb.Children.Add(daOpacity);
                sb.Begin();
            }

    下载: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%211100


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us


    2012年9月4日 5:18
    版主
  • 网盘上的工程好像运行报错,代码试过了,可以运行。就是翻页效果稍差些。

    2012年9月5日 7:44