Lost focus issue in WPF ListBox with grouping - wpf

Question

I am trying to make a list box with grouping on WPF. This can be easily done as described in WPF4 Unleashed and any other tutorial on the Web.
XAML (here are two lists with and without grouping + button to update their common item source):
<Window x:Class="GroupTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" ItemsSource="{Binding Path=Items}" x:Name="_listBox1">
<ListBox.GroupStyle>
<x:Static Member="GroupStyle.Default" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Grid.Row="1" ItemsSource="{Binding Path=Items}" x:Name="_listBox2">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="2" Content="Update Items" Click="Button_Click" Focusable="False"/>
</Grid>
</Window>
Code (here I set grouping when page loaded and update/replace item source when the button is clicked):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
namespace GroupTest
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
public class Item
{
public string Name { get; set; }
public bool Flag { get; set; }
}
private List<Item> _items;
public List<Item> Items
{
get { return _items; }
set
{
if (_items != value)
{
_items = value;
NotifyPropertyChanged("Items");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
public MainWindow()
{
InitializeComponent();
MakeItems();
DataContext = this;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ICollectionView view = CollectionViewSource.GetDefaultView(_listBox1.Items);
view.GroupDescriptions.Add(new PropertyGroupDescription("Flag"));
}
private void MakeItems()
{
_items = new List<Item>();
_items.Add(new Item() { Name = "1", Flag = true });
_items.Add(new Item() { Name = "2", Flag = true });
_items.Add(new Item() { Name = "3", Flag = false });
_items.Add(new Item() { Name = "4", Flag = true });
_items.Add(new Item() { Name = "5", Flag = false });
}
private void UpdateItems()
{
Items = new List<Item>(_items);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
UpdateItems();
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
It works, but there is a strange bug that I cannot work around. The list #1 with grouping loses focus every time I update its item source. While the list #2 without grouping keeps the focus.
Here is a link to the complete project source: https://dl.dropbox.com/u/60611528/GroupTest.zip
Any suggestions? Thanks in advance!
Update
I tried making Items an ObservableCollection<>, but this did not help. The focus still disappears from the grouped list.
Update 2
I my real app I have Items in a model class, which does not know about the list boxes. I hope for a solution that allows to fix the problem without tight coupling the window and model classes.

Answer 1

Here's a solution to the problem.
I've modified it to make it clear the data is changing. There's probably a simpler solution.
The idea is to detect if the Grouped ListBox has the focus on any of its items...if so, then the focus will be restored back to the listbox....because that's what is being lost.
I imagine it has something to do with the currency and ListCollectionView when in grouping mode, or it could be something to do with UI Virtualization...which is disabled when you using Grouping on a ListBox (because the Style sets ScrollViewer.CanContentScroll=False)
(you could look into the Reference Source code to dig a bit deeper on the behaviour).
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace GroupTest
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
public class Item
{
public string Name { get; set; }
public bool Flag { get; set; }
}
public ObservableCollection<Item> Items { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
public MainWindow()
{
Items = new ObservableCollection<Item>();
InitializeComponent();
MakeItems();
DataContext = this;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ICollectionView view = CollectionViewSource.GetDefaultView(_listBox1.Items);
view.GroupDescriptions.Add(new PropertyGroupDescription("Flag"));
}
bool bFlip = false;
private void MakeItems()
{
Items.Clear();
if (bFlip)
{
Items.Add(new Item() { Name = "1", Flag = true });
Items.Add(new Item() { Name = "2", Flag = true });
Items.Add(new Item() { Name = "3", Flag = false });
Items.Add(new Item() { Name = "4", Flag = true });
Items.Add(new Item() { Name = "5", Flag = false });
bFlip = false;
}
else
{
Items.Add(new Item() { Name = "1", Flag = true });
Items.Add(new Item() { Name = "2", Flag = true });
Items.Add(new Item() { Name = "3", Flag = false });
Items.Add(new Item() { Name = "4", Flag = true });
Items.Add(new Item() { Name = "5", Flag = false });
Items.Add(new Item() { Name = "A", Flag = false });
Items.Add(new Item() { Name = "B", Flag = false });
bFlip = true;
}
}
private void UpdateItems()
{
bool bListBox1HadFocus = false;
IInputElement focussedelement = Keyboard.FocusedElement;
ListBoxItem lbifocussed = focussedelement as ListBoxItem;
Item itemwithfocus = (lbifocussed != null ? lbifocussed.Content as Item : null);
for (int i = 0; i < Items.Count; i++)
{
ListBoxItem lbi = _listBox1.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
if (lbi == lbifocussed)
{
bListBox1HadFocus = true;
break;
}
}
Item oldselecteditem1 = _listBox1.SelectedItem as Item;
Item oldselecteditem2 = _listBox2.SelectedItem as Item;
MakeItems();
// Set back the selections to what they were
foreach (Item item in Items)
{
if (oldselecteditem1 != null && item.Name == oldselecteditem1.Name)
{
_listBox1.SelectedItem = item;
}
if (oldselecteditem2 != null && item.Name == oldselecteditem2.Name)
{
_listBox2.SelectedItem = item;
}
}
if (bListBox1HadFocus)
{
_listBox1.Focus();
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
UpdateItems();
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
If you want a version that is closer to your original then:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace GroupTest
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
public class Item
{
public string Name { get; set; }
public bool Flag { get; set; }
}
private List<Item> _items;
public List<Item> Items
{
get { return _items; }
set
{
if (_items != value)
{
_items = value;
NotifyPropertyChanged("Items");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
public MainWindow()
{
InitializeComponent();
MakeItems();
DataContext = this;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ICollectionView view = CollectionViewSource.GetDefaultView(_listBox1.Items);
view.GroupDescriptions.Add(new PropertyGroupDescription("Flag"));
}
private void MakeItems()
{
_items = new List<Item>();
_items.Add(new Item() { Name = "1", Flag = true });
_items.Add(new Item() { Name = "2", Flag = true });
_items.Add(new Item() { Name = "3", Flag = false });
_items.Add(new Item() { Name = "4", Flag = true });
_items.Add(new Item() { Name = "5", Flag = false });
}
private void UpdateItems()
{
bool bListBox1HadFocus = false;
IInputElement focussedelement = Keyboard.FocusedElement;
ListBoxItem lbifocussed = focussedelement as ListBoxItem;
Item itemwithfocus = (lbifocussed != null ? lbifocussed.Content as Item : null);
bool blistbox1hasfocus = (lbifocussed != null ? lbifocussed.IsFocused : false);
for (int i = 0; i < Items.Count; i++)
{
ListBoxItem lbi = _listBox1.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
if (lbi == lbifocussed)
{
bListBox1HadFocus = true;
break;
}
}
Items = new List<Item>(_items);
if (bListBox1HadFocus)
{
_listBox1.Focus();
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
UpdateItems();
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}