How can i use one EdgeNavigator for all pages that i have separated in differente files?

How-to Discussions
1

Basicly i have all my pages with the respective class inside a folder called pages and in my MainView file i have my EdgeNavigator that will be calling the pages.
My goal is to use one EdgeNavigator to navigate between my pages, and the problem that i´m facing is that i can´t toggle my sidebar from my pages.

Here is an example:

<App>

     <EdgeNavigator>
		
		<Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#263238">
			<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />

			<!--SIDEBAR CONTENT -->
			<StackPanel Margin="20,15,15,20" ItemSpacing="40">
				<Text Value="Page1" Color="#FFF" Clicked="{goToPage1}" />
				<Text Value="Page2" Color="#FFF" Clicked="{goToPage2}" />
			</StackPanel>
			<!--END SIDEBAR CONTENT -->

			<ActivatingAnimation>
				<Change shadow.Color="#0004" />
			</ActivatingAnimation>
		</Panel>
		
		<ClientPanel>
			 <Navigator DefaultPath="page1">
	            <Page1 ux:Template="page1"/>
	            <Page2 ux:Template="page2"/>
        	</Navigator>
		</ClientPanel>
		
	</EdgeNavigator>


	<!-- REPRESENT PAGES IN SEPARATED FILES -->
	<Page ux:Class="Page1">
		<MenuIcon Alignment="TopLeft" Margin="5">
			<NavigateToggle Target="sidebar" />
		</MenuIcon>
		<Text Value="This is Page 1" Alignment="Center" />
	</Page>

	<Page ux:Class="Page2">
		<MenuIcon Alignment="TopLeft" Margin="5">
			<NavigateToggle Target="sidebar" />
		</MenuIcon>
		<Text Value="This is Page 2" Alignment="Center" />
	</Page>
	<!-- END PAGES -->

	<!-- COMPONENTS -->
	<StackPanel ux:Class="MenuIcon" ItemSpacing="3" Width="18" >
		<Rectangle Fill="#00000060" Height="2" CornerRadius="2" />
		<Rectangle Fill="#00000060" Height="2" CornerRadius="2" />
		<Rectangle Fill="#00000060" Height="2" CornerRadius="2" />
	</StackPanel>
	<!-- END COMPONENTS -->

</App>

Error that i´m getting:
‘sidebar’ declared in MainView.ux(5) is a member ‘MainView’ and cannot be accessed from ‘Page1’.

2

Hey Talisson,

first, huge thanks for posting a complete ready-to-run test case. What a pleasure to work with this! :slight_smile:

As for the problem you have. The main issue is that the EdgeNavigator and sidebar live outside of your page scopes. Previously it was suggested to use ux:InnerClass to gain access to parent scopes, but that is no longer a best practice. Instead, you can look into using ux:Dependency to inject references to those 2 elements to your pages (you can read more about dependencies here: https://www.fusetools.com/docs/ux-markup/dependencies).

NavigateToggle is a neat trigger, one that only works inside of an EdgeNavigator. It takes a Target property (which is the sidebar panel), and it accepts a TargetNode property, which should be the EdgeNavigator - and that’s because your EdgeNavigator itself lives in the parent scope, and your pages don’t know they’re inside of one.

With all that in mind, here’s your code with very minor adjustments:

<App>

     <EdgeNavigator ux:Name="nav">

        <Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#263238">
            <Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />

            <!--SIDEBAR CONTENT -->
            <StackPanel Margin="20,15,15,20" ItemSpacing="40">
                <Text Value="Page1" Color="#FFF" Clicked="{goToPage1}" />
                <Text Value="Page2" Color="#FFF" Clicked="{goToPage2}" />
            </StackPanel>
            <!--END SIDEBAR CONTENT -->

            <ActivatingAnimation>
                <Change shadow.Color="#0004" />
            </ActivatingAnimation>
        </Panel>

        <ClientPanel>
             <Navigator DefaultPath="page1">
                <Page1 ux:Template="page1" sidebar="sidebar" nav="nav" />
                <Page2 ux:Template="page2" sidebar="sidebar" nav="nav" />
            </Navigator>
        </ClientPanel>

    </EdgeNavigator>


    <!-- REPRESENT PAGES IN SEPARATED FILES -->
    <Page ux:Class="Page1">

    	<Panel ux:Dependency="sidebar" />
    	<EdgeNavigator ux:Dependency="nav" />

        <MenuIcon Alignment="TopLeft" Margin="5">
        	<Clicked>
        		<DebugAction Message="ohai" />
            	<NavigateToggle Target="sidebar" TargetNode="nav" />
            </Clicked>
        </MenuIcon>
        <Text Value="This is Page 1" Alignment="Center" />
    </Page>

    <Page ux:Class="Page2">
    	
    	<Panel ux:Dependency="sidebar" />
    	<EdgeNavigator ux:Dependency="nav" />

        <MenuIcon Alignment="TopLeft" Margin="5">
        	<Clicked>
            	<NavigateToggle Target="sidebar" TargetNode="nav" />
            </Clicked>
        </MenuIcon>
        <Text Value="This is Page 1" Alignment="Center" />
    </Page>
    <!-- END OF PAGE -->

    <!-- COMPONENTS -->
    <StackPanel ux:Class="MenuIcon" ItemSpacing="3" Width="18" HitTestMode="LocalBounds">
        <Rectangle Fill="#00000060" Height="2" CornerRadius="2" />
        <Rectangle Fill="#00000060" Height="2" CornerRadius="2" />
        <Rectangle Fill="#00000060" Height="2" CornerRadius="2" />
    </StackPanel>
    <!-- END COMPONENTS -->

</App>

Hope this helps.

3

It Worked, thank you man!