Page changing: Push, Open, Close, Goto, PageBrowser

First off, really enjoying the app. Getting setup with default device groups was so easy, that I’ve quickly abandoned it for the joy and frustration of full customization! Now that I have a cool top and side menu on the go, I’m trying to decide the best way to change pages on menu key presses, and I’m having a hard time wrapping my brain around some of the different methods. Here’s a planning image to give you the gist of what I’m going for: I want my persistent top and side menus to remain static, while button presses bring up the appropriate content pages.

What are my options, and what is the difference between them? I tested making the content space a page browser. It works of course, but then how do I plan the size and layout of the subpages to fit without going over the edges of my carefully planned screen real estate, or making things too small to use? I haven’t seen a method for resizing individual pages in a project, as presumably each is normally full screen. So If I use this method, how do I best account for scaling down of the sub-pages? Trial and error? Perhaps I make the entire home screen a page browser, and then just keep the menu area empty and transparent on subpages? Will the menu items still function with partially transparent pages superimposed on them?

I see I can make custom tiles a specific size and layout. That might work, although not everything I want in the space is going to function naturally as a tile. And if I’ve read correctly is it only the DeviceBrowser that can interact with tiles? I don’t see any other obvious way to add them to a layout.

Alternately, should I just copy my home page, edit the content area as appropriate and use the menu items to switch between pages? That was my initial first thought, although I’ve built in a good deal of complexity into the menu (datatriggers and rules linking multiple devices and labels), so it would be nice if it didn’t need to reload everything each page change, and if I didn’t need to edit multiple pages every time I want to tweak how something works.

If I do use this method, I’m still a little fuzzy on the differences between OpenPage, PushPage, GotoPage and ClosePage, and when which one would be more appropriate. I presume pushPage or goto are likely what I need.

I imagine there are a lot of ways to do this, so interested in some advice from past experience before I plow ahead with all my subpage content. Thanks!

I posted a short write-up on all of the different page navigation methods here:

1 Like

Thanks Bill, that’s helpful. Although I’m still not quite sure on all the implications for my project goals. When using a static menu and revolving subpages, do most people just pull them up in a page browser? It seems the most intuitive until coming up against the inability to customize page sizes. Or is there some other way to open and close pages in a navigation stack and have the custom menu persist above it, or be linked to each page without having to recreate it each time? I feel like there’s something fairly obvious about the best way to do this that I’m overlooking…

I guess the issue is I have a bunch of device linked indicators in the persistent menu, making it a bit more of a beast than just a usual list of tabs or buttons.

For your layout, you should use a PageBrowser for your “MENU LINKED PAGE CONTENTS”. The items above it & on the side of it do not need a browser.

Thanks. And no way to resize those pages I presume? I just need to plan for everything to be scaled down slightly to be displayed in the smaller area?

Yes. You can resize them. The page size will match the PageBrowser size.

When you’re designing your pages for the PageBrowser temporarily adjust the Design Height & Width in the top toolbar to suit your needs. Page sizes are not saved in the actual XAML file. Page sizes automatically adjust to fit their container. Your container in this case is the PageBrowser so it is the one that determines exactly how large your page will be.

1 Like

Thanks! Will do that.

Your project is similar to mine. (Not anywhere near finished but functional…)

That’s looking good. Thanks for the tips. And I’m early into this, but I’m starting to wonder with so much customization potential, is a project ever really done? :slight_smile: :grinning:

This doesn’t seem to work, as any change I make is applied to the whole project, not just the current page, and if it doesn’t match an expected device, all I see is this, and am unable to edit anything. I’ll just design everything a bit oversized and plan for scaling down I guess. Not very exact, but not too hard either.

This is only for iOS. You can temporarily change the design platform to Android or Windows while working on your page.

1 Like