Sidebar Navigation: How to use NavigateTo correctly

How-to Discussions
1

Hi,

Below is an example of my code for Sidebar navigation:

<App Theme="Basic">
  <DockPanel ux:Class="SidebarWithNavigate">

    <Page ux:InnerClass="PageWithTitle1" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
      <float4 ux:Property="HeaderColor" />
      <float4 ux:Property="HeaderTextColor" />
      <ExitingAnimation>
        <Move X="-1" RelativeTo="Size" />
      </ExitingAnimation>
      <StackPanel Dock="Top">
        <StatusBarBackground />
        <Panel Color="{Property self.HeaderColor}" Height="45">
          <Button Alignment="Left" Text="Sidebar">
            <Clicked>
              <Set navEdge.Active="sideMenu" />
            </Clicked>
          </Button>
          <Text Value="{Property self.Title}" FontSize="22" Alignment="Center" TextColor="{Property self.HeaderTextColor}"/>
        </Panel>
      </StackPanel>
    </Page>

    <EdgeNavigator ux:Name="navEdge" HitTestMode="LocalBoundsAndChildren">
      <StackPanel ux:Name="sideMenu" Width="150" EdgeNavigation.Edge="Left" Background="#f63">
        <Button Text="Basic Animation">
          <Clicked>
            <NavigateTo Target="pageBasicAnim" />
            <NavigateTo Target="pageBasicAnim" NavigationContext="navMain" />
          </Clicked>
        </Button>
        <Button Text="Logic with JavaScript">
          <Clicked>
            <NavigateTo Target="pageJsLogic" />
            <NavigateTo Target="pageJsLogic" NavigationContext="navMain" />
          </Clicked>
        </Button>
        <Button Text="Realtime effects">
          <Clicked>
            <NavigateTo Target="pageEffects" />
            <NavigateTo Target="pageEffects" NavigationContext="navMain" />
          </Clicked>
        </Button>
      </StackPanel>

      <Panel>
        <DirectNavigation ux:Name="navMain" Active="pageBasicAnim"/>

        <PageWithTitle1 ux:Name="pageBasicAnim" Title="Basic animation" HeaderColor="#595FFF" HeaderTextColor="#fff" />
        <PageWithTitle1 ux:Name="pageJsLogic" Title="Logic with JavaScript" HeaderColor="#F68FD7" HeaderTextColor="#FFF" />
        <PageWithTitle1 ux:Name="pageEffects" Title="Realtime effects" HeaderColor="#2CAE3F" HeaderTextColor="#fff" />
      </Panel>
    </EdgeNavigator>

  </DockPanel>
</App>

The menu button Clicked handlers call NavigateTo two times. Since:

  1. If I just call <NavigateTo Target="pageBasicAnim" /> then the page navigation doesn’t occur but the sidebar collapses.
  2. If I just call <NavigateTo Target="pageBasicAnim" NavigationContext="navMain" /> then the page navigation occurs but the sidebar doesn’t collapse.
  3. If I call both of them then the page navigation occurs and also the sidebar collapses.

Is this normal or calling <NavigateTo Target="pageBasicAnim" NavigationContext="navMain" /> should both navigate to page and collapse the sidebar?

Thanks in advance,

Ipek

2

This happens because you have 2 different navigators in your UX: navEdge and navMain, and because you’re not actually navigating to pageBasicAnim inside navEdge.

<NavigateTo Target="pageBasicAnim" NavigationContext="navMain" /> does what you expect : it makes sure that pageBasicAnim becomes the active target in the navMain navigator. In other words: the navigation happens.

The reason the sidebar doesn’t collapse is because navMain doesn’t know anything about the sidebar, it is managed by navEdge.

Now, the <NavigateTo Target="pageBasicAnim" /> doesn’t really navigate to pageBasicAnim. All it does is to tell navEdge that it should not be showing the sidebar menu.

Basically, when you don’t explicitly set the NavigationContext the NavigateTo will simply work on the nearest parent navigator it can find, in this case this is navEdge.

However, since pageBasicAnim is the child of another navigator (navMain) you can’t actually navigate to that page inside of navEdge. In other words, instead of <NavigateTo Target="pageBasicAnim" /> you could just have used a <Set navEdge.Active=""/> because that’s all it does. The sidebar simply collapses when navEdge isn’t told to expose it. :slight_smile:

3

Oh, and if you feel this is a bit complex then we totally agree. :slight_smile: A new way of implementing navigation (through the concept of a router) is being added to Fuse soon.

4

:slight_smile: Thanks for the reply and in-depth explanation. I get it now! And it’s good to know that the navigation will be improved to be more seamless.

5

Hi Remi,

I just wanted to point out that <Set navEdge.Active=""/> statement gives the following error:

E0000: Sequence contains no elements

Ipek

6

Ah, apologies about that. If the Active property had been bound to an observable in javascript you could have simply set it to “”, but when it’s done using the <Set/> in UX you must have a real target element.

You can instead use <Set navEdge.Active="something"/> where “something” is one of the non-sidebar-elements inside the EdgeNavigator.

7

Thanks Remi,

Navigating to “something” worked :slight_smile: