locked
How to Design Appbar like in the Stock Sports App in XAML/C# RRS feed

  • Question

  • Hi ,

    I am trying to create the appbar for navigation like the in the stock sports app that comes along with windows 8.  Can anybody please guide me on how to do this in XAML/C#.

    Thursday, April 18, 2013 11:37 PM

Answers

  • The following are entry points in the documentation that explain how AppBar organize and custommize their content.

    Adding app bars (Windows Store apps using C#/VB/C++ and XAML)

    With respect to altering the look and feel of the individual buttons, please refer specifically to:

    Quickstart: Styling app bar buttons

    ... and in particular the paragraphs:
    - Customize an app bar button
    - Use a custom Path as an app bar button icon

    In your case, you want to DataTemplate the ContentTemplate of a Button with a combination [a 'Grid' UIELement for instance] of text ('NBA') and an image (Basketball). Such button templating is not specific of the AppBar. Blend can help in case you are less familiar with the XAML Designer in VS 2012.

    From the image, it looks like some widgets in the AppBar are ComboBoxes: in that case, create such ComboBox with its Items being the buttons that you designed above.

    Finally, the SPORTS and FEATURED sections can be UIElements [TextBlock + StackPanel of Buttons] inside a 'Grid'

    • Marked as answer by Aaron Xue Monday, May 6, 2013 10:06 AM
    Friday, April 19, 2013 6:09 AM

All replies

  • The following are entry points in the documentation that explain how AppBar organize and custommize their content.

    Adding app bars (Windows Store apps using C#/VB/C++ and XAML)

    With respect to altering the look and feel of the individual buttons, please refer specifically to:

    Quickstart: Styling app bar buttons

    ... and in particular the paragraphs:
    - Customize an app bar button
    - Use a custom Path as an app bar button icon

    In your case, you want to DataTemplate the ContentTemplate of a Button with a combination [a 'Grid' UIELement for instance] of text ('NBA') and an image (Basketball). Such button templating is not specific of the AppBar. Blend can help in case you are less familiar with the XAML Designer in VS 2012.

    From the image, it looks like some widgets in the AppBar are ComboBoxes: in that case, create such ComboBox with its Items being the buttons that you designed above.

    Finally, the SPORTS and FEATURED sections can be UIElements [TextBlock + StackPanel of Buttons] inside a 'Grid'

    • Marked as answer by Aaron Xue Monday, May 6, 2013 10:06 AM
    Friday, April 19, 2013 6:09 AM
  • you need to built custom control for this specific button, this control contains two buttons, one contains the pic and the text and you need to handle the click event to navigate you to the main category, second button is the arrow and the click event will clear the app bar and repopulate it with the subcategories list of buttons, in this case you need to control the visibility of the second button (the arrow) to show it when showing the main categories and hide it in the sub categories. that's how I did it. hopefully this will help.

    Tariq

    Tuesday, April 30, 2013 8:57 PM