UWP app architecture dilemma

1
votes

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 =)

2
windowsuwp
One way to reduce complexity of a page is breaking it into separate UserControls. - Mehrzad Chehraz
@Mehrzad Chehraz, I thought about custom controls, but in my mind it seems they are not exactly for this situation. I think custom controls have to be reusable, in my situation there are gonna be many controls which just hold logic inside for one time usage. In android fragments exist for my situation =) Anyway, it's possibly solution, so please pass it's opinion as answer, soi can mark it, if i will be satisfied after try =) (maybe they have some problems with clicks within overlay or so) - doubledeath
I added the answer. However, I could not understand the problem you have with using a UserControl just like a fragment in android. I'll update my answer if you give me more details. - Mehrzad Chehraz

2 Answers

3
votes

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.

0
votes

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.