How can i make a new page ?

How-to Discussions
1

im using this code and i want to make another page to navigate to the login page but i can’t get it to work.

            <App Theme="Basic" ClearColor="#39ADA8">
<DockPanel>
    <StatusBarBackground DockPanel.Dock="Top" />
    <Font File="Assets/Bold.otf" ux:Name="Bold"/>
    <HierarchicalNavigation ux:Name="_nav"/>

    <!-- Test Area -->
    <!-- End of test area -->

    <!-- This is the main page for the app -->
    <Page ux:Name="Main">
        <Panel>
            <Image File="Assets/Main.png" Alignment="Top"/>
            <Image File="Assets/MainText.png" Alignment="Bottom" Margin="0, 0, 0, 130" Padding="10"/>
            <Image File="Assets/LoginB.png" Alignment="BottomLeft" Height="150">
                <WhilePressed>
                    <Scale Factor="1.1"/>
                    <NavigateTo Context="_nav" Target="login"/>
                </WhilePressed>
            </Image>
            <Image File="Assets/RegisterB.png" Alignment="BottomRight" Height="150">
                <WhilePressed>
                    <Scale Factor="1.1"/>
                </WhilePressed>
            </Image>
        </Panel>
    </Page>
    <!-- End of main page -->

    <!-- This the login page for the app -->
    <Page ux:Name="login">

    </Page>
    <!-- End of login page -->
</DockPanel>
2

Here you go :slight_smile:

<App Theme="Basic" ClearColor="#39ADA8">
<DockPanel>
  <StatusBarBackground DockPanel.Dock="Top" />
  <Font File="Assets/Bold.otf" ux:Name="Bold"/>
  <HierarchicalNavigation ux:Name="_nav" Active="Main"/> <!--Added "Active="Main"" This simply tells the app which page to show on start up -->
  <Style> <!-- You need a defined transition animation, for example this one -->
          <Page ux:InheritStyle="false">
                <EnteringAnimation>
                    <Move X="-1" RelativeTo="Size" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" RelativeTo="Size" />
                </ExitingAnimation>
        </Page>
    </Style>

  <!-- Test Area -->
  <!-- End of test area -->

  <!-- This is the main page for the app -->
  <Page ux:Name="Main">
    <Panel>
      <Image File="Assets/Main.png" Alignment="Top"/>
      <Image File="Assets/MainText.png" Alignment="Bottom" Margin="0, 0, 0, 130" Padding="10"/>
      <Image File="Assets/LoginB.png" Alignment="BottomLeft" Height="150">
          <Scale Factor="1.1"/>
          <NavigateTo Context="_nav" Target="login"/>
        </Clicked>
      </Image>
      <Image File="Assets/RegisterB.png" Alignment="BottomRight" Height="150">
        <WhilePressed>
          <Scale Factor="1.1"/>
        </WhilePressed>
      </Image>
    </Panel>
  </Page>
  <!-- End of main page -->

  <!-- This the login page for the app -->
  <Page ux:Name="login">
    <DockPanel> <!-- Added some filling so you can see the transition -->
          <Rectangle Height="100%" Alignment="Top">
            <WhilePressed>
              <Scale Factor="1.1"/>
              <NavigateTo Context="_nav" Target="Main"/>
            </WhilePressed>
            <SolidColor Color="#aaa" />
        </Rectangle>
      </DockPanel>
  </Page>
  <!-- End of login page -->
</DockPanel>
3

thanks !