Search code examples
c#xamlwindows-8windows-store-appsappbar

ListView and AppBar cooperation. The simplest possible multiple select scenario


What is the SIMPLEST way of implementing list view multiple select scenario together with the AppBar? So that it behaves exactly as the Windows 8 start screen when multiple items selected (e.g. via the mouse right-click).

I want to show the app bar together with the first selected list view item, I want to keep it opened with the second, third and so on and I want to close it either by any app bar button action (context action performed) or by other system wide app bar close action (e.g. right-click somewhere else, which would mean context action cancelled).

My current implementation is too complicated. I believe I must have missed something - such a basic and common scenario must be possible to implement in a standardized way.

Scaffolding code prepared below. If only this code used the app bar hides before right-click on the second list view item and one more right-click on list view is required (not acceptable). If combined with IsSticky it is not possible to select the second list view item at all.

<Page
    x:Class="ListViewAndAppBar.ExamplePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListViewAndAppBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    DataContext="{Binding ExamplePageViewModel, Source={StaticResource Locator}}">

    <Grid Background="Gray">
        <ListView
            x:Name="ListView"
            ItemsSource="{Binding Persons}"
            SelectionMode="Multiple"
            SelectionChanged="ListView_SelectionChanged">
        </ListView>
    </Grid>

    <Page.BottomAppBar>
        <AppBar x:Name="BottomAppBar" Padding="10,0,10,0">
            <Button x:Name="BottomAppBarBack" Tag="Back" Style="{StaticResource BackAppBarButtonStyle}" HorizontalAlignment="Left" />
        </AppBar>
    </Page.BottomAppBar>
</Page>

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    this.BottomAppBar.IsOpen = true;
    //this.BottomAppBar.IsSticky = true;
}

Solution

  • Answering my own question. I found the solution short after I posted the question. I will leave it here in case somebody does the same beginner's mistake.

    The solution cannot be simpler: IsSticky must be called BEFORE IsOpen. After this switch all works as expected.

    private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (this.ListBox.SelectedItems.Count > 0)
        {
            this.BottomAppBar.IsSticky = true;
            this.BottomAppBar.IsOpen = true;
        }
        else
        {
            this.BottomAppBar.IsOpen = false;
            this.BottomAppBar.IsSticky = false;
        }
    
        // Or the following if you wish...
        // this.BottomAppBar.IsOpen = this.BottomAppBar.IsSticky = this.ListView.SelectedItems.Count > 0;
    }