Windows 10 (UWP) development skills and uwp development skills

Windows 10 (UWP) development skills and uwp development skills

[This series requires a certain development foundation]

We often encounter such scenarios during development:

1. present detailed information and include some operations. For example, you can zoom in, zoom out, or multiple images to view the source image.

2. Execute a specific action with a receipt result. For example, select a contact, select a chart, and Log On As a user.

A common solution is to encapsulate a UserControl in the page to control its explicit and hidden nature. If there are few features, it doesn't matter. But it's a little more complicated. Isn't it better to encapsulate it into a single page? It can also save resources on the current page. This method can solve scenario 1, but scenario 2 requires a receipt result. What should I do? global variables are not always used. PageUserControl is encapsulated to solve these problems. It encapsulates pages containing specific logic into pseudo controls so that they can be called separately and feedback the execution results.

Call Method

PageUserControl

PageUserControl is an abstract generic class that acts as the parent class of the encapsulated control. Principle: Listen to the Navigated event of the Frame and use the cached two page variables to determine whether it is Forward or Back, and then perform the value transfer and value Operations respectively. If you don't talk much about it, go directly to the Code:

Public abstract class PageUserControl <TPage> where TPage: Page {private const string _ FrameNameInFramePage = "childrenFrame"; private Frame _ frame; private object _ frameContentWhenOpened; private TPage _ page; /// <summary> /// obtain whether the image is preferentially displayed in ChildrenFrame. /// </Summary> public bool IsChildrenFrameFirst {get; protected set ;}# region Methods protected void ShowPage () {this. openPickerPage ();} protected void ShowPage (object parameter) {this. openPickerPage (parameter);} // if you want to return a value to the caller, you need to implement this method. Protected virtual void CommitValue (TPage page) {} private void OpenPickerPage (object parameter = null) {if (null = _ frame) {_ frame = Window. current. content as Frame; if (null! = _ Frame) {// It indicates that childrenFrame on the MainPage is a sub-Frame. // This method is not absolute. There are still many flexible methods that can be extended, such as attaching attributes to specify who is 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 () {// deregister event if (null! = _ Frame) {_ frame. navigated-= OnFrameNavigated; _ frame. navigationStopped-= OnFrameNavigationStopped; _ frame. navigationFailed-= OnFrameNavigationFailed; _ frame = null; _ frameContentWhenOpened = null;} // If the cached page has a value, submit the request. If (null! = This. _ page) {this. commitValue (this. _ page); this. _ page = null ;}# endregion # region Events private void OnFrameNavigated (object sender, NavigationEventArgs e) {// if it is Back, the new page is cached. If (e. content = _ frameContentWhenOpened) {ClosePickerPage ();} else if (null = this. _ page) {var page = e. content as TPage; if (page! = Null) {this. _ page = page ;}} private void construct (object sender, NavigationFailedEventArgs e) {ClosePickerPage ();} private void construct (object sender, NavigationEventArgs e) {ClosePickerPage ();} # endregion}

The code above makes a simple extension to the Frame so that it can be presented in the sub-Frame (mainly considering the SpiltView of UWP), but it adopts fixed constraints and is not flexible. You can expand it on your own. For example, if you use an additional attribute to identify a Frame, this will not be implemented here.

The usage of PageUserControl generic classes is as follows:

Public class ImageChooser: PageUserControl <ImageChooserPage> {public ImageChooser () {// priority is given to ChildrenFrame. Base. isChildrenFrameFirst = true;} public void Show () {base. showPage ();} protected override void CommitValue (ImageChooserPage page) {base. commitValue (page); // If the page property value of the result is valid, it is thrown to the caller through the event. 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 trim (string image) {this. image = image ;}}

The above Code is applicable to scenarios where a return value is required. leave it blank if no return value is required or leave the CommitValue method not overwritten.

Note: The NavigationCacheMode operation must be performed on the call page and control page to ensure the uniqueness of the page variable of PageUserControl. For details, refer to the MSDN-NavigationCacheMode attribute introduction.

        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;            }        }

How can I apply it in the MVVM mode correctly? Use Behavior!

Refer to the example code ListPicker. In this sample code, a PageUserControl named ListPicker is encapsulated. It accepts the ItemsSources, ItemTemplate, and SelectedItem parameters, which correspond to the same attributes of ListView in ListPickerPage. ShowListPickerAction encapsulates the call to ListPicker.

<Button Content = "image" Grid. row = "1"> <I: Interaction. behaviors> <core: EventTriggerBehavior EventName = "Click"> <behaviors: showListPickerAction ItemsSource = "{Binding Images}" ItemTemplate = "{ThemeResource ImageItemTemplate}" ItemsPickedCommand = "{Binding ImagePickedCommand}" ItemsPickedInputConverter = "{StaticResource details}"/> </core: eventTriggerBehavior> </I: Interaction. behaviors> </Button>

 

For detailed implementation process, see Example: Click to open the link https://github.com/rolerzhang/UWP-DevSkills

Indicate the source for reprinting.