[英]C# WPF Frame how to create slide effect on pages?
I want to make a page slide effect on WPF, Frame control. 我想在WPF,框架控件上制作页面幻灯片效果。 here we go.
开始了。
First of all, I put a frame and 2 buttons for navigation: 首先,我放了一个框架和两个用于导航的按钮:
<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="<" Click="GoPrevious"/>
<Button Grid.Column="2" Content=">" Click="GoNext"/>
</Grid>
Then I create 3 Pages in difference colors: Page1.xaml, Page2.xaml and Page3.xaml 然后创建3种颜色不同的页面:Page1.xaml,Page2.xaml和Page3.xaml
now when click navigation button, will just simply navigate to an uri: 现在,当单击导航按钮时,只需导航到一个uri:
frame.Navigate(new Uri("page2.xaml", UriKind.Relative));
Done. 完成。 Now I want to make each page slide when navigated (everybody want it).
现在,我想使每个页面在浏览时都滑动(每个人都想要)。 So my plan is to set every page's Loaded EventTrigger:
所以我的计划是设置每个页面的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>
And it works! 而且有效! Everything goes fine until i found the pages are not continuous, means, when you navigate to page2, page1 will unload immediately, than begin page2 loaded event.
一切正常,直到我发现页面不连续为止,这意味着,当您导航到page2时,page1将立即卸载,而不是开始page2加载事件。 I tried to set page1's unload event, but not work.
我试图设置page1的unload事件,但是不起作用。
what I want is, when page1 begin to exit, page2 should be coming to stage right away, like a train one by one. 我想要的是,当page1开始退出时,page2应该马上上台,就像火车一样。
So how to do it? 那怎么办呢? Thanks.
谢谢。
I have done it using a separate Frame
per Page
. 我一直在使用一个单独做了
Frame
每个Page
。 As if we try to show a new webpage in a website, it's not possible without using some trick. 就像我们试图在网站上显示新网页一样,如果不使用一些技巧,这是不可能的。 Same is the case here.
这里也是一样。 And for sliding effect,
StackPanel
with Orientation=Horizontal
looks ok. 对于滑动效果,使用
Orientation=Horizontal
StackPanel
看起来还可以。
Note : In Frame style, I have used main Grid(Grd) to set width, as when we add children(a new Frame) to StackPanel it's Width will increase. 注意:在框架样式中,我使用了主Grid(Grd)来设置宽度,因为当我们向StackPanel添加子项(新的框架)时,其宽度会增加。
You can build upon this concept. 您可以基于此概念。
<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>
code-behind 代码隐藏
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.