Hey everyone! Newbie is here again :)

I'm currently making multi-page screen and I'm thinking about how to make scrolling not "Up" and "Down", but showing and collapsing the element. So the idea is when scrolling up, page 2 collapses and page 1 appears. And vice versa if scrolling down.

So I found PreviewMouseWheel in EventTriggers. My grid catches my scrolling events, but I don't know how to define up scrolling or down. After I asked gpt what to do next, how to make my command work and he suggested to create MV.cs files and make a little code that defines whether it's scrolling up or down. But... in preview it didn't work. Gpt said, that in Studio Preview commands doesn't work properly.

Any idea how to fix that? Or make it much easier? Thanks in advance.

Hi MaKrossEffect, great to see you again!

We'll cover two subjects:

In terms of the MouseWheel ScrollDown and MouseWheel ScrollUp Events specifically. Thanks to this post of yours, we've identified that this is something we need to add support for in Studio; I've created a Ticket for us to implement a solution for this that you can follow here: #4817

Next, in terms of a wider subject, we'll cover what I would personally consider the easiest way to achieve the general mechanics you're looking for where you can cycle up and down within an array of 'pages'. This will all be explained in further detail down below, and you can also find a Sample file attached that you can inspect, and play with:


For now, pending us closing the ticket above, this uses ArrowKeys in-lieu of MouseWheel Scrolling.
However, once that feature is implemented, it will be a very easy transition to have the same functionality available via MouseWheel Scrolling, keeping the entire setup otherwise, the exact same.


So with all that said, let's jump into the process of making the attached Sample file:


1) ENCAPSULATING EACH 'PAGE' FOR EASY PAGE-SWITCHING:

What I would do here, is to start by having each 'page' within its own DataTemplate.

Using a DataTemplate grants all of the freedoms of having a 'page's' contents within a nice, self-contained XAML block, but with the added benefit that:

1) Templates can be applied and/or switched on-the-fly via Properties.

2) DataTemplates can be applied as Templates to a very wide array of Elements. For example, you can have the same DataTemplate serving a ContentControl's 'Content' Template, just as much as you could have the same DataTemplate served to a ListBox as an individual 'ListBoxItem' Template.

The easiest way to create a generic DataTemplate in Studio is from the Resources Panel:


As you can see here, there are 4 different DataTemplates created, one for each Page. Each DataTemplate includes the internal content of each 'page'.

With these 'pages' prepared, we can now get into setting up the functionality to 'switch' between them.


2) 'PAGE' SWITCHING: SETUP

Essentially, the 'trick' that we're going to do here, is to take advantage of already-existing Elements that contain a concept of 'indexing up' and 'indexing down', as this is mechanically, what we'll hook into to go to the next or previous 'pages' in your series.

The ListBox Element is a great choice for exactly this, as among its Properties, it features a 'Selected Index' Property which makes it capable of moving up and down a series of items we specify:

Each individual item of a ListBox can either be completely Data-Driven, or we can fill them in an 'inline' fashion by introducing multiple instances of the ListBoxItem Element.
(If you want to dive into how to populate a ListBox via Data, 🎓 Creating a Character Selection Screen in Noesis Studio is the best place to go.)

In our case however, we'll be using the 'inline' option; and dragging-and-dropping one ListBoxItem, for each of our 'pages', as so:



Now, all that we need to do, is to set each of our ListBoxItems 'Content' Templates, to use each of our 'page' DataTemplates.
Since we created each of our 'pages' as a generic DataTemplate, we get to take advantage of its compatibility in setting it as the ListBoxItem Content Template:


As you can see here, now each of our 'pages' are shown in a list, and if you were to hit 'Play', you would be able to click each of the items, and 'select' them in the process. You'll also find that once one is clicked, you can use the ArrowKeys to move the selection marquee up and down the list.

Now one last thing before we move onto only displaying one of these ' pages', according to your objective, is that we just want to set which of the 'pages' the list starts with as the one to display by default. For this, if we select the ListBox, we can set its 'Selected Index' Property to '0' for example, to display the first item in the list, which in this case, corresponds to Page 1:



3) CURRENT 'PAGE' DISPLAY

Next, we're going to introduce a ContentControl Element.
This is also an Element that, just like the ListBoxItem, can have its Content Template set to use a generic DataTemplate:


