Hide PageControl Page conditionally

How-to Discussions
1

Hi, I’m using the “A dynamic tab bar” example for my tests. I want to show Page1 or Page2 to the first PageControl place conditionally with a JS variable.

Using WhileTrue/WhileFalse on the JS variable I am able to set the page visibility to Visible/Collapsed of the two pages but the space inside PageControl seems to be occupied for each oneof the pages, in fact the top page selector become misaligned.

file

If I’m uncomment conditionally Set nav.Active section I’m not able to change page.

My code:

<Panel HitTestMode="LocalBounds">
	<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
		<TabIcon ux:Name="c2" Color="colorGames"/>
		<TabHeader ux:Name="h2" Value="Partita"/>
	</Grid>
	<Clicked>
		<!--WhileTrue Value="{showGameCurrent}">
			<Set nav.Active="pageGameCurrent" />
		</WhileTrue>
		<WhileFalse Value="{showGameCurrent}">
			<Set nav.Active="pageGamesOpen" />
		</WhileFalse-- >
	</Clicked>
</Panel>

<WhileTrue Value="{showGameCurrent}">
	<Change pageGameCurrent.Visibility="Visible" />
	<Change pageGamesOpen.Visibility="Collapsed" />
</WhileTrue>
<WhileFalse Value="{showGameCurrent}">
	<Change pageGameCurrent.Visibility="Collapsed" />
	<Change pageGamesOpen.Visibility="Visible" />
</WhileFalse>

<GamePage ux:Name="pageGameCurrent" router="router">
	...
</GamePage>
<GamesOpenPage ux:Name="pageGamesOpen" router="router">
	...
</GamesOpenPage>
2

That example uses a somewhat sophisticated Grid layout for the tabs menu. So if you alter the number of pages in the PageControl, you would need to alter the tabs in a similar way, otherwise it becomes “misaligned”.

Since I don’t fully understand your use case, I can only suggest that maybe setting Visibility in this case is not the right approach. If you would explain yourself better, we could find a better one.