UWP入门(七)--SplitView详解与页面跳转
2017-09-21 08:41
225 查看
原文:UWP入门(七)--SplitView详解与页面跳转
官方文档,逼着自己用英文看,UWP开发离不开官方文档
A split view’s content area is always visible. The pane can expand and collapse or remain in an open state, and can present itself from either the left side or right side of an app window. The pane has four modes:
Overlay
The pane is hidden until opened. When open, the pane overlays the content area.
pane不打开是隐藏,打开的时候pane覆盖掉content
Inline
The pane is always visible and doesn’t overlay the content area. The pane and content areas divide the available screen real estate.
pane不打开是隐藏,打开的时候pane推开content
CompactOverlay
A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. The default closed pane width is 48px, which can be modified with CompactPaneLength. If the pane is opened, it will overlay the content area.
不打开时,pane留下一点宽度,默认48px,可以用CompactPaneLength修改
CompactInline
A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. The default closed pane width is 48px, which can be modified with CompactPaneLength. If the pane is opened, it will reduce the space available for content, pushing the content out of its way.
不打开时,pane留下一点宽度,默认48px,可以用CompactPaneLength修改
官方文档,逼着自己用英文看,UWP开发离不开官方文档
1. SplitView 拆分视图控件
拆分视图控件具有一个可展开/可折叠的窗格和一个内容区域<SplitView> <SplitView.Content> singleObject </SplitView.Content> <SplitView.Pane> singleObject </SplitView.Pane> </SplitView>
A split view’s content area is always visible. The pane can expand and collapse or remain in an open state, and can present itself from either the left side or right side of an app window. The pane has four modes:
Overlay
The pane is hidden until opened. When open, the pane overlays the content area.
pane不打开是隐藏,打开的时候pane覆盖掉content
Inline
The pane is always visible and doesn’t overlay the content area. The pane and content areas divide the available screen real estate.
pane不打开是隐藏,打开的时候pane推开content
CompactOverlay
A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. The default closed pane width is 48px, which can be modified with CompactPaneLength. If the pane is opened, it will overlay the content area.
不打开时,pane留下一点宽度,默认48px,可以用CompactPaneLength修改
CompactInline
A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. The default closed pane width is 48px, which can be modified with CompactPaneLength. If the pane is opened, it will reduce the space available for content, pushing the content out of its way.
不打开时,pane留下一点宽度,默认48px,可以用CompactPaneLength修改
2. 页面跳转和SplitView,用static传递了数据
方便你找代码,直接目录跳转2.1 MainPage
<StackPanel> <StackPanel Orientation="Horizontal"> <Button Name="HomeButton" Content="Home" Click="HomeButton_Click" Margin="0,0,20,0" /> <Button Name="BackButton" Content="Back" Click="BackButton_Click" Margin="0,0,20,0" /> <Button Name="ForwardButton" Content="Forward" Click="ForwardButton_Click" Margin="0,0,20,0" /> <Button Name="NavigateButton" Content="Navigate Root Frame" Click="NavigateButton_Click" /> </StackPanel> <Frame Name="MyFrame"> </Frame> </StackPanel>
public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); //自己有Frme,布局里面的 MyFrame.Navigate(typeof(Page1)); } private void HomeButton_Click(object sender, RoutedEventArgs e) { MyFrame.Navigate(typeof(Page1)); } private void BackButton_Click(object sender, RoutedEventArgs e) { //haha,不用自己写堆栈 if (MyFrame.CanGoBack) { MyFrame.GoBack(); } } private void ForwardButton_Click(object sender, RoutedEventArgs e) { if (MyFrame.CanGoForward) { MyFrame.GoForward(); } } private void NavigateButton_Click(object sender, RoutedEventArgs e) { //注意,这会替换整个页面的Frame this.Frame.Navigate(typeof(Page2)); } }
2.2 App.xml.cs
//只可以在应用内访问 internal static string SomeImportantValue;
2.3 Page1
<StackPanel> <TextBlock FontSize="48" Text="Page 1" /> <HyperlinkButton Content="Go to Page 2" Click="HyperlinkButton_Click" /> <HyperlinkButton Content="Go to Microsoft.com" NavigateUri="http://www.microsoft.com" /> </StackPanel>
private void HyperlinkButton_Click(object sender, RoutedEventArgs e) { Frame.Navigate(typeof(Page2)); }
2.4 Page2
private void HyperlinkButton_Click(object sender, RoutedEventArgs e) { App.SomeImportantValue = ValueTextBox.Text; Frame.Navigate(typeof(Page3), ValueTextBox.Text); // Frame.Navigate(typeof(Page3), "DEVIL"); } protected override void OnNavigatedTo(NavigationEventArgs e) { if (!String.IsNullOrEmpty(App.SomeImportantValue)) { ValueTextBox.Text = App.SomeImportantValue; } }
<StackPanel> <TextBlock FontSize="48" Text="Page 2" /> <TextBox Name="ValueTextBox" Width="200" /> <HyperlinkButton Content="Go to Page 3" Click="HyperlinkButton_Click" /> </StackPanel>
2.5 Page3
<StackPanel> <TextBlock FontSize="48" Text="Page 3" /> <TextBox Name="ValueTextBox" Width="200" /> </StackPanel>
//页面刚打开的时候调用 protected override void OnNavigatedTo(NavigationEventArgs e) { var value = (string)e.Parameter; ValueTextBox.Text = value; }
相关文章推荐
- UWP入门(七)--SplitView详解与页面跳转
- UWP入门(七)--SplitView详解与页面跳转
- 对vue2.0中.vue文件页面跳转之.$router.push的用法详解
- Android自学笔记之Intent 页面跳转详解
- 微信小程序--跳转页面的两种方法详解
- 详解springmvc控制登录用户session失效后跳转登录页面
- 页面跳转的两种实现方式 详解
- 五种JSP页面跳转方法详解
- 五种JSP页面跳转方法详解
- ASP.NET页面跳转的三大方法详解
- PHP跳转页面的几种实现方法详解
- Android页面跳转详解
- Intent实现A页面跳转到B页面,通过意图由A界面传递对象及对象列表的详解
- 微信小程序 详解页面跳转与返回并回传数据
- 五种 JSP页面跳转方法详解
- 微信小程序 页面跳转传参详解
- Spring Web Flow 入门demo(一)简单页面跳转 附源码
- 微信小程序 页面跳转事件绑定的实例详解
- php的入门第一个例子(包括linux的环境安装与包括页面跳转,以及curl命令的调用)
- Kotlin入门(21)活动页面的跳转处理