CODEWITHSUNDEEP
xamlwindows-store-appswin-universal-app
SebastianR
SebastianR

Reputation: 2193

Mutually exclusive selection of two listviews

I've implemented a UWP SplitView similar to the one made by Diederik Krols. I prefer the approach of using a ListView over using RadioButtons as shown by Jerry Nixon's implementation of the SplitView.

However, I have a problem when I add secondary commands at the bottom of the SplitView, which Diederik doesn't do. These secondary commands are implemented by another ListView bound to a collection of Commands. So I have TWO ListViews that should only allow ONE item to be selected among them at a time.

I've tried two things:

  1. I've bound the SelectedItem property of both ListViews to the same object. The idea was that maybe ListView doesn't display a selection if SelectedItem is not in the list bound to ItemsSource. Sadly, it simply goes on displaying the last selected item.
  2. I've bound each ListView's SelectedItem to its own property. When one of the ListViews' item is selected, the SelectedItem of the other property is set to 'null' by the ViewModel. This produces the same result as in 1.

Any ideas on how to solve this problem?

Upvotes: 0

Views: 215

Answers (1)

Depechie
Depechie

Reputation: 6142

I had the same problem. I have a fix, but I'm not that proud of it ;) it's a dirty hack and I'm hoping other solutions will present itself so I can change it too.

But here it is:

First the listviews hook up to the SelectionChanged event even though we also bind the selected item to the viewmodel ( full code shown here https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/Controls/SidePaneControl.xaml )

<ListView x:Name="TopMenu"
          SelectionChanged="OnTopMenuSelectionChanged"
          Background="Transparent"
          ItemsSource="{x:Bind ViewModel.TopMenuItems}"
          ItemTemplateSelector="{StaticResource MenuItemTemplateSelector}"                 
          ItemContainerStyle="{StaticResource MenuItemContainerStyle}"
          SelectedItem="{x:Bind ViewModel.SelectedTopMenuItem, Mode=TwoWay, Converter={StaticResource XBindItemCastingConverter}}"
          Grid.Row="0" />

In that SelectionChanged, we'll deselect the 'other' listviews selection! ( full code shown here https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/Controls/SidePaneControl.xaml.cs ) Note that we need to keep track that we are already in a deselecting process otherwise we'll end up with an endless loop. This is done with the _listViewChanging field. 

private void OnBottomMenuSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (!_listViewChanging)
    {
        _listViewChanging = true;
        TopMenu.SelectedIndex = -1;
        _listViewChanging = false;
    }
}

Last thing to do is making sure we handle the selection and clear it again in the viewmodel for next itteration ( full code shown here https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/ViewModels/SidePaneViewModel.cs )

public MenuItem SelectedBottomMenuItem
{
    get { return _selectedBottomMenuItem; }
    set
    {
        if (Set(() => SelectedBottomMenuItem, ref _selectedBottomMenuItem, value))
        {
            if (value != null)
            {
                if (string.IsNullOrEmpty(SelectedBottomMenuItem.Title))
                    HamburgerCommand.Execute(null);

                if (SelectedBottomMenuItem.Title.Equals("settings", StringComparison.OrdinalIgnoreCase))
                    SettingsCommand.Execute(null);

                SelectedBottomMenuItem = null;
            }
        }                
    }
}

Upvotes: 1

Related Questions