Navigation - with Sidebar

How-to Discussions
1

Hi,

I’m trying and mixing some samples. :slight_smile:

So, I trying to change the main_content in the Sidebar-Samples.

For Example the RotatingSidebar:

There i have following part:

<Panel ux:Name="content" TransformOrigin="TopLeft">
    <LinearNavigation ux:Name="myPages"/>

    <Page ux:Name="page1" Background="#FDF0CC"/>
    <Page ux:Name="page2" Background="#F7CAB1"/>
    <Page ux:Name="page3" Background="#E8A0A2"/>

    <!--<Grid RowCount="4">
    <Panel><SolidColor Color="#FDF0CC" /></Panel>
    <Panel><SolidColor Color="#F7CAB1" /></Panel>
    <Panel><SolidColor Color="#E8A0A2" /></Panel>
    <Panel><SolidColor Color="#C2768E" /></Panel>
    </Grid>-->
</Panel>

As you can see, I try to use some pages…and try to navigate trough them with the help of the SidebarButtons (for example just one Button):

<StackPanel ux:Name="profileButton">
    <SidebarIcon>
        <AccountIcon />
    </SidebarIcon>
    <Text>PROFILE</Text>
    <Clicked>
        <Set showMenu.Value="false" />
        <Set myPages.Active="page1"/>
    </Clicked>
</StackPanel>

That isn’t working at all. What should I do?

NavigateTo, and a DirectNavigation, isn’t working too.

2

Hi!

What do you mean by “not working” ? Does it crash? if so, what error messages do you get? Please describe what’s happening more carefully.

3

Hi!

Your pages are probably missing <EnteringAnimation /> and <ExitingAnimation/>

Try adding this just above your <LinearNavigation />

<Style>
    <Page>
        <EnteringAnimation>
            <Move X="1" RelativeTo="Size" Duration="0.5" />
        </EnteringAnimation>
        <ExitingAnimation>
            <Move X="1" RelativeTo="Size" Duration="0.5" />
        </ExitingAnimation>
    </Page>
</Style>

You can tweak those however you like to get your own transitions.

4

@Anders, the pages just didn’t changed by clicking the buttons.

@Kristian, thanks. Now the pages are changing/switching by clicking the buttons :slight_smile: