Windows 8 开发系列 拆分页关键问题分析

近日，在处理拆分页面时，snap_detail始终无法正常返回snap,经过一番摸索，总结如下：

页面状态管理主要有四种页面状态，全屏横向，竖屏，缩屏，满屏。然后拆分页面只是为了设计给缩屏和竖屏视图，让他们可以展示下一级页面状态，当点击列表时，会展示详细页面。

其实就是一个物理页面，在里面展示两个逻辑页面：一个列表，一个详细信息。

比如：

1.拉到缩屏时，进入

 protected override string DetermineVisualState(ApplicationViewState viewState)
        {
            // Update the back button's enabled state when the view state changes
            var logicalPageBack = this.UsingLogicalPageNavigation(viewState) && this.itemListView.SelectedItem != null;
            var physicalPageBack = this.Frame != null && this.Frame.CanGoBack;
            this.DefaultViewModel["CanGoBack"] = logicalPageBack || physicalPageBack;

            // Determine visual states for landscape layouts based not on the view state, but
            // on the width of the window.  This page has one layout that is appropriate for
            // 1366 virtual pixels or wider, and another for narrower displays or when a snapped
            // application reduces the horizontal space available to less than 1366.
            if (viewState == ApplicationViewState.Filled ||
                viewState == ApplicationViewState.FullScreenLandscape)
            {
                var windowWidth = Window.Current.Bounds.Width;
                if (windowWidth >= 1366) return "FullScreenLandscapeOrWide";
                return "FilledOrNarrow";
            }

            // When in portrait or snapped start with the default visual state name, then add a
            // suffix when viewing details instead of the list
            var defaultStateName = base.DetermineVisualState(viewState);
            return logicalPageBack ? defaultStateName + "_Detail" : defaultStateName;
        }

然后进入，判断页面当前的状态

   private bool UsingLogicalPageNavigation(ApplicationViewState? viewState = null)
        {
            if (viewState == null) viewState = ApplicationView.Value;
            return viewState == ApplicationViewState.FullScreenPortrait ||
                viewState == ApplicationViewState.Snapped;
        }

由上可以判断出当的snap,但是这里重写后，判断后返回的字串是：snap_detail

然后回到layoutware.cs，从这里，可以看到视图管理器会定位到页面前端的视图设置，进行隐藏控件等

    private void WindowSizeChanged(object sender, WindowSizeChangedEventArgs e)
        {
            this.InvalidateVisualState();
        }

 public void InvalidateVisualState()
        {
            if (this._layoutAwareControls != null)
            {
                string visualState = DetermineVisualState(ApplicationView.Value);
                foreach (var layoutAwareControl in this._layoutAwareControls)
                {
                    VisualStateManager.GoToState(layoutAwareControl, visualState, false);
                }
            }
        }

当从snap_detail点击返回时，进入代码：

 /// <summary>
        /// Invoked when the page's back button is pressed.
        /// </summary>
        /// <param name="sender">The back button instance.</param>
        /// <param name="e">Event data that describes how the back button was clicked.</param>
        protected override void GoBack(object sender, RoutedEventArgs e)
        {
            if (this.UsingLogicalPageNavigation() && itemListView.SelectedItem != null)
            {
                // When logical page navigation is in effect and there's a selected item that
                // item's details are currently displayed.  Clearing the selection will return to
                // the item list.  From the user's point of view this is a logical backward
                // navigation.
                this.itemListView.SelectedItem = null;
            }
            else
            {
                // When logical page navigation is not in effect, or when there is no selected
                // item, use the default back button behavior.
                base.GoBack(sender, e);
            }
        }

    void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();
        }

进入InvalidateVisualState()再去判断当前状态，此时： string visualState = DetermineVisualState(ApplicationView.Value);

当listview.selectitem=null时，导致logicalPageBack=false,说明不再是逻辑页面的返回了，而是物理返回前一个页面，所以关键在这，对选中的item的判断，会直接左右是否逻辑返回。

而我当时由于缺少下面这个方法，所以无法实现逻辑返回

     void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();
        }

 protected override void GoBack(object sender, RoutedEventArgs e)
        {
            if (this.UsingLogicalPageNavigation() && itemListView.SelectedItem != null)
            {
                // When logical page navigation is in effect and there's a selected item that
                // item's details are currently displayed.  Clearing the selection will return to
                // the item list.  From the user's point of view this is a logical backward
                // navigation.
                this.itemListView.SelectedItem = null;
            }
            else
            {
                // When logical page navigation is not in effect, or when there is no selected
                // item, use the default back button behavior.
                base.GoBack(sender, e);
            }
        }

所以在Goback方法中只对this.itemListView.SelectedItem = null;

没有changed事件再去判断整个页面的状态去到何处，所以也出现了点Goback没反应的情况了。

当点击数下时，此时selectitem=null，就会直接去到返回方法，真正返回到前一页面

if (this.UsingLogicalPageNavigation() && itemListView.SelectedItem != null)

        base.GoBack(sender, e);