To be more specific, in my current case the content area could be any of the pages that got top bar menu attached where you should be able to expand menu, and i was hoping to find a nice way to divide this into a reusable component for these pages. An example of best practice for this type of setup would be highly appreciated
Hi! I’m having a little trouble understanding your navigation structure here. Have I understood correctly in that you want a Navigator where all the pages share the same top bar and menu?
Essentially what I’m asking is: is it enough to have a single instance of the outer structure (topbar+menu) while just replacing the content? Or do you have a more complex setup, where you for example need to change the content in the menu for different sections of your app?
That still doesn’t answer my question unfortunately. Do you have a separate TopMenu inside each page, or is it a single TopMenu shared between all the pages in your navigator?
In general, this example is quite difficult to componentize, since it shares the same instance of HamburgerMenu between the content and the menu. If there’s only a single top menu (which means a single hamburger icon), this becomes a lot easier.
This BoxNavigator component takes two templates, Content and Menu, in addition to a boolean MenuIsOpen property. Here is a basic example:
<BoxNavigator ux:Name="box">
<Panel ux:Template="Menu" Background="#212121">
<Text Color="#fff" Alignment="Center">Menu goes here</Text>
<Clicked>
<Set box.MenuIsOpen="false" />
</Clicked>
</Panel>
<Panel ux:Template="Content" Background="#303F9F">
<Navigator>
...
</Navigator>
</Panel>
</BoxNavigator>
```
Now, you want to use your `Navigator` as the `Content` template here.
To be able to open or close the menu from the `TopBar`, add a dependency from the `TopBar` to the `BoxNavigator`:
```
<DockPanel Alignment="Top" ux:Class="Project.TopMenu" >
<BoxNavigator ux:Dependency="boxNavigator" />
...
<Text Font="icon" Value="" Alignment="CenterLeft" FontSize="27" TextColor="{Property MenuIconColor}" HitTestMode="LocalVisualAndChildren">
<Clicked>
<Set boxNavigator.MenuIsOpen="false" />
</Clicked>
</Text>
...
</DockPanel>
```
I hope this made any kind of sense, let me know if you have any questions about any of this :)
I get this error:
‘boxNavigator’ declared in Project.TopMenu.ux(2) is a member ‘Project.TopMenu’ and cannot be accessed from ‘Project.MainPage’. To make this work, consider making ‘Project.MainPage’ an ux:InnerClass of ‘Project.TopMenu’.
Could it be because the TopMenu is located inside another class already? here is an example of how its setup:
Well, you don’t have access to it inside the page. You have to specify a ux:Dependency on the page class as well so that you can pass it down to the TopMenu, something like:
I´ll give it a try and let you know how it goes