WPF 页面效果答案

【问题标题】：WPF Page EffectsWPF 页面效果
【发布时间】：2014-01-07 08:25:13
【问题描述】：

我有一个窗口，其中一个页面托管在一个框架中。

<Grid Grid.Row="1" Margin="0,30,0,0" ClipToBounds="True">
   <Frame x:Name="PageHostFrame" Grid.Row="1"/>
</Grid>

当我显示页面时，页面被加载并从代码中可见：

PageHostFrame.Content = ActivePage;

是否可以使用 WPF 中的一些奇特技术将页面从左到右滚动到视图中？

例如，页面从窗口的最右侧开始，因此左侧位置离开屏幕，然后它从其所在框架的右侧移动（动画）到左侧。

这是不显示页面的初始状态。
现在显示页面。它从框架开始生命，然后滚动以适应框架。所以它的Left位置将是0。

【问题讨论】：

简而言之，您想在加载网格时从左到右移动它..对不起，我不明白..这就是为什么要问你。
我已经更新了问题。

标签： wpf user-interface

【解决方案1】：

这确实是可能的，但这是一项相当大的工作。您需要从传入和传出 UI 的Visuals 中创建一个VisualBrush，然后为它们在屏幕上滑动设置动画，然后移除旧的 UI 屏幕，然后使用实际控件切换“绘制”的 UI。

当然，让其他人完成工作要容易得多，那么为什么不看看 CodePlex 上的 Transitionals 呢？我以前用过它，它确实简化了事情。还有更多可用的过渡...想想 Microsoft Powerpoint 过渡。

【讨论】：

【解决方案2】：

试试这个..如果我错了，对不起

 <Frame Background="White" x:Name="PageName">
    <Frame.Content>
        <Page  Background="LightBlue" > 
            <Page.Style>
                <Style TargetType="Page">                        
                    <Setter Property="RenderTransformOrigin" Value="0.3,0"></Setter>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <TranslateTransform x:Name="st" X="0"></TranslateTransform>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="1376"   AccelerationRatio="0.3" To="0" Duration="0:0:0.6">
                                        <DoubleAnimation.EasingFunction>
                                            <ExponentialEase EasingMode="EaseOut"></ExponentialEase>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>                   
            </Page.Style>
        </Page>
    </Frame.Content>
</Frame>

您也可以使用 scaletransform 并根据您的要求调整上述代码的持续时间和宽度。谢谢。

【讨论】：