Windows 10（UWP）开发技巧 - PageUserControl

       【本系列须要具备必定开发基础】

       咱们在开发中常常遇到这样的场景：

       1.呈现详细信息，且包含一些操做。如：查看原图，支持放大，缩小，多图。

       2.执行特定的行为，且要有回执结果。如：选择联系人，选中某图，用户登陆。

       广泛的解决方案就是封装一个UserControl放到页面里，控制其显隐性。若是功能不多，那无所谓，可稍微复杂一点的，封装成单独的一个页面不是更好吗？还能节省当前页面的资源。此方法可以解决场景1，可是场景2须要回执结果，又该怎么办，总不能用全局变量吧。PageUserControl就是主要解决这些问题而封装，它将包含特定逻辑的页面封装成伪控件，使其能够单独调用，且能够反馈执行结果。

       调用方法如图：

      

      PageUserControl

      PageUserControl是一个抽象的泛型类，做为封装控件的父类。原理：监听Frame的Navigated事件，利用缓存的两个页面变量，区别出是Forward仍是Back，而后分别作传值和取值操做。废话很少说，直接上代码：

    public abstract class PageUserControl<TPage>
        where TPage : Page
    {
        private const string _FrameNameInFramePage = "childrenFrame";

        private Frame _frame;
        private object _frameContentWhenOpened;
        private TPage _page;

        /// <summary>
        /// 获取是否优先呈如今ChildrenFrame中。
        /// </summary>
        public bool IsChildrenFrameFirst { get; protected set; }

        #region Methods

        protected void ShowPage()
        {
            this.OpenPickerPage();
        }

        protected void ShowPage(object parameter)
        {
            this.OpenPickerPage(parameter);
        }

        //若需向调用者返回某值，则须要实现此方法。
        protected virtual void CommitValue(TPage page)
        {
        }

        private void OpenPickerPage(object parameter = null)
        {
            if (null == _frame)
            {
                _frame = Window.Current.Content as Frame;
                if (null != _frame)
                {
                    //这里是约定MainPage页中childrenFrame是子Frame。
                    //此方法并不是绝对，仍有不少灵活的方法能够扩展，好比附加属性来指定谁是ChildrenFrame。
                    if (this.IsChildrenFrameFirst && this._frame.CurrentSourcePageType.Equals(typeof(Pages.MainPage)))
                    {
                        var framePage = (Pages.MainPage)_frame.Content;
                        var frameInFramePage = framePage.FindName(_FrameNameInFramePage) as Frame;
                        if (frameInFramePage != null)
                        {
                            this._frame = frameInFramePage;
                        }
                    }

                    _frameContentWhenOpened = _frame.Content;

                    _frame.Navigated += OnFrameNavigated;
                    _frame.NavigationStopped += OnFrameNavigationStopped;
                    _frame.NavigationFailed += OnFrameNavigationFailed;

                    if (parameter == null)
                    {
                        _frame.Navigate(typeof(TPage));
                    }
                    else
                    {
                        _frame.Navigate(typeof(TPage), parameter);
                    }
                }
            }
        }

        private void ClosePickerPage()
        {
            // 注销事件
            if (null != _frame)
            {
                _frame.Navigated -= OnFrameNavigated;
                _frame.NavigationStopped -= OnFrameNavigationStopped;
                _frame.NavigationFailed -= OnFrameNavigationFailed;

                _frame = null;
                _frameContentWhenOpened = null;
            }

            //若缓存页面有值，则尝试作提交处理。
            if (null != this._page)
            {
                this.CommitValue(this._page);
                this._page = null;
            }
        }

        #endregion

        #region Events

        private void OnFrameNavigated(object sender, NavigationEventArgs e)
        {
            //如果Back则作关闭处理，如果Forward则把新页缓存。
            if (e.Content == _frameContentWhenOpened)
            {
                ClosePickerPage();
            }
            else if (null == this._page)
            {
                var page = e.Content as TPage;

                if (page != null)
                {
                    this._page = page;
                }
            }
        }

        private void OnFrameNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            ClosePickerPage();
        }

        private void OnFrameNavigationStopped(object sender, NavigationEventArgs e)
        {
            ClosePickerPage();
        }

        #endregion
    }

        以上的代码对Frame作了简单扩展，使其能支持在子Frame中呈现（主要是考虑到UWP的SpiltView），可是采用的固定约束，并不灵活。各位看官能够自行扩展，好比：使用附加属性来标识某一个Frame，这里就不实现了。

 

       PageUserControl泛型类的使用参考以下：

public class ImageChooser : PageUserControl<ImageChooserPage>
    {
        public ImageChooser()
        {
            //优先在ChildrenFrame呈现。
            base.IsChildrenFrameFirst = true;
        }

        public void Show()
        {
            base.ShowPage();
        }

        protected override void CommitValue(ImageChooserPage page)
        {
            base.CommitValue(page);

            //若标识结果的页面属性值有效，则经过事件抛给调用者。
            if (!string.IsNullOrWhiteSpace(page.Value))
            {
                this.OnCompleted(page.Value);
            }
        }

        public event EventHandler<ChooseImageCompletedEventArgs> Completed;
        private void OnCompleted(string image)
        {
            var handler = this.Completed;
            if (handler != null)
            {
                handler(this, new ChooseImageCompletedEventArgs(image));
            }
        }
    }

    public class ChooseImageCompletedEventArgs : EventArgs
    {
        public string Image { get; private set; }

        internal ChooseImageCompletedEventArgs(string image)
        {
            this.Image = image;
        }
    }

      以上代码是针对须要返回值的场景，若是无须返回值则留空或者不重写CommitValue方法便可。

      注意：调用页和控件页须要对NavigationCacheMode操做以下图，使其保证PageUserControl的页面变量惟一性，具体缘由参考MSDN-NavigationCacheMode属性介绍。

        public HomePage()
        {
            this.InitializeComponent();
            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            base.OnNavigatedFrom(e);
            if (e.NavigationMode == NavigationMode.Back)
            {
                this.NavigationCacheMode = NavigationCacheMode.Disabled;
            }
        }

        如何正确应用在MVVM模式中？使用Behavior！

        参考示例代码ListPicker。在本示例代码中封装了一个名为ListPicker的PageUserControl，它接受ItemsSources,ItemTemplate,SelectedItem参数，分别对应ListPickerPage中ListView的相同属性。ShowListPickerAction封装了对ListPicker的调用。

        <Button Content="图片"
                Grid.Row="1">
            <i:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="Click">
                    <behaviors:ShowListPickerAction ItemsSource="{Binding Images}" ItemTemplate="{ThemeResource ImageItemTemplate}" ItemsPickedCommand="{Binding ImagePickedCommand}" ItemsPickedInputConverter="{StaticResource ListPickerItemsPickedEventArgsConverter}"/>
                </core:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </Button>

 

        详细实现过程，请参考示例：

         点击打开连接

        https://github.com/rolerzhang/UWP-DevSkills

 转载请注明出处。