Hi Dorian,

I've got this little UI. I made a generic version for you to have something to look at. I'm certain that Noesis Studio can handle what I have in mind but I've been working on this for a couple of days and coming up empty. I thought you could point me in the right direction.

1. When I click on a button in this UI, I have an animation of the buttons leaving the Home panel. (All good, I got this.)
2. I want to switch visual states to a new UI panel that corresponds to the button I've pressed. Let's say it's the Backpack. (I know how to set up Visual States. I got this!)
3. Now that the Home menu is empty, I can set a trigger to change the of the menu title to "Backpack", (I got this too!)
4. I want to play a storyboard animation that brings in the buttons for the Backpack. (I'm pretty solid so far. Here's where I get hung up.)
5 I'd like to use the back arrow in the upper left hand corner to navigate back to the Home panel. If I'm a few levels deep into this ui, how does the back arrow know which panel to load up?
6. Now I want to choose a different button, the Bunker, to navigate to the Bunker panel.
7. I'd like to re-use the storyboard I created to make the buttons leave the stage and then load up the Bunker panel with it's button enter animation.

Hopefully you've followed my example.

Is there any way to pass logic into the different buttons so I can re-use the animation of the buttons leaving the scene and intelligently select the corresponding panel button enter animation?

In short, I'd like to build a logic based state machine that can access the same animation but show different panels based on passing along some information. I can get some of this to work with Triggers but all of the actions happen so quickly, I can't control the speed. I like the event in the animation timeline, it allows me to finish the animation of the buttons leaving the scene but it doesn't offer any logic to play a new storyboard. I can't say "play Bunker storyboard" because I pressed on the Bunker button. Is there a sample of this that you can point me to so I can study how it's set up?

Thanks again for your time. -Jeremy

Hey Jeremy, Dorian here!

Didn't want to leave you hanging for too long, and just wanted to send a really quick response to let you know that I have my eyes on this. I've started working on a small sample for you which I should be able to get sent over tomorrow.

Thanks for your patience, and speak again really soon!

- Dorian

I appreciate that. Since my post, I've been playing with visual states. I moved all of my storyboards into the different visual states. My big hang up right now is that I'm losing functionality with various buttons. I think it's because it's remaining in the same state after I close the menu. Can't figure out how to reset things back to normal. Thanks for the update! -Jer

Hey Jeremy, I'm back!

Here's a share with the Project we'll be looking at: https://drive.google.com/drive/folders/ ... drive_link

If you hit 'Download All' in the upper-right corner, you'll be able to Add it to Studio, and get your hands on the below:



So, with that in-hand, let's get started!

Fundamental Principles: Storing Screens/SubScreens as ContentControl Content Templates

At the core of this system, is a concept that we're encouraging all of our users to adopt, which is this notion that individual 'widgets', whether they be components or in this case, entire screens/sub-screens, be stored as ContentControl Content Templates.

Basically, each ContentControl Content Template acts as a 'mini-Page' in which you have complete freedom to compose your content inside as you wish.
However, the big advantage of these being stored as Resources instead of a Page, is that these Content Templates are fed into a ContentControl Element to display them.

These can either be set up by introducing a ContentControl to a Page, right-clicking on it, navigating to the Templates-->'Content' context menu category, or a 'Data Template' can be created from the Resources Panel.


(If you end up doing the context-menu route, make sure to find the Resource in the Resources Panel, select it, and clear its Data Type Property to make it universally compatible across all Types)

The big advantage that going this route provides is that you are able to swap between these Templates at-will in a dynamic manner.

Here's an example of this Property in the context of a ContentControl:


Now since this is a Property Value, as you may have guessed -- this means the value is something we can change via a Trigger's 'ChangePropertyAction' if we wanted to as one route; or in our case, using the ContentControl's 'Content Navigation' Properties, which we'll get into next.


The Content Navigation Properties

Now this is where the real magic happens. There is a dedicated Properties section inside of the ContentControl's Properties, which essentially allows you to declare a manifest of all of the Templates (in our case, 'sub-screens') that you want to automatically swap between.

All that you need to do is to check 'Navigation Root' on, then add Items to the 'Destinations' where each one represents a single sub-screen.
Give each 'sub-screen' a unique ID, and then declare which Content Template you want to display for each one:



Preparing the ContentControl Template For This System

Next, we need to set up our ContentControl Template that will serve as the host for the sub-screens as ContentControl Content Templates to serve this purpose.

All you need to do here is to right-click on the ContentControl that is to serve as this host, and from the Templates-->'ContentControl' context menu category, create a new Template:


Once inside of there, the default ContentPresenter Element has simply been swapped in with a 'TransitionContentPresenter' Element which will handle the animations that are fired when content is updated in the ContentControl:


This is all you need to do for the initial setup here.


Getting Buttons to Load the Correct Sub-Screen

Next, we will open the ContentControl Content Template for the Main Menu, which is where we will be able to make each Button in the menu, go to the sub-screen that we want:

This is done with a single Trigger on the 'Click' Event of each button, that then fires a 'NavigateToAction', where we set which sub-screen we want it to go to, by simply inputting the 'ID' we set in the manifest in the previous section as its 'Destination ID':


This Trigger configuration is then repeated for each of the Buttons.

One other really cool feature, is that we also include a 'NavigateBackAction' which can be used in a Trigger, and will automatically return you to the previous Content Template you came from. Here's an example of this on the Settings screen on the 'Back' Button:



Setting Up Animations

Whilst inside of any of the ContentControl Content Template, in the Animation/Storyboards Panel, you can define your "Enter" and "Exit" animations that will be applied when this template is loaded and unloaded. These can be unique for each sub-screen, allowing you to have custom in/out animations for each sub-screen.


Then, to employ them and have them fire automatically when a change in the Content Template displayed is made, inside of the Content Template, if you select the root Element, under the 'Transitions' Properties section, you can set which Storyboards to use for 'Enter', 'Exit':



Conclusion

And that's it!
Let's start here! Let me know if this makes sense, how close of a match this is to what you're looking for, or if you have any trouble accessing the sample I sent over!

- Dorian

Wow, the thoroughness of this explanation is out of this world! Thank you so much. I'm going to spend today diving into this. Have a great weekend! -Jeremy

Hi Dorian, Thanks again for the walkthrough. I re-engineered my UI to follow the pattern in the 3D menu demo along with your instructions. Things are working great now. However the Navigate Back Action crashes to my desktop. I submitted the crash log, left my name and email address. I'm skipping that for now but would love to figure it out. The 3D menu demo works perfectly with the same trigger so I'm sure it's something I've done. But I can't imagine what that would be. Thanks again!

Hey Jeremy!

Just dropping by to let you know that the crash you sent our way in the report related to the Navigation functionality has now been fixed in the latest version (0.3.302 Beta).

Let us know if this does the trick, or if there's anything else we can support with.
(And thank you so much for taking the time to submit these by the way, it's super helpful!)

- Dorian

Great! Thanks! I'm looking forward to the new version. -Jeremy

Hi Dorian, I have a follow up question on this topic.

All of this work has been around creating a hamburger menu. After I got all of my control pages set up and am happily navigating through the different pages using the Content Navigation feature that you showed me above, now I want to show and hide the hamburger menu. What I'm experiencing is that if I use a storyboard to reveal the menu, navigate past the first page, then hide the hamburger menu by running a storyboard that fades the menu out, it will re-appear when I "click" on the hamburger menu button but it will be in the same state that I left when I closed the hamburger menu. In this case, fully transparent, because that was the state it was in when the menu faded out.

How do I reset the state of the content control template back to it's original starting position? Or am I going about this the wrong way?

Thanks again. I really appreciate your patience with me and I do feel that I've been learning a lot about Noesis! -Jeremy

Hey Jeremy,

Just want to ensure I'm visualising all of this correctly; does the below summarise your desired functionality for this system?

--> The Hamburger displays with no SubScreens visible on the Page.

--> When the Hamburger is clicked, it reveals {SubScreen1}, and the Hamburger continues to be visible whilst {SubScreen1} is displayed.
--> If the Hamburger has been clicked, and you are now within {SubScreen1} when the Hamburger is clicked again, it hides {SubScreen1}, and the Hamburger remains visible and clickable.

--> After clicking the Hamburger, you land on {SubScren 1}, and once you navigate from {SubScreen1} to {SubScreen2} (and beyond), the Hamburger becomes hidden.

You mention in your description that you're clicking on the Hamburger when its hidden --- do you want it clickable or not in this case?
(If yes to wanting it to become 'non-clickable' when hidden, we can resolve this too.)

Furthermore, is the intention that you can only hide the SubScreens if you are on {SubScreen1}, or do you want it to be closable from any SubScreen?
(and if the case, through which method would you like to achieve this?)

--> Returning back to {SubScreen1} from any other SubScreen, makes the Hamburger re-appear.

--> Every time you click the Hamburger, whether no SubScreens are visible, or whether you are on {SubScreen1}, it should only 'toggle' displaying {SubScreen1}, and no other SubScreens.

Thanks! Just want to ensure we're aligned on the goals here first!

- Dorian