Page Navigation into a page (SideBar)

General
1

Hello ,

I started my project from the social media Example in order to use the Side Bar.

I want my side bar to be avaible on all the views.

The idea I got was to put a navigation control inside the Dock Panel “Content” and swicht the page (or panel) in this area

Or Should I write my “views” in different stackPanel and put the “top” dock panel inside each of them ?

Here the code

‘’’



<!-- Add a panel to the left edge -->
<Sidebar Width="180" ux:Name="menu" EdgeNavigation.Edge="Left">
  <ActivatingAnimation>
    <Change mainAppTranslation.X="180" />
    <!-- Change to cross out -->
    <Change topMenuTranslation.Y="0" />
    <Change bottomMenuTranslation.Y="0" />
    <Change middleRectangle.Opacity="0" Easing="CircularOut" />
    <Change topMenuRotation.Degrees="45" Easing="ExponentialIn" />
    <Change bottomMenuRotation.Degrees="-45" Easing="ExponentialIn" />
    <Change topRectangle.Width="28" />
    <Change bottomRectangle.Width="28" />
  </ActivatingAnimation>
  <WhileActive>
    <Callback Handler="{setSidebarOpen}" />
  </WhileActive>
  <WhileInactive>
    <Callback Handler="{setSidebarClosed}" />
  </WhileInactive>
</Sidebar>

<DockPanel ux:Name="content" Background="#fff">
  <!-- Use this to move the main app area with the side menu -->
  <Translation ux:Name="mainAppTranslation" />
  <StatusBarBackground Dock="Top" />
  <BottomFrameBackground Dock="Bottom" />

  <StackPanel Dock="Top">

    <!-- This is the top ledge -->
    <Grid Columns="auto,1*,auto"  Background="White">
      <Panel Margin="7,5,5,5" Height="32" Width="32" HitTestMode="LocalBounds">
        <WhileTrue Value="{sidebarOpen}">
          <Clicked>
            <NavigateTo Target="content" />
          </Clicked>
        </WhileTrue>
        <WhileFalse Value="{sidebarOpen}">
          <Clicked>
            <NavigateTo Target="menu" />
          </Clicked>
        </WhileFalse>
        <Rectangle ux:Name="topRectangle" Height="2" Width="26" Color="#000">
          <Translation Y="-9" ux:Name="topMenuTranslation" />
          <Rotation ux:Name="topMenuRotation" />
        </Rectangle>
        <Rectangle ux:Name="middleRectangle" Height="2" Width="26" Color="#000" />
        <Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Color="#000">
          <Translation Y="9" ux:Name="bottomMenuTranslation" />
          <Rotation ux:Name="bottomMenuRotation" />
        </Rectangle>
      </Panel>

      <Text FontSize="22" Alignment="VerticalCenter" TextAlignment="Center"
        Value="SHOPS AROUND" Padding="2">
        <Font File="../Assets/fonts/AlegreyaSans-Bold.otf" />
      </Text>

      <Panel Margin="5,5,7,5" Height="32" Width="32" HitTestMode="LocalBounds">
        <Clicked>
          <DebugAction Message="Search clicked" />
        </Clicked>
        <Circle Height="20" Width="20">
          <Stroke Width="2" Brush="#000" />
        </Circle>
        <Rectangle Width="7" Height="3" Color="#000">
          <Translation X="8" Y="8" />
          <Rotation Degrees="45" />
        </Rectangle>
      </Panel>
    </Grid>
    <Rectangle Height="1" Margin="0,5,0,0" Color="#333c48" />
  </StackPanel>

  
  <!-- This is the main area -->




</DockPanel>
'''

In the main area part, I want different view (Profil, Settings … ).

What is the best way to do that ? I have tried to do the same logic as in tab-bar-navigation example.