Page navigation

Questions
#1

Hi, I struggle with the navigation between my different pages. Probably it’s easy but I don’t know how to realise it. What I want:
I have some buttons on a page which shall lead me to the selected page. The page shall be opend in the page browser to avoid to create the buttons for all pages. It shall look like this:

page
page800×400 4.11 KB

By pressing the page 1 button the page 1 shall be opened in the page browser etc.
Can you give me a hint how to realise it. Thanks in advance.

#2

There’s a bunch of ways to accomplish this. I tossed together a quick example for you to reference.
I like to use a virtual device for the selected page and thats what I did in my example. SteMo.hrp (633.5 KB)

If you wanted to keep it more simple, as an alternative, the 4 buttons can be configured to change the page browser page property like this:

image
image1172×663 74.1 KB

let me know if you need more explanation

#3

I am interested in Learning the Virtual Device setup. Do you mind going into more detail

#4

Take a look at my attached project in my last post.

The short of it is:
EventTriggers of the buttons set the Value of the Virtual Device
DataTriggers of the PageBrowser set the page property based on the value of the virtual device.

I cant remember why I did it originally, honestly haha. I think its because I was binding so many datatriggers based on the selected page

#5

Just to spark more ideas related to this type of page navigation…

I added a second EventTrigger to the buttons. It has a sequence of PropertyActions and Delays that give the page transition a fade-in effect. To be more specific, each PropertyAction sets the Opacity in steps of 10% followed by a 45ms delay.

image
image1187×588 44.9 KB

I think the fade-in (opacity) is simple and elegant. In my own project, I also have PageBrowsers that I use as pop-ups that have an opening/rising effect by sequentially setting the Height and Width. It certainly takes some experimenting.

See attached: SteMoWithFade.hrp (633.7 KB)

Just keep in mind, doing these kinds of things are more taxing on the CPU and that older tablets/devices might not handle it so well. You should have a solid running, issue free project before doing this kind of stuff.

#6

Many thanks both of you. That was exactly what I was looking for.

1 Like
#7

I figured out how to do this without having to use a variable and binding. I first implemented this thread’s solution, but seemed a bit overly complicated. To make it work you had to have each button have two layers: one to receive the click and the other to show the icon/image state you want.

My solution does require some manual input of all your icons (to uncheck each one) but might be a nice alternative. See attached.
IconPageSelectIssueExampleRev.hrp (132.8 KB)