How to modify dynamic-tab-bar example to 3 tabs

Hi,

i would like to modify the dynamic-tab-bar example (https://www.fusetools.com/examples/dynamic-tab-bar) to have just 3 tabs but i am not able to do it and i don’t know what i am doing wrong.

Any help?

Hi, here is the code for 3 tabs, but I changed the title text for an Image. Anyway it is a good starting point.

<ClientPanel>
        <Image File="../Assets/logo.png" Height="60" Alignment="Center" Dock="Top" />

        <Panel Dock="Top" Height="60">
            <Rectangle ux:Name="indicator" CornerRadius="30" Color="#EDB353" LayoutMaster="p1" Margin="0,10" Width="100%" ZOffset="0.1"/>
            <Grid ColumnCount="4" Margin="-30,0">
                <Panel ux:Name="p1" Column="0" ColumnSpan="2"/>
                <Panel ux:Name="p4" Column="2" ColumnSpan="2"/>
            </Grid>

            <Grid ZOffset="1" Margin="-20,0">
                <Column ux:Name="col1" Width="1" WidthMetric="Proportion"/>
                <Column ux:Name="col2" Width="1" WidthMetric="Proportion"/>
                <Column ux:Name="col3" Width="1" WidthMetric="Proportion"/>

                <Text ux:Class="TabHeader" Color="White" Alignment="CenterLeft" Opacity="0" Margin="20,0,0,0" MinWidth="100"/>
                <Image ux:Class="TabIcon" Width="25" Height="25" />

                <Panel HitTestMode="LocalBounds">
                    <Grid Columns="auto,1*" Margin="40,0" Alignment="Left">
                        <TabIcon ux:Name="c1" File="../Assets/icons/account.png" Color="#EDB353"/>
                        <TabHeader ux:Name="h1" Value="Perfil" />
                    </Grid>
                    <Clicked>
                        <Set nav.Active="page1" />
                    </Clicked>
                </Panel>
                <Panel HitTestMode="LocalBounds">
                    <Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
                        <TabIcon ux:Name="c2" File="../Assets/icons/offer.png" Color="#EDB353"/>
                        <TabHeader ux:Name="h2" Value="Productos"/>
                    </Grid>
                    <Clicked>
                        <Set nav.Active="page2" />
                    </Clicked>
                </Panel>
                <Panel HitTestMode="LocalBounds">
                    <Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
                        <TabIcon ux:Name="c3" File="../Assets/icons/history.png" Color="#EDB353"/>
                        <TabHeader ux:Name="h3" Value="Historial"/>
                    </Grid>
                    <Clicked>
                        <Set nav.Active="page3" />
                    </Clicked>
                </Panel>
            </Grid>
        </Panel>
        <PageControl ux:Name="nav" Background="#EFF0F1">
            <NavigationMotion GotoEasing="BackOut" />

            <WhileTrue ux:Name="shrinkIndicatorWidth">
                <Change indicator.Width="90" Duration="0.25"/>
            </WhileTrue>

            <Panel ux:Class="PagePlaceholder" Margin="8,10,8,0"/>

            <Page ux:Name="page1">
                <PagePlaceholder Background="Red"/>
                <WhileActive Threshold="0.5">
                    <Set shrinkIndicatorWidth.Value="true" />
                </WhileActive>
                <ActivatingAnimation>
                    <Change h1.Opacity="1" />
                    <Change col1.Width="2" />
                    <Change c1.Color="White" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page2">
                <PagePlaceholder Background="Blue"/>
                <WhileActive Threshold="0.5">
                    <Set shrinkIndicatorWidth.Value="false" />
                </WhileActive>
                <ActivatingAnimation>
                    <Change h2.Opacity="1" />
                    <Change col2.Width="2" />
                    <Change c2.Color="White" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page3">
                <PagePlaceholder Background="Purple"/>
                <WhileActive Threshold="0.5">
                    <Set shrinkIndicatorWidth.Value="false" />
                </WhileActive>
                <ActivatingAnimation Scale="0.5">
                    <Move Target="indicator" X="1" RelativeTo="PositionOffset" RelativeNode="p4"/>
                </ActivatingAnimation>
                <ActivatingAnimation>
                    <Change h3.Opacity="1" />
                    <Change col3.Width="2" />
                    <Change c3.Color="White" />
                </ActivatingAnimation>
            </Page>
        </PageControl>
    </ClientPanel>

Thnx!

I did it my way as i wanted the icon to stay “in position” when off:

<App Background="#eee">

	<Font ux:Global="RobotoMedium" File="Roboto-Medium.ttf" />
	<SolidColor  Color="#96281B" ux:Global="mainColorSolid"/>
	<float4 ux:Value="#96281B" ux:Global="mainColorFloat"/>

	<Panel ux:Class="Tab" ClipToBounds="false">
		<string ux:Property="Text" />
		<FileSource ux:Property="Icon" />
        <bool ux:Property="Active"/>

		<Image ux:Name="tabImage" File="{Property this.Icon}" Height="25" StretchMode="Uniform" Alignment="Center" Dock="Left"/>

		<Text ux:Name="tabText" Value="{ReadProperty Text}" Color="#FFF" Font="RobotoMedium" Alignment="VerticalCenter" TextAlignment="Center" Opacity="0" />

        <WhileFalse Value="{Property this.Active}">
            <Change tabImage.Color="mainColorFloat" Duration="0.5"/>
        </WhileFalse>

		<WhileTrue Value="{Property this.Active}">
			<Change tabText.Opacity="1" Duration="0.4"/>
			<Change tabImage.Offset="-25,0" Duration="0.2"/>
			<Change tabText.Offset="10,0" Duration="0.2"/>
		</WhileTrue>
	</Panel>

	<Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>

	<ClientPanel>

		<Panel Dock="Top">

			<Rectangle ux:Name="indicator" LayoutMaster="tab1" Color="mainColorFloat" Margin="2" CornerRadius="20" ZOffset="0.1">
				<LayoutAnimation>
					<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
				</LayoutAnimation>
			</Rectangle>

			<Grid ColumnCount="3" Height="50" ZOffset="1">
					<Tab Icon="menuHome.png" Text="News" HitTestMode="LocalBoundsAndChildren" Active="true" ux:Name="tab1">
						<Clicked>
							<Set navigation.Active="page1" />
							<Set indicator.LayoutMaster="tab1"/>
							<Set tab1.Active="true"/>
							<Set tab2.Active="false"/>
							<Set tab3.Active="false"/>
						</Clicked>
					</Tab>

					<Tab Icon="menuSearch.png" Text="Search" HitTestMode="LocalBoundsAndChildren" Active="false" ux:Name="tab2">
						<Clicked>
							<Set navigation.Active="page2" />
							<Set indicator.LayoutMaster="tab2"/>
							<Set tab1.Active="false"/>
							<Set tab2.Active="true"/>
							<Set tab3.Active="false"/>
						</Clicked>
					</Tab>


					<Tab Icon="menuMyProfile.png" Text="Profile" HitTestMode="LocalBoundsAndChildren" Active="false" ux:Name="tab3">
						<Clicked>
							<Set navigation.Active="page3" />
							<Set indicator.LayoutMaster="tab3"/>
							<Set tab1.Active="false"/>
							<Set tab2.Active="false"/>
							<Set tab3.Active="true"/>
						</Clicked>
					</Tab>
			</Grid>


		</Panel>

		<PageControl ux:Name="navigation">
			<Page ux:Name="page1" Background="#eee">
				<WelcomeText>Welcome to Page 1</WelcomeText>
			</Page>
			<Page ux:Name="page2" Background="#abb7b7">
				<WelcomeText>Welcome to Page 2</WelcomeText>
			</Page>
			<Page ux:Name="page3" Background="#f2f1ef">
				<WelcomeText>Welcome to Page 3</WelcomeText>
			</Page>
		</PageControl>

	</ClientPanel>
</App>