ListBox in which each item contains a List

Question

I am trying to implement a list that contains items of a certain type, a Session. Each Session contains a list that contains the type Note. I want to display these Notes in the list under their respective Session header.

Currently I have tried two different methods. The first way was to use ItemsControls as ControlTemplate for the ListBoxItems. This is what I used in the picture below and it is how I want the list to look like. Each red rectangle shows a Session, the items below the header are the Notes. The problem then is that the selection from the ListBox selects ItemsControls instead of each separate Note.

The other way I tried to implement the list is to give each Note a property of which Session it belongs to in order to use a GroupStyle on the ListBox. If I then set the ItemsSource of the ListBox to a list of Notes instead of Sessions I'll get a list that looks like the picture and that has selection of notes. The problem now is that I want the list to show Sessions that doesn't contain any Notes as well.

Does anyone know what I should use to implement a list with selection and that works the way I have described?

Answer 1

MainWindow.xaml:

    <TreeView ItemsSource="{Binding}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:Session}" ItemsSource="{Binding Path=Notes}">
                <TextBlock Text="{Binding Path=Name}" />
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type local:Note}">
                <Expander Header="{Binding Path=Notek}">
                    <TextBlock Foreground="Red" Text="{Binding Path=Details}" />
                </Expander>
            </DataTemplate>
        </TreeView.Resources>
    </TreeView>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        List<Session> sessions = new List<Session>();
        for (int i = 0; i < 5; i++)
        {
            List<Note> notes = new List<Note>();
            for (int j = i * 5; j < (i + 1) * 5; j++)
            {
                Note note = new Note()
                {
                    Notek = string.Format("Note {0}", j),
                    Details = string.Format("Note j = {0}{1}j*j = {2}", j, System.Environment.NewLine, j*j)
                };

                notes.Add(note);
            }
            Session session = new Session()
            {
                Name = string.Format("Session # {0}", i),
                Notes = notes
            };
            sessions.Add(session);
        }
        DataContext = sessions;
    }
}

public class Session
{
    public string Name { get; set; }
    public List<Note> Notes { get; set; }
}
public class Note
{
    public string Notek { get; set; }
    public string Details { get; set; }
}

I think that you can style your HierarchicalDataTemplate as you want. I just show you the example. I think its easier rather than ItemsControl with event handlers.

Answer 2

To create the answer I will assume the following data model:

class Session 
{
    public IEnumerable<Note> Notes { get; }
}

class Note { }

This requires some coding to sync up the list boxes. I have created an attached property called 'ListBoxGroup'. All listboxes with the same group name can only have a single shared selected item. It is quite a lot of code so it's at the bottom.

Important to note: The listboxgroup for a listbox cannot be changed after originally set, and it doesn't support removal of items, doesn't check for nulls etc. So if you need to change sessions at runtime you should remove items from their groups, check if a listbox is removed from the visual tree, etc.

First the XAML for the page:

     xmlns:local="clr-namespace:YourApplication.YourNamespace"
    <!-- ItemsControl does not have selection -->
    <ItemsControl ItemsSource="{Binding SessionList}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <!-- Header for the session -->
                    <Border Background="Gray">
                        <TextBlock Text="{Binding Name}" />
                    </Border>
                    <!-- listbox for notes -->
                    <ListBox ItemsSource="{Binding Notes}" local:ListBoxGroup.GroupName="Group1">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <!-- Template for a single note -->
                                <TextBlock Text="{Binding Description}" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Below is C# code for the ListBoxGroup property:

public static class ListBoxGroup
{
    public static string GetGroupName(DependencyObject obj)
    {
        return (string)obj.GetValue(GroupNameProperty);
    }

    public static void SetGroupName(DependencyObject obj, string value)
    {
        obj.SetValue(GroupNameProperty, value);
    }

    // Using a DependencyProperty as the backing store for GroupName.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty GroupNameProperty =
        DependencyProperty.RegisterAttached("GroupName", typeof(string), typeof(ListBoxGroup), new UIPropertyMetadata(null, ListBoxGroupChanged));

    private static Dictionary<string, List<ListBox>> _listBoxes = new Dictionary<string, List<ListBox>>();

    private static void ListBoxGroupChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        string newValue = e.NewValue as string;
        ListBox listBox = obj as ListBox;
        if (newValue == null || listBox == null) return;


        if (_listBoxes.ContainsKey(newValue))
        {
            _listBoxes[newValue].Add(listBox);
        }
        else
        {
            _listBoxes.Add(newValue, new List<ListBox>() { listBox });
        }

        listBox.SelectionChanged += new SelectionChangedEventHandler(listBox_SelectionChanged);
        listBox.PreviewKeyUp += new System.Windows.Input.KeyEventHandler(listBox_KeyUp);
    }

    static void listBox_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)
    {
        ListBox listBox = sender as ListBox;

        if (e.Key == System.Windows.Input.Key.Up && listBox.SelectedIndex == 0)
        {
            //move to previous
            string groupName = GetGroupName(listBox);
            List<ListBox> group = _listBoxes[groupName];

            int senderIndex = group.IndexOf(listBox);
            if (senderIndex != 0)
            {
                listBox.SelectedItem = null;

                ListBox beforeSender = group[senderIndex - 1];

                int index = beforeSender.Items.Count - 1;
                beforeSender.SelectedIndex = index;

                var container = beforeSender.ItemContainerGenerator.ContainerFromIndex(index);

                (container as FrameworkElement).Focus();


            }
        }
        else if (e.Key == System.Windows.Input.Key.Down 
                    && listBox.SelectedIndex == listBox.Items.Count - 1)
        {
            //move to next
            string groupName = GetGroupName(listBox);
            List<ListBox> group = _listBoxes[groupName];

            int senderIndex = group.IndexOf(listBox);
            if (senderIndex != group.Count - 1)
            {
                listBox.SelectedItem = null;

                ListBox afterSender = group[senderIndex + 1];

                afterSender.SelectedIndex = 0;
                var container = afterSender.ItemContainerGenerator.ContainerFromIndex(0);

                (container as FrameworkElement).Focus();
            }
        }



    }

    static void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count > 0)
        {
            ListBox listBox = sender as ListBox;
            string groupName = GetGroupName(listBox);

            foreach (var item in _listBoxes[groupName])
            {
                if (item != listBox)
                {
                    item.SelectedItem = null;
                }
            }

        }


    }
}