UWP入门（七）--SplitView详解与页面跳转

官方文档，逼着自己用英文看，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;
}