UWP app architecture dilemma

Question

I am newbie at UWP developing (design targeting phones), and now i am developing one app using it (have experience in Android developing). App is designed as single-page app which has a map and tons of another menus, buttons and field: they are appear and disappear based on some logic. Many of this controls rendering or filling in runtime (without/partially use xaml, just in c#, if possible viewmodel getting used), because it's loading from API. The dilemma is page class (also as xaml one) going to be larger and larger, and i am not sure how to separate this correctly (i am not mean partial classes), for not all this controls getting loaded on app launch (now they are, and i collapse/visible needed). For example, in Android terminology there is fragments can replace/overlay each other with animations etc. Now i have one extension class where i interact with API and only send callbacks to page class, but it's not enough =)

Answer 1

One way to reduce complexity of a page is breaking it into separate UserControls . Combining that with MVVM pattern , you can also separate the view-logic in multuple view-models classes.

As an example, consider you have a master detail layout in your page, let's say this view shows users information. You will have three separate views:

• UserView (inherits Page) - Activity in android
• UserListView (inherits UserControl) - Fragment in android
• UserDetailsView (inherits UserControl) - Fragment in android

and also three separate view models respectively. There are some challenges with this pattern:

Communication

Your views need to communicate to each other. For example, when you select a user in the UserListView, the UserDetailsView need to update and shows details of the selected user.

There are at least three ways to communicate between these views:

• Views directly call each other through methods and dependency properties
• Views communicate indirectly through the model
• Views communicate indirectly through their view-model objects

I usually choose first and second methods and not the third one.

Shared UI Resources

Views in a page may want to use the shared resource in the page, the command bar for example. For example, the UserListView may need to have a Add (+) button on the command bar, also the UserDetailsView may need a few buttons as well. This will be challenge for you to handle this kind of situations.

Answer 2

You can separate your logic using MVVM Pattern.

https://blogs.msdn.microsoft.com/johnshews_blog/2015/09/09/a-minimal-mvvm-uwp-app/

You can use the power of XAML to hide or show your controls depending of the business rules, using Binding or x:Bind

Using MVVM Pattern is the best practice to create XAML based applications like UWP, WPF.