locked
how to design application bar like finance app of windows 8, various controls in application bar.

    Question

  • how to design application bar like finance app of windows 8, various controls in application bar.

    like default it has 4 buttons and each has several more.

    i can do it with popupmenu. bt tht design is simple. so how to design application bar interactive.

    Monday, December 24, 2012 9:16 AM

All replies

  • Here is a way to learn about AppBar navigation:

    - download XAML AppBar ControlSample

    - execute Scenario 3 in particular since it is navigation related between 2 pages, using button for Backward navigation

    - if you want to see how this works with a TopAppBar instead of a BottomAppBar, just perform a "Edit>Find & Replace>Replace in Files" of:

    "BottomAppBar" with "TopAppBar" for "Entire Solution". You should have 9 hits.

    - rerun

    ---

    So, you'll have a base for starting your work ...

    Monday, December 24, 2012 6:01 PM
  • I already saw. That was for common app bar. I want to design popup menu. when we click on app bar button and it display simple popup. but i want to design that like other apps.i.e. finance.
    Tuesday, December 25, 2012 4:45 AM
  • Hi Weblineindia,

    Which language and UI layer are you using so we can move this to the correct forum? The UI Design for Windows Store apps forum is for discussion of how to design the app's UI. Implementation questions should be posted in the appropriate language forum.

    It would help if you could provide more detailed information about what specifically you are looking for help with. It may help if you can provide pictures of what you would like, the code that you are currently using, and an explanation of where your code does what you want and where you would like it to act differently.

    --Rob

    Thursday, January 3, 2013 2:08 AM
    Moderator
  • The Finance app's TopAppBar contains custom designed DropDown controls.

    I believe Weblineindia simply wants to know how to create/code/style/... this kind of controls.

    Friday, January 4, 2013 8:47 AM
  • i want to design application bar like this.any idea which control it uses ?

      <Page.TopAppBar>
            <AppBar x:Name="topAppBar"
                    Height="150">
                <ListView Name="listViewAppBar"
                          SelectionMode="Single"
                          IsSwipeEnabled="False"
                          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                          ItemTemplate="{StaticResource TopAppBarItemTemplate}"
                         >
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Padding"
                                    Value="0" />
                            <Setter Property="Margin"
                                    Value="0" />
                        </Style>
                    </ListView.ItemContainerStyle>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
            </AppBar>
        </Page.TopAppBar>

    i wrote above code. but it has scrolling issue when we move snapped mode from landscape mode and move filled mode from snapped mode.

    sorry for late reply but i want ans urgent. thnx in advance

    Tuesday, April 9, 2013 7:59 AM