在UWP的大小触发器中更改控件的父级

Question

I'm creating a Windows 10 Universal app, there are two panels in my main page.

In tablet/desktop mode, both are visible at the same time (just two simple Grid s, one fills the left side and the other one fills the right side)

However, in phone mode, there's a pivot and user can swipe between panels.

(I could use SplitView and hamburger menus which work easily in both Tablet/Desktop and Phone modes, but a pivot makes more sense in my case)

So, What I currently did is, I have two instances of each panel. PhonePanel1 and PhonePanel2 are two grids inside two pages of my pivot control, and TabletPanel1 and TabletPanel2 are two grids which can be shown side by side. and I use AdaptiveTrigger s to detect page width and switch between these two view methods.

However, having two instances of each panel is not a good approach, because those are showing basically the same content.

Is there any better approach to do this? Maybe changing Grid's parent when triggers are changing view mode? or something better?

Answer 1

The only way to change the parent that I can think of is to write some code behind that will render them in the new location. A suitable solution may be to defer the loading of the controls until they are needed.

x:DeferLoadStrategy=”Lazy“

If you add this property to your controls that are duplicated, they will only be loaded when required. So on a phone the PC/Tablet view should never be loaded, unless the user is running in Continuum on an external display.

On a PC you may still end up with both loaded (If the user resizes the window) - On a PC there are usually more resources so it's less of a problem there in most cases.

I looked into the code behind approach to move the controls to a different parent and I think honestly it's premature to do that when it might not even improve performance.

I have gone for the Defer Load Strategy property and found performance to be fine, and it requires very little code. My duplicate controls are sharing the same ViewModel so I pretty much just added the property to ensure resources are only used when essential.

Answer 2

There is nothing wrong in your approach. To reduce memory usage, when adaptive trigger happens for example on the phone, set TabletPanel1 and TabletPanel2 visibility to collapsed.

If all panels use the same datacontext then leave it as is, if not set datacontext for collapsed controls to null.

Answer 3

您可以将每个面板创建为用户控件，然后只需要定义一次内容，但是每个控件都可以包含在所需的每个布局中。