这个示例展示了�如何在Fuse中使用PageControl
and Grid
实现tab导航条。
本文源代码来源Https://www.fusetools.com/examples/tab-bar-navigation
动画效果参看官方的网址:
markup代码
<pre>
<App Background="#333">
<DockPanel>
<iOS.StatusBarConfig Style="Light" />
<StatusBarBackground Dock="Top"/>
<BottomBarBackground Dock="Bottom"/>
<PageControl ux:Name="pages">
<Page ux:Name="page1" Background="#34495e">
<Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
<ActivatingAnimation>
<Scale Target="tabBarImage1" Factor="1.5" />
</ActivatingAnimation>
</Page>
<Page ux:Name="page2" Background="#3498db">
<Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
<ActivatingAnimation>
<Scale Target="tabBarImage2" Factor="1.5" />
</ActivatingAnimation>
</Page>
<Page ux:Name="page3" Background="#aa3377">
<Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
<ActivatingAnimation>
<Scale Target="tabBarImage3" Factor="1.5" />
</ActivatingAnimation>
</Page>
<Page ux:Name="page4" Background="#88cc22">
<Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
<ActivatingAnimation>
<Scale Target="tabBarImage4" Factor="1.5" />
</ActivatingAnimation>
</Page>
</PageControl>
<Grid ColumnData="1*,1*,1*,1*" Height="45" Dock="Bottom">
<Image ux:Class="Icon" Margin="10" />
<Panel Background="#34495e">
<Icon ux:Name="tabBarImage1" File="Assets/icon-hexagon.png" />
<Clicked>
<Set pages.Active="page1" />
</Clicked>
</Panel>
<Panel Background="#3498db">
<Icon ux:Name="tabBarImage2" File="Assets/icon-star.png" />
<Clicked>
<Set pages.Active="page2" />
</Clicked>
</Panel>
<Panel Background="#aa3377">
<Icon ux:Name="tabBarImage3" File="Assets/icon-square.png" />
<Clicked>
<Set pages.Active="page3" />
</Clicked>
</Panel>
<Panel Background="#88cc22">
<Icon ux:Name="tabBarImage4" File="Assets/icon-triangle.png" />
<Clicked>
<Set pages.Active="page4" />
</Clicked>
</Panel>
</Grid>
</DockPanel>
</App>
</pre>
Tag:Fuse, Fuseapp, Fusetools, Fuse教程, Fuse案例, native app
发布时间:2016年04月20日
博客被黑,挪窝简书安家……