UWP入门(七)--SplitView详解与页面跳转

简介: 原文:UWP入门(七)--SplitView详解与页面跳转 官方文档,逼着自己用英文看,UWP开发离不开官方文档 1. SplitView 拆分视图控件 拆分视图控件具有一个可展开/可折叠的窗格和一个内容区域 singleObject ...
原文: 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;
        }
目录
相关文章
|
存储 JavaScript Java
|
JSON 小程序 前端开发
微信小程序(十四)小程序自定义弹窗组件
上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件。 首先,放一下,最终的效果图:
367 0
|
Java Maven Android开发
Android组件化开发(五)--完整版音乐播放组件的封装
前面几篇系列文章我们讲解了`组件化开发`中几个常用功能组件的开发,包括:`网络请求组件`,`图片加载请求组件`,`应用保活组件`。今天我们来封装一个`音乐播放组件`。
UWP入门(八)--几个简单的控件
原文:UWP入门(八)--几个简单的控件 每天看几个,要不聊几天我就可以看完啦,加油! 看效果 1. CheckBox pr...
770 0