How to Make a Global Toolbar w/ Text, Buttons and actions customizable

How-to Discussions
1

Hello folks!

I’m trying to build global toolbar for my app, like the follow:

<Material.AppBar ux:Class="Toolbar" Dock="Top" >

	<Router ux:Dependency="router" />
	<string ux:Property="title" />

	<WhileTrue Value="{ReadProperty router.CanGoBack}">
		<Change menuIcon.Visibility="Hidden"/>
		<Change backIcon.Visibility="Visible"/>
	</WhileTrue>
	<WhileFalse Value="{ReadProperty router.CanGoBack}">
		<Change menuIcon.Visibility="Visible"/>
		<Change backIcon.Visibility="Hidden"/>
	</WhileFalse>
	<Panel Dock="Left">
		<Material.AppBarIcon ux:Name="menuIcon"  Icon="Menu" Clicked="{openDrawerPanel}" />
		<Material.AppBarIcon ux:Name="backIcon"  Icon="ArrowLeft" Clicked="{router.goBack}"/>
	</Panel>
	<Text Value="{ReadProperty title}" Color="#fff" Dock="Left" Alignment="CenterLeft"/>
	<Material.AppBarIcon Dock="Right" Icon="DotsVertical" Clicked="{toggleMenu}" />
	<Material.AppBarIcon Dock="Right" Icon="AccountPlus"  />
</Material.AppBar>

But i’m facing some issues that i dont know how to figure out!

  1. How to switch correctly between Menu button and Back button (Better if can be based on router CanGoBack)?
    <Router ux:Dependency="router" />
    <WhileTrue Value="{ReadProperty router.CanGoBack}">
        <Change menuIcon.Visibility="Hidden"/>
        <Change backIcon.Visibility="Visible"/>
    </WhileTrue>
    <WhileFalse Value="{ReadProperty router.CanGoBack}">
        <Change menuIcon.Visibility="Visible"/>
        <Change backIcon.Visibility="Hidden"/>
    </WhileFalse>

  1. How to customize toolbar’s right buttons (templates?)

  2. How to close app when android back button is pressed on home screen?

<WhileFalse Value="{ReadProperty router.CanGoBack}">
	<OnBackButton>
		<HomeScreen Type="CallIntent" /> <!--Can be fisnish too (https://github.com/bolav/fuse-homescreen)-->
	</OnBackButton>
</WhileFalse>

Here is my MainView Toolbar definition:

<DockPanel ux:Name="topBar">
       <Toolbar ux:Name="toolbar" router="router"/>
</DockPanel>

and the Navigator session:

<Navigator ux:Name="nav" DefaultPath="competitions">
	<TeamsPage ux:Template="teams" router="router" toolbar="toolbar"/>
	<CompetitionsPage ux:Template="competitions" router="router" />
	<NewsPage ux:Template="news" router="router" toolbar="toolbar" />
</Navigator>

Someone can point me in the right direction!?!?

Tksss