locked
Appbar flyout bug if flyout contains a scrolled listbox RRS feed

  • Question

  • Hi all!

    I came across the following problem.

    1. The XAML structure is Appbar-Commandbar-Appbarbutton-Buttonflyout-Listbox.

    2. On opening the flyout, the Commandbar is collapsed via Visibility.Collapsed. On closing the flyout, the commandbar is "uncollapsed" via Visibility.Visible.

    3. If the Listbox in the Flyout has been scrolled, on closing and reopening the Flyout, the Flyout will be "compressed" to only a few pixels of height. There's no way to undo this.

    I believe this is a bug, can I report this somewhere? Here's the code to replicate it. Platform is Windows Phone 8.1 (blank app template).

    XAML code:

    <Page
        ...>
        <Grid/>
        <Page.BottomAppBar >
            <CommandBar x:Name="testmenu" >
                <CommandBar.PrimaryCommands>
                    <AppBarButton >
                        <Button.Flyout >
                            <Flyout Placement="Bottom" Opening="Flyout_Opening" Closed="Flyout_Closed" >
                                <StackPanel  Height="400">
                                    <ListBox x:Name="testlistbox" Height="300"  />
                                </StackPanel>
                            </Flyout>
                        </Button.Flyout>
                    </AppBarButton>             
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>
    </Page>



    C# XAML.cs code:

    public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.NavigationCacheMode = NavigationCacheMode.Required;
    
                //populate the listbox so there's something to scroll
                for (int i = 0; i < 20; i++) testlistbox.Items.Add(i.ToString());          
            }
    
            private void Flyout_Opening(object sender, object e)
            {
                testmenu.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            }
    
            private void Flyout_Closed(object sender, object e)
            {
                testmenu.Visibility = Windows.UI.Xaml.Visibility.Visible;
            }
        }


    Sunday, November 9, 2014 11:37 AM

Answers

  • Hi waxcat (waxc.at),

    >>If the Listbox in the Flyout has been scrolled, on closing and reopening the Flyout, the Flyout will be "compressed" to only a few pixels of height. There's no way to undo this.

    In my mind, the above issue is caused by the virtualization. Because by default if we want to display and manipulate a large collections of the data in the ItemsControls(ListBox,GridView….), then in order to improve the performance with the large data sets, it will use the virtualization.

    If we want to replace the default panel in an ItemsControl with a non-virtualizing panel, we can use the controls like VariableSizedWrapGrid or StackPanel, because the UI virtualization is disabled for that control.

    For more information, please try to refer to the following article:
    #Using virtualization with a list or grid:
    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780657.aspx .

    So please try to disable the UI virtualization by right-click the ListBox->click "Add Additional Template"->click "Edit Layout of Items(ItemsPanel)"->"Edit a Copy", then you will see the following xaml:

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <VirtualizingStackPanel />
    </ItemsPanelTemplate>


    Please try to use the StackPanel for instead:

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <StackPanel />
    </ItemsPanelTemplate>

    And I have tested in my side, it works very well.

    The result:

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Thursday, November 20, 2014 11:09 AM

All replies

  • Yes...I think that is a bug

    I encounter same problem like you.

    Did you try to handle Flyout opening event? Force let StackPanel that in Flyout to set Height and Width by Behind-Code

    Sunday, November 9, 2014 12:49 PM
  • The Stackpanel isn't actually resized, and I can still scroll the content in the Flyout up and down.

    Now I could obviously change the size of the Stackpanel in the event handling but it doesn't matter, since it's the Flyout that changed size. However, since the Flyout doesn't have a height property and should scale by its content, it's impossible to resize the Flyout after it has been shrunk...

    Sunday, November 9, 2014 2:36 PM
  • Hi waxcat (waxc.at),

    >>If the Listbox in the Flyout has been scrolled, on closing and reopening the Flyout, the Flyout will be "compressed" to only a few pixels of height. There's no way to undo this.

    In my mind, the above issue is caused by the virtualization. Because by default if we want to display and manipulate a large collections of the data in the ItemsControls(ListBox,GridView….), then in order to improve the performance with the large data sets, it will use the virtualization.

    If we want to replace the default panel in an ItemsControl with a non-virtualizing panel, we can use the controls like VariableSizedWrapGrid or StackPanel, because the UI virtualization is disabled for that control.

    For more information, please try to refer to the following article:
    #Using virtualization with a list or grid:
    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780657.aspx .

    So please try to disable the UI virtualization by right-click the ListBox->click "Add Additional Template"->click "Edit Layout of Items(ItemsPanel)"->"Edit a Copy", then you will see the following xaml:

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <VirtualizingStackPanel />
    </ItemsPanelTemplate>


    Please try to use the StackPanel for instead:

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <StackPanel />
    </ItemsPanelTemplate>

    And I have tested in my side, it works very well.

    The result:

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Thursday, November 20, 2014 11:09 AM
  • Hi Amy,

    Yes, this works! Thank you very much.

    Sunday, November 23, 2014 2:01 PM