Search

Search results

  1. This example shows how to implement tab bar navigation using PageControl, PageIndicator and GridLayout. The markup <App Background="#333"> <JavaScript> var pages = [ {"name":"page1", "highlight":"#34495e", "icon":"Assets/icon-hexagon.png"}, {"name":"page2", "highlight":"#3498db", "icon":"Assets/icon-star.png"}, {"name":"page3", "highlight":"#aa3377", "icon":"Assets/icon-square.png"}, {"name":"page4", "highlight":"#88cc22", "icon":"Ass...

    Tabs Menu Navigation JavaScript
  2. This example shows how one can achieve a tabview with an animated indicator showing which tab is selected. The example achieves this by changing the LayoutMaster of an element along with a LayoutAnimation trigger, which allows one to animate elements between different layouts. <App Background="#eee"> <Font ux:Global="RobotoMedium" File="Roboto-Medium.ttf" /> <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7"> <string ux:Property="Text" /> ...

    Layout Tabs Menu
  3. In this example we have implemented an awesome menu design by Gal Shir! The cards Each card is defined as follows. A translational offset is calculated in JavaScript based on the cards index. Name, background color and text color are also data-bound values. <Panel Offset="{offset}" ux:Name="unselected"> <Panel ux:Name="self" LayoutMaster="unselected"> <Grid ux:Name="hamburger" RowCount="3" Height="30" Width="30" Alignment="TopLeft" Margin="20" Opacity="0"> <Each Count=...

    Cards Menu Tabs
  4. This time we've implemented an awesome interactive infographic concept by Yaroslav Zubko. The pie chart This example displays a pie chart where each piece has a corresponding page in a PageControl. The chart rotates with the navigation in the PageControl, but since each piece has a different size, each page must affect the rotation relative to its size (and as it turns out, the size of the previous piece). For this reason, we need to do use JavaScript to create a view-model from the raw values...

    Tabs Menu
  5. In this example we are using WhileActive and ActivatingAnimation to create a dynamic tab bar. The design was inspired by this awesome concept by Sergii Ganushchak. Icons are from Google's excellent Material Icons and the font is Roboto. The placeholder graphics is from Sergii's original Form prototype. The tab bar We use a regular PageControl for the navigation and make sure to set its TransitionEasing to BackOut. The tab bar itself is defined as follows: <Panel Dock="Top" Height="60" > ...

    Tabs Navigation Gesture Reusable components