Question

I apologize in advance, this one is hard to explain.

I have a GridView full of tiles that are selectable. When a selection is made, the bottom AppBar appears by setting IsOpen and IsSticky to true. This works fine.

However, when the AppBar appears after the first selection, it captures any touch activity and then releases it after any touch to an area outside the AppBar, but that touch gesture gets absorbed. I end up touching the screen twice to perform a second selection.

In the start screen of Windows 8, you can select multiple tiles one after another seamlessly. The bottom bar that appears doesn’t not interfere with subsequent touch gestures. But inside my app, the bar captures the first gesture and I end up selecting the second tile twice. It makes my app feel unresponsive.

How do I fix this?

To Replicate this:

1) Start a new “Grid App (XAML)” under Windows Store in Visual Studio 2012.

2) In the GroupedItemsPage.xaml, add the following XAML to it:

<Page.BottomAppBar>
    <AppBar>
        <Button Content="X"/>
    </AppBar>
</Page.BottomAppBar>

3) Find the GridView with x:Name=”itemGridView” and set its SelectionMode=”Extended” and IsSwipeEnabled=”true”

<GridView
    x:Name="itemGridView"
    AutomationProperties.AutomationId="ItemGridView"
    AutomationProperties.Name="Grouped Items"
    Grid.RowSpan="2"
    Padding="116,137,40,46"
    ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
    SelectionMode="Extended"
    IsSwipeEnabled="true"
    IsItemClickEnabled="True"
    ItemClick="ItemView_ItemClick">

4) Add the following code in the code-behind file:

public GroupedItemsPage()
    {
        this.InitializeComponent();

        itemGridView.SelectionChanged += ItemGridViewOnSelectionChanged;
    }

    private void ItemGridViewOnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (itemGridView.SelectedItems.Count > 0)
        {
            this.BottomAppBar.IsOpen = true;
            this.BottomAppBar.IsSticky = true;
        }
        else
        {
            this.BottomAppBar.IsSticky = false;
            this.BottomAppBar.IsOpen = false;
        }
    }

5) Run it and watch out the app bar appears after the first selection, but then your second gesture to select the second tile is absorbed.

Answer 1

Believe it or not the solution is really simple. You have to change the order of how you set BottomAppBar.IsOpen and BottomAppBar.IsSticky:

private void ItemGridViewOnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (itemGridView.SelectedItems.Count > 0)
    {
        //this.BottomAppBar.IsOpen = true;
        //this.BottomAppBar.IsSticky = true;

        // must be done in this order for the app bar to work correctly
        this.BottomAppBar.IsSticky = true;
        this.BottomAppBar.IsOpen = true;
    }
    else
    {
        //this.BottomAppBar.IsSticky = false;
        //this.BottomAppBar.IsOpen = false;

        // I have a note in my code to use the following order,
        // but ordering for this doesn't seem to matter.
        this.BottomAppBar.IsOpen = false;
        this.BottomAppBar.IsSticky = false;
    }
}

I’m not sure why the ordering matters, but it does.