Now, all that we need to do, is to Bind this ContentControl's Content Template, to the SelectedItem in our ListBox.

To do so, we'll first just want to give a custom name to our ListBoxItem, by double-clicking on it in the Navigator. This will then allow us to Bind to it by Name in the next step.

To do so, we'll select our ContentControl, and under the 'Templating' section in its Properties, we'll hover over its 'Content Template', and from it's 3-Dot Menu, we'll select 'Create Binding':
Then, under 'Element Name', we'll select the name of our ListBox, and we'll then expand the 'Path' section, and find, and expand the 'SelectedItem' item in the list:


With the 'SelectedItem' expanded, under it, we'll then find its 'ContentTemplate' item, and we'll select that:


And now, what you will immediately see, is that the ContentControl systematically displays the 'page' selected in the ListBox. If you hit 'Play', and click on each of the ListBox Items, you'll see that your ContentControl updates:


And this, essentially handles the entirety of the mechanics of 'Page Switching'


4) FINAL TOUCHES

So with your goals, there are two things we are missing:

Firstly, we're only using the ListBox Element to hijack its functionality; and we only want the user to see the ContentControl that shows 1 'page' at a time.
For this, simply setting the ListBox to 0% Opacity is actually the easiest way to do this. You can also 'hide it' behind the background, or any other sorts of techniques to hide it from view, but allow it to exist to leverage its functions. Setting its Visibility to 'Hidden' or 'Collapsed' is however not recommended as it will prevent some of the input we've set up so far.

Secondly, as you may have noticed so far, to engage being able to index up and down the list with the ArrowKeys, and eventually what will be your MouseWheel ScrollUp/ScrollDown, we first had to click on any of the ListBoxItems to engage Focus on it.

In your model, I would assume you want this to be interactive the moment the user enters the screen; so to resolve this, we'll head to the Interactivity Panel, then, to the 'Triggers' Tab.

From there, we'll simply create an EventTrigger on the Page that accomplishes the following:
When the Page is Loaded, Set Focus on the ListBox


Now, when you hit 'Play' again, you can immediately use the ArrowKeys to index up and down your selection:



Once we get the MouseWheel ScrollUp and MouseWheel ScrollDown Events in, all that you'll need to do, is to create two Triggers, one that changes the ListBox SelectedIndex "+1" on MouseWheel ScrollDown, and one that changes the ListBox SelectedIndex "-1" on MouseWheel ScrollUp.

Let us know how all this sounds to you, and if you have any other questions.

- Dorian

Hey! Thank you so much for PopUp element guide and this one!

The main idea is scrolling, not using arrows. Scrolling whole grid looks prettier and I want to use Mouse Scroll for comfortable user experience.

Example of idea:



And I have one more question about optimisation. Is it good if I do all my UI in one Page? I have very long list of grids and elements and I'm curious about optimisation of my UI.

Hi MaKrossEffect,

I just wanted to swing by real quick to let you know that we we haven't forgotten about this thread with you; we're looking to get the MouseWheel Scroll Up/Down functionality into an upcoming build, as well as putting together a little Studio Project sample to share with you that reflects the functionality you've attached in the video.

We'll be back soon! :)

- Dorian

Hey again MaKrossEffect,

As promised, I'm back with a few goodies for you!

MouseWheel Scroll Trigger

As a result of your request, in the latest 📥Studio 0.2.277-beta build, you'll be able to find a brand new 'MouseWheelTrigger' in the 'Add Trigger' menu.

This gets added like any other Trigger, and in its Properties, allows you to set whether you'd like to listen for MouseWheelUp or MouseWheelDown.

From there, you can set any desired Conditions for the Trigger to fire, followed by setting which Actions you'd like to fire as a result of the MouseWheel action.



Sample Page Scroller Project

Secondly, using the reference video you provided, I've created a Sample Project for you, which features Page Scrolling using the principles we've covered before on leveraging ListBox Elements to create a scrollable array of 'pages'.

This sample offers three different ways of scrolling up and down through the pages: Scrolling Up/Down with the MouseScrollWheel, clicking on Up/Down Arrows, or clicking on individual Crumbs in the sidebar to immediately jump to a specific page in the array.


Let us know how all of this works for you, and thanks again for dropping by to bring all of this up!

- Dorian