locked
Command bar jumping listbox in Windows phone 8.1 Runtime RRS feed

  • Question

  • Hi,

    I have seen a cool behavior on the command bar in the system "Calendar" app.

    After click the "view" icon button on the command bar, it pop out a floating listbox for user to select the viewing time range.

    Please take a look on the picture below.

    I think it is really cool and useful.

    However, I cannot find any Command bar article talking about this property.

    Can anyone explain how this can be implemented? Or any article about this I may miss.

    Thanks a lot,

    Victor

    Sunday, January 11, 2015 2:25 AM

Answers

  • This is accomplished with standard UI controls on the page, not related to the CommandBar. When you click the button, it opens a Popup (or Flyout) positioned at the bottom of the page, and hides the CommandBar. An animation is applied to opening the Popup, which you can read about here: Animating pop-up UI (XAML)
    • Marked as answer by 黃宇祥 Monday, January 12, 2015 1:53 AM
    Sunday, January 11, 2015 9:08 AM
  • The simplest way to implement it is attach a MenuFlyout to the AppBarButton (same as could be done for a regular Button on the page). For example:

        <Page.BottomAppBar>
            <CommandBar Name="cmdbar">
                <AppBarButton Label="Refresh" Icon="Refresh" />
                <AppBarButton Label="Help" Icon="Help" >
                    <Button.Flyout>
                        <MenuFlyout Opened="MenuFlyout_Opened" Closed="MenuFlyout_Closed">
                            <MenuFlyoutItem>first</MenuFlyoutItem>
                            <MenuFlyoutItem>second</MenuFlyoutItem>
                            <MenuFlyoutItem>third</MenuFlyoutItem>
                            <MenuFlyoutItem>fourth</MenuFlyoutItem>
                        </MenuFlyout>
                    </Button.Flyout>
                </AppBarButton>
            </CommandBar>
        </Page.BottomAppBar>

            private void MenuFlyout_Opened(object sender, object e)
            {
                cmdbar.Visibility = Visibility.Collapsed;
            }
    
            private void MenuFlyout_Closed(object sender, object e)
            {
                cmdbar.Visibility = Visibility.Visible;
            }

    However, in the case of an AppBarButton there is a bug that causes the last item to get cut off. There is a workaround described here:
    http://stackoverflow.com/questions/23326717/appbarbutton-flyout-bad-positioning/23523126

    • Marked as answer by 黃宇祥 Monday, January 12, 2015 10:51 AM
    • Unmarked as answer by 黃宇祥 Sunday, March 8, 2015 1:04 PM
    • Marked as answer by 黃宇祥 Sunday, March 8, 2015 1:04 PM
    Monday, January 12, 2015 9:07 AM

All replies

  • This is accomplished with standard UI controls on the page, not related to the CommandBar. When you click the button, it opens a Popup (or Flyout) positioned at the bottom of the page, and hides the CommandBar. An animation is applied to opening the Popup, which you can read about here: Animating pop-up UI (XAML)
    • Marked as answer by 黃宇祥 Monday, January 12, 2015 1:53 AM
    Sunday, January 11, 2015 9:08 AM
  • Thanks a lot! :)

    I didn't know that before.

    Victor

    Monday, January 12, 2015 1:54 AM
  • The simplest way to implement it is attach a MenuFlyout to the AppBarButton (same as could be done for a regular Button on the page). For example:

        <Page.BottomAppBar>
            <CommandBar Name="cmdbar">
                <AppBarButton Label="Refresh" Icon="Refresh" />
                <AppBarButton Label="Help" Icon="Help" >
                    <Button.Flyout>
                        <MenuFlyout Opened="MenuFlyout_Opened" Closed="MenuFlyout_Closed">
                            <MenuFlyoutItem>first</MenuFlyoutItem>
                            <MenuFlyoutItem>second</MenuFlyoutItem>
                            <MenuFlyoutItem>third</MenuFlyoutItem>
                            <MenuFlyoutItem>fourth</MenuFlyoutItem>
                        </MenuFlyout>
                    </Button.Flyout>
                </AppBarButton>
            </CommandBar>
        </Page.BottomAppBar>

            private void MenuFlyout_Opened(object sender, object e)
            {
                cmdbar.Visibility = Visibility.Collapsed;
            }
    
            private void MenuFlyout_Closed(object sender, object e)
            {
                cmdbar.Visibility = Visibility.Visible;
            }

    However, in the case of an AppBarButton there is a bug that causes the last item to get cut off. There is a workaround described here:
    http://stackoverflow.com/questions/23326717/appbarbutton-flyout-bad-positioning/23523126

    • Marked as answer by 黃宇祥 Monday, January 12, 2015 10:51 AM
    • Unmarked as answer by 黃宇祥 Sunday, March 8, 2015 1:04 PM
    • Marked as answer by 黃宇祥 Sunday, March 8, 2015 1:04 PM
    Monday, January 12, 2015 9:07 AM