none
【SplitView】像 Win10 自带的通用应用的 SplitView 是怎么实现的? RRS feed

  • 问题

  • 网上大多数 SplitView 示例都是汉堡按钮在 Pane 中的,不像 Win10 自带应用, Pane完全隐藏时,汉堡按钮依然存在,汉堡按钮独立于 Pane的,又像是 Pane 的一个子元素。 这是怎么实现的

    请问有没有 SplitView 的官方示例或者设计规范

    2015年8月29日 8:27

答案

  • 把按钮定义在外面就好了。

    <SplitView x:Name="RootSplitView"
                       IsPaneOpen="False"
                       DisplayMode="CompactOverlay"
                       Margin="0,0,0,0"
                       OpenPaneLength="150" CompactPaneLength="48"
                       IsTabStop="False">
                <SplitView.Pane>
                    <!-- A custom ListView to display the items in the pane.  The automation Name is set in the ContainerContentChanging event. -->
                    <controls:NavMenuListView x:Name="NavMenuList"
                                              TabIndex="3"
                                              Margin="0,48,0,0"
                                              Background="#2B2B2B"
                                              ContainerContentChanging="NavMenuItemContainerContentChanging"
                                              ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                                              ItemTemplate="{StaticResource NavMenuItemTemplate}"
                                              ItemInvoked="NavMenuList_ItemInvoked" />
                </SplitView.Pane>
                <Frame x:Name="AppShellFrame"
                       Navigating="OnNavigatingToPage"
                       Navigated="OnNavigatedToPage">
                    <Frame.ContentTransitions>
                        <TransitionCollection>
                            <NavigationThemeTransition>
                                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                                    <EntranceNavigationTransitionInfo />
                                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                            </NavigationThemeTransition>
                        </TransitionCollection>
                    </Frame.ContentTransitions>
                </Frame>
                <!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
                     OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded. -->
    
            </SplitView>
    
            <!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. -->
            <ToggleButton x:Name="TogglePaneButton"
                          TabIndex="1"
                          Background="#10893E"
                          Foreground="White"
                          Width="48"
                          Height="48"
                          Style="{StaticResource SplitViewTogglePaneButtonStyle}"
                          IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
                          Unchecked="TogglePaneButton_Checked"
                          AutomationProperties.Name="Menu"
                          ToolTipService.ToolTip="Menu" />

    2015年9月7日 9:44

全部回复

  • 把按钮定义在外面就好了。

    <SplitView x:Name="RootSplitView"
                       IsPaneOpen="False"
                       DisplayMode="CompactOverlay"
                       Margin="0,0,0,0"
                       OpenPaneLength="150" CompactPaneLength="48"
                       IsTabStop="False">
                <SplitView.Pane>
                    <!-- A custom ListView to display the items in the pane.  The automation Name is set in the ContainerContentChanging event. -->
                    <controls:NavMenuListView x:Name="NavMenuList"
                                              TabIndex="3"
                                              Margin="0,48,0,0"
                                              Background="#2B2B2B"
                                              ContainerContentChanging="NavMenuItemContainerContentChanging"
                                              ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                                              ItemTemplate="{StaticResource NavMenuItemTemplate}"
                                              ItemInvoked="NavMenuList_ItemInvoked" />
                </SplitView.Pane>
                <Frame x:Name="AppShellFrame"
                       Navigating="OnNavigatingToPage"
                       Navigated="OnNavigatedToPage">
                    <Frame.ContentTransitions>
                        <TransitionCollection>
                            <NavigationThemeTransition>
                                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                                    <EntranceNavigationTransitionInfo />
                                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                            </NavigationThemeTransition>
                        </TransitionCollection>
                    </Frame.ContentTransitions>
                </Frame>
                <!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
                     OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded. -->
    
            </SplitView>
    
            <!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. -->
            <ToggleButton x:Name="TogglePaneButton"
                          TabIndex="1"
                          Background="#10893E"
                          Foreground="White"
                          Width="48"
                          Height="48"
                          Style="{StaticResource SplitViewTogglePaneButtonStyle}"
                          IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
                          Unchecked="TogglePaneButton_Checked"
                          AutomationProperties.Name="Menu"
                          ToolTipService.ToolTip="Menu" />

    2015年9月7日 9:44
  • 事实上计算器是在Pane和Content里各画了一个按钮,观察Pane开关的动画就可以注意到
    2017年3月9日 15:06