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

Version 0.3.304 is already available on the store.

Very close. I'm going to set up a simple scene to explain my situation. Stay tuned. Thanks! -Jeremy

I created a super simple 3 page hamburger menu, attached as a .zip file. When you load up the mainpage.xml and press play, you'll see a blank page with the hamburger menu button in the upper right hand corner of the screen. Press that to reveal my super basic mock-up.
I created some story boards with open and close animation. I know that the hamburger menu button is out of scope, so I can't access the open and close animation that exist on the submenu level. My big question is, how would I create something like this open the menu and close it on whatever submenu the user wants, to close the window. Then open it again by pressing the hamburger menu but starting from Main Menu rather than a submenu?

I'm not an engineer, I'm an artist. I know this is probably super basic from an engineers perspective but I appreciate your time to look into this for me. Thanks again! -Jeremy

Hi Jeremy!

Thanks for sending this sample over, this was enormously helpful!

Before I dig into the explainer, I'll just send you what I've been up to, which now should work exactly as you wanted it to: https://drive.google.com/drive/folders/ ... drive_link

So in terms of reworking this, there are a couple parallel subjects to cover, and which I'll take one-by-one:


'Lookless' Controls in the Framework

So the very first thing I'll bring your attention to, is that I converted your Hamburger Button in the top-right, into a CheckBox:


The reason I did this, is because one central concept to getting the most empowerment out of the Elements included, and what each of them offer out-of-the-box, is this idea that each Element should be selected for the features it offers (ie: its offering of Properties or Functions), rather than its name or visual presentation. This is what's known as the "Lookless" Element mindset.

Now with this in mind, the CheckBox Element possesses something that happens to be a perfect fit for the functionality we're after (and that the Button Element doesn't offer by default):
The CheckBox includes a 'Checked' Property which automatically toggles On and Off when its clicked.

This happens to correspond precisely to the function we are looking to control for the Menu: toggling its visibility on and off.

(The 'Checked' Property also provides us with some really powerful hooks we can use in Bindings, which we'll also get into in a bit.)


Breaking the Scope Barrier

So one thing you correctly pointed out, is that what's inside of the ContentControl and the ContentControl Content Templates does indeed not share a common scope with the Hamburger Button, and the challenges this brings in getting both of them to 'communicate' with eachother.

One feature we've developed to address this, is the ability to add Custom Properties to a ContentControl Template.

This can be achieved by entering the ContentControl Template, selecting the Root Element in the Navigator, and pressing the '+' in the Properties Panel, to the right of the 'Custom Properties' label:

From there, you can set a custom name for each Custom Property, and define what Type of Property they are.


If you then exit the ContentControl Template, you will then see these completely custom Properties in its Properties Panel, where you can fill out its values just like any other of the pre-made Properties that come with most Elements:


We now have a method to break the Scope Barrier, since we can pass information from the inside of the ContentControl, through these new Custom Properties, where they can be accessed by the Hamburger Menu on the Page.

In our case, we've created a custom "IsChecked" Property, to essentially arm the ContentControl with a Boolean compatible with the CheckBox's 'Checked' Property. So now they can interchange between eachother!


Setting Up the CheckBox's 'Checked' State to Display and Hide the Menu on Toggle

At this point, we want to have the 'Checked' State of the CheckBox control the Hiding and Displaying of the Menu: If its 'Checked', it should display the menu, and if its 'Unchecked', it should hide the menu.

For this, we can use a pair of simple Triggers to do exactly this:


In this example, you can see that If the Hamburger Menu's CheckBox is 'Checked' (IsChecked=True), it will play the Storyboard that reveals the Menu.

The other Trigger is the exact same, but instead listens for 'IsChecked=False', and if that is detected, it plays the Storyboard that hides the Menu.
(I moved the 'Exit' Storyboard that was originally inside your ContentControl Content Template onto the Page itself, so that the 'Enter' and 'Exit' could mirror each-other scope-wise and allow these to be placed together)


Refactoring of the ContentControl and ContentControl Content Template

Another thing I noticed in the construction of the original file, is that between each ContentControl Content Template, there were many instances of Elements and Storyboards that were repeated between eachother (such as the 'Exit' Storyboard mentioned above, that was originally triplicated between each Sub-Screen)

There was a great opportunity to exercise some of the power that comes from the differences between the ContentControl and the ContentControl Content Templates:
The way I always think of this personally: The ContentControl Template is what each SubScreen shares in common, the ContentControl Content Template is what is unique to each SubScreen.

So with that in mind, I offloaded the entire header bar of the Menu, as well as the general layout into the ContentControl Template.
(The Layout, the backer pane, the 'Back' arrow, the Title TextBlock, and the 'X' Close Button are the same across all three SubScreens):


You'll find a couple of Triggers in there that control hiding the 'Back' arrow if you are on the Main Menu or not (which should not display it), but I won't get into that too much as they can be easily inspected in the Project.

What I will touch on however, is the 'X' Button to close the Menu, from inside the ContentControll:

Similarly to the Hamburger Menu we talked about earlier, I also converted this to a CheckBox to be able to benefit from its own 'Checked' Property. In this case, I bound it directly to the custom 'IsChecked' Property we made on the overall ContentControl.

How This All Works Together

Basically, we've establishing a setup in which the ContentControl's custom 'IsChecked' Property we made above, serves as the intermediary between the 'X' Close CheckBox inside of the Menu, and the Hamburger Menu, outside of the Menu.

In this system, the 'X' Close, the ContentControl, and the Hamburger Menu, are all holding hands:

--> The 'X' Close inside of the Menu, is able to change the 'IsChecked' Property of the ContentControl.
--> The Hamburger menu outside of the Menu, on the Page, is able to change the 'IsChecked' Property of the ContentControl.
--> The 'X' Close inside of the Menu, is able to change the 'Checked' Property of the Hamburger Menu, via the ContentControl's 'IsChecked' Property, and vice-versa.

Now since, at the Page level, the Hamburger is configured to launch the 'Enter' and 'Exit' Storyboards:
Since the Hamburger Menu is linked to the 'X' Close via the ContentControl, this means that the 'X' Close inside the Menu can travel through the ContentControl, change the Hamburger Menu's 'Checked' Property, which then launches either the 'Enter' or 'Exit' animation depending on if its Checked or Unchecked.

And in the end, all of this put together gives a result like this, where you can toggle the opening and closing of the Menu from the Hamburger, OR close it at any time via the 'X' Close inside of the Menu itself!



Let us know if this hit the mark, if there's anything outstanding, and if you have any other questions -- hope this all helps!

(And until we speak again; have a great weekend!)

- Dorian

Hi Dorian, again, thank you so much. I continue to learn from you!

There is one point that hasn't been solved yet. Whenever we click on the hamburger button (now a check mark, I get that), I want to start on main menu, no matter which panel was "closed." I noticed in the video that you're closing and opening this menu, it remains on the subpage when the menu was closed, it doesn't return back to main menu. What are your thoughts on that? -Jeremy

Good news, I figured this out!

I added a Storyboard Completed trigger to the Menu_Exit storyboard. When it finished fading out, I set the action to Navigate to Action, MainMenu. So when I click the hamburger menu check box, it's automatically fades in the correct ID = MainMenu no matter which subpage I happen to be on when I "close" the page.

Nice one Jeremy! Looks great! Thanks for sharing the video result and your 'how-to'! 😊

- Dorian

Hi Dorian,

In the view model, there's a story. How would I show the story on subpage 2? Currently the text is coming from the text field but I need it to come from data instead. I've tried to bind the text field to the view model but it's not working out for me. I can't see the view model data when I do this. So I can't select "story" from the list. What am I doing wrong? Thanks again! -Jeremy

I made some progress with this and am now successfully getting text from the view model. However, when I press play, the text disappears. Why is that? -Jeremy

Hi Jeremy, Dorian here!

I've managed to reproduce your issue, so hopefully all of the below will work!

So, what happened:

My guess here is that at some point, the 'SubMenu2' Template was opened from the Resources Panel, and had the 'MainVM' DataSet assigned to it.
With this setup, the Text's Binding was likely made, and this would result in the text displaying as expected in Edit Mode.

However, in Play Mode, Studio is using the Page Data Assignment as the Data Source, and therefore, is failing to render the text because its attempting to use the Binding made in the context of the isolated Template Editor for 'SubMenu2', and not the Page's.

How to Fix this:

Step 1) From the Resources Panel, enter your 'SubMenu2' Template, and ensure that no DataSets are assigned in this context:


Important note: you may have to click the Assign/Unassign icon a couple times; basically you want to get it to the point where you see no little blue Dot on the master Grid Element in this Template's Navigator panel. (Having an assignment not showing in the DataPanel even if showing in the Navigator is a bug on our end we're looking into)

Step 2) Still within the 'SubMenu2' template, clear any Bindings currently on the TextBlock (this will allow us for a 'fresh start' in a couple steps):


Step 3) Navigate to MainPage.xaml, and double-check that the 'MainVM' DataSet is assigned to it; should look like this:


Step 4) Select the ContentControl on MainPage that contains all of these SubScreens, and set a Binding on its 'Content' Property.
(you can pick either the 'master' VM, or its child, both will work in this case after the next steps)
Step 5) From the Stage, you're going to want to enter the 'SubMenu2' Template in an 'inline' manner.
To achieve this, the way that I like to do it, is to first select the ContentControl's Template from its ContextMenu like in the following screenshot, then once it's assigned, going through that same Context Menu, but this time selecting 'Edit current'.


Step 6) Entering the 'SubScreen2' Data Template from the Stage will open it 'inline' (or in this case, relative to its ContentControl's DataContext that we set in Step 4).
In this inline Template Editor, we can then select our TextBlock, and set its 'Text' Property Binding to display the 'Story':


Conclusion

Your TextBlock should now have a Binding that is relative to its ContentControl's MainPage DataContext, and you should be able to hit 'Play', and have this text correct display both in 'Edit' mode as well as 'Play' Mode.

Let us know if this ended up working out, or if there's anything else we can help with!

- Dorian