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>