CODEWITHSUNDEEP
c#microsoft-metrowindows-runtimetabcontrolwinrt-xaml
Brannon
Brannon

Reputation: 5414

Put a tabbar across the top in a metro app?

I want to make a WinRT Metro app that has similar functionality to this:

http://learn.knockoutjs.com/WebmailExampleStandalone.html#Inbox

How does a tab bar with links to each of the various pages of the application fit into a Metro-styled app? Would you use the AppBar? On the top or the left? Would you use a radio button for each page? Would you use a FlipView to change pages? What examples exist for this type of metro app?

Upvotes: 0

Views: 1100

Answers (2)

Bob Familiar
Bob Familiar

Reputation: 116

If your goal is to get your app into the Windows 8 store (of course it is!) I recommend that you dig into the Metro UX guidelines. The guidelines for navigation are documented here. It documents several navigation patterns.

If you do choose to use an AppBar as your navigation control, you can pin an AppBar to the top of your XAML/C# app using this snippet.The AppBar will be open upon displaying the page because IsOpen is set to true and uses IsSticky to stay open.

<Page.TopAppBar>
    <AppBar x:Name="SampleNavBar" IsOpen="True" IsSticky="True">
       [PUT YOUR NAV CONTROLS HERE]            
    </AppBar>
</Page.TopAppBar>

For an example that is close to what you are looking for use the weather app that comes with Windows 8 and go to the Locations screen. Right click or swipe to bring up the app bar. The app displays both a top AppBar and a bottom AppBar. The top AppBar is a navigation bar.

Upvotes: 1

Filip Skakun
Filip Skakun

Reputation: 31724

In this particular case you could just do the same thing only with less chrome (gradients/dropshadows). The buttons could just be RadioButtons with Style="{StaticResource TextRadioButtonStyle}". The tabs would just change the filter - based on selected tab your view model would provide different ItemsSource for the list.

Upvotes: 0

Related Questions