C# WPF Frame 如何在页面上创建幻灯片效果？答案

【问题标题】：C# WPF Frame how to create slide effect on pages?C# WPF Frame 如何在页面上创建幻灯片效果？
【发布时间】：2016-04-12 15:51:38
【问题描述】：

我想在WPF，Frame控件上做一个页面滑动效果。我们开始吧。

首先，我放了一个框架和2个导航按钮：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="25"/>
    </Grid.ColumnDefinitions>
    <Frame x:Name="frame" Source="page1.xaml" Grid.Column="1" />
    <Button Grid.Column="0" Content="&lt;" Click="GoPrevious"/>
    <Button Grid.Column="2" Content="&gt;" Click="GoNext"/>
</Grid>

然后我创建 3 个不同颜色的页面：Page1.xaml、Page2.xaml 和 Page3.xaml

现在当点击导航按钮时，只会简单地导航到一个 uri：

frame.Navigate(new Uri("page2.xaml", UriKind.Relative));

完成。现在我想让每个页面在导航时滑动（每个人都想要它）。所以我的计划是设置每个页面的Loaded EventTrigger：

<Page.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <ThicknessAnimation Duration="0:0:0.75" Storyboard.TargetProperty="Margin" From="500,0,-500,0" To="0" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
        <BeginStoryboard>
            <Storyboard>
                <ThicknessAnimation Duration="0:0:0.75" Storyboard.TargetProperty="Margin" From="0" To="-500,0,500,0" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Page.Triggers>

而且它有效！一切都很好，直到我发现页面不连续，这意味着，当您导航到 page2 时，page1 将立即卸载，而不是开始 page2 加载事件。我尝试设置page1的卸载事件，但不起作用。

我想要的是，当page1开始退出时，page2应该马上就上台了，就像一列一列的火车。

那么怎么做呢？谢谢。

【问题讨论】：

codeproject.com/Articles/197132/Simple-WPF-Page-Transitions

标签： c# wpf slide

【解决方案1】：

我已经使用单独的 Frame 每 Page 完成了它。就好像我们试图在网站中显示一个新网页一样，如果不使用一些技巧是不可能的。这里的情况也是如此。而对于滑动效果，StackPanel 和 Orientation=Horizontal 看起来还可以。

注意：在 Frame 样式中，我使用了 main Grid(Grd) 来设置宽度，当我们将子项（一个新 Frame）添加到 StackPanel 时，它的宽度会增加。

您可以以此概念为基础。

<Grid Background="#FF33CF2C" x:Name="Grd">
    <StackPanel x:Name="StkPnl" Orientation="Horizontal">
        <StackPanel.Resources>
            <Style TargetType="Frame">
                <Setter Property="Margin" Value="0,50,0,0"/>
                <Setter Property="Width" Value="{Binding ActualWidth, ElementName=Grd}"/>
                <Setter Property="NavigationUIVisibility" Value="Hidden"/>
            </Style>                
        </StackPanel.Resources>
        <Frame x:Name="FramePage1" Source="/WpfNavigation;component/Sliding/Page1.xaml" />
    </StackPanel>
    <Button Content="Goto Page2" HorizontalAlignment="Left" Margin="114,18,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click">
        <Button.Triggers>
            <EventTrigger RoutedEvent="ButtonBase.Click">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="FramePage1" Storyboard.TargetProperty="Margin">
                        <ThicknessAnimation To="-2000 , 50 , 0, 0" Duration="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

代码隐藏

private void Button_Click(object sender, RoutedEventArgs e)
        {
            Frame f = new Frame();
            f.Source = new Uri("pack://application:,,,/Sliding/Page2.xaml", UriKind.Absolute);

            StkPnl.Children.Add(f);          
        }

【讨论】：