Highlight the active page (with router.push)

How-to Discussions
1

Hey guys,
i have a little problem, maybe you can help me out.

I have a navigation bar at the bottom of my application which is managing the router navigation.

Navigation-Bar:

        <Grid Columns="1*,1*,1*,1*" Height="45" Dock="Bottom" Padding="0, 1, 0, 0">
            <Rectangle Layer="Background">
                <Stroke Width="1" Color="#000000"/>
            </Rectangle>
            <Image ux:Class="Icon" Margin="5" />
            <Panel Background="#ececec">
                <Icon ux:Name="mapButton" Color="Gray" Width="40%" File="Assets/map.png" Clicked="{gotoMap}"/>
            </Panel>
            <Panel Background="#ececec">
                <Icon ux:Name="poiButton" Color="Gray" Width="40%" File="Assets/poi.png" Clicked="{gotoPoi}"/>
            </Panel>
            <Panel Background="#ececec">
                <Icon ux:Name="favoriteButton" Color="Gray" Width="40%" File="Assets/favorite.png" Clicked="{gotoFavorites}"/>
            </Panel>
            <Panel Background="#ececec">
                <Icon ux:Name="infoButton" Color="Gray" Width="40%" File="Assets/info.png" Clicked="{gotoInformations}"/>
            </Panel>
        </Grid>

I used to change the color of the icons to display the currently active page:

<Router ux:Name="router" />
        <Navigator DefaultTemplate="index" Transition="None">
            <Page ux:Template="index">
                <Index />
            </Page>
            <Page ux:Template="map">
                <Map />
                <WhileTrue Value="true">
                        <Change Target="mapButton.Color" Value="#332562" />
                </WhileTrue>
            </Page>
            <Page ux:Template="poi">
                <Poi />
                <WhileTrue Value="true">
                        <Change Target="poiButton.Color" Value="#332562"/>
                </WhileTrue>
            </Page>
            <Page ux:Template="favorites">
                <Favorites />
                <WhileTrue Value="true">
                    <Change Target="favoriteButton.Color" Value="#332562"/>
                </WhileTrue>
            </Page>
            <Page ux:Template="informations">
                <Informations />
                <WhileTrue Value="true">
                    <Change Target="infoButton.Color" Value="#332562"/>
                </WhileTrue>
            </Page>
            <Page ux:Template="DetailView">
                <DetailView />
                <WhileTrue Value="true">
                        <Change Target="poiButton.Color" Value="#332562"/>
                </WhileTrue>
            </Page>
        </Navigator>

This was working perfectly.
Recently I changed my JS-Functions from router.goto to router.push (to get the OnBackButton working).

Now I am having problems to highlight the active page in my navigation bar.
The color changes to the Value but it is not changing back anymore.

Any ideas?

EDIT:

I am also not able to change the current page if I am on my first page (Map, which display a MapView in a NativeViewHost).

2

I was able to fix the bug by myself by changing the WhileTrue to WhileActive but the bug mentioned in my edit is still a problem.
Any ideas?

3

The change to WhileActive is correct. It would be just random if WhileTrue was working before (not actually random, but not what you want in any case).

What do you mean by “not able to change the current page”? How are you trying to change it?

4

I am pressing the four buttons of my bottom navigation bar.
The buttons are working. I can enter all four pages.
But if I enter the first page (where my Map with NativeViewHost is) I can not exit it anymore.
I switch to another page and the button in the bottom menu gets highlighted.
But it is not changing the page.

In my opinion, it changes the site correctly, but the NativeViewHost is overlaying everything.

5

You have Transition="None" on the Navigator. This means no animations will be done, leaving all the pages to be overlapping. By default the Navigator also brings the current page to the front of the ZOrder (see the GotoState property). NativeViewHost does always appear on top, and does not mix with the non-native ZOrder.

You’ll need to provde at least one Transition that hides the page, or moves it out of the way.

6

That solved the problem, thanks!
Transition="Standard" is working (Transition="Default" is not).

But is there a Transition that hides my page without the swiping-effect?

7

Default is only used on the per-page overrides. It means to use the Navigator setting.

You can easily create your own transitions; we don’t have more than just Standard now. Set it to None and then on the pages you can do:

   <Change thisPage.Visibility="Hidden"/>
</Transition>```

That'd be the simplest one to just hide a page.