Different Header on different page

General
1

Hey Fuse Community,
I have a 3 page. 1.ux, 2.ux, and 3.ux and the top header bar is 1header.ux, 2header.ux, and 3header.ux. I made individual header because whenever user goes to different screen there are different option on header bar. From my perspective that’s not a good way to do such thing. because I have to keep making header everytime I make page. Is there any example where I can change main header bar content based on different page.

OnePage.ux

   <Page ux:Class="OnePage">
<Router ux:Dependency="router" />
<StackPanel>
<Header RightText="&#xE8CC;" Color="#F20655"/>
  <StackPanel>
</Page>

OneHeader.ux

 <string ux:Property="RightText" />
 <float4 ux:Property="Color"/>
<Rectangle Fill="{ReadProperty Color}" Height="65">
	<DockPanel Dock="Top">
	<Text Value="&#xE5D2;" Alignment="Left" Font="MaterialIcons" Color="#fff" FontSize="35" Margin="5,25,5,0">
		<Clicked Handler="{openLeftPanel}"/>
	</Text>
	<Text Value="{ReadProperty RightText}" Alignment="Right" Font="MaterialIcons" Color="#fff" FontSize="35" Margin="5,25,5,0">
	</Text>
</DockPanel>
</Rectangle>
2

To give you a general direction, this is how I would approach the challenge:

  1. Make a single Header component (you have 3?) that accepts all the properties you may want to change, depending on which page you’re on. Here’s an article about componentization.
  2. Put the header component instance as high up in UX code hierarchy as possible, perhaps even on MainView.ux, so that all pages in a Navigator have the same Header instance on top of them.
  3. Pass the Header as a ux:Dependency to the pages 1, 2 and 3, as described in docs.
  4. From the individual pages, do something like this:
<Activated>
    <Change header.Something="Thing" />
</Activated>

Hope this helps!

3

Yup it did. Thanks for help