DataGrid loses selection

Question

There is a collection of categories with products.

Each category is represented in the interface by the AvalonDock tab, which has a DataGrid with products.

Now when switching from tab to tab, DataGrid updates the collection every time. If you select a pair of rows in the table on the first tab, switch to the second tab and return to the first one, the selection disappears.

What could be the problem?

XAML:

<xcad:DockingManager DocumentsSource="{Binding Examples}">
    <xcad:DockingManager.LayoutItemTemplate>
        <DataTemplate>
            <ListBox ItemsSource="{Binding Content.Items}" 
                     SelectionMode="Extended" />
        </DataTemplate>
    </xcad:DockingManager.LayoutItemTemplate>
    <xcad:LayoutRoot />
</xcad:DockingManager>>

Code-behind:

public partial class MainWindow : Window
{
    public class Example
    {
        public List<int> Items { get; } = new List<int>();

        public Example()
        {
            for (var i = 0; i < 10; i++)
            {
                Items.Add(i);
            }
        }
    }

    public List<Example> Examples { get; } = new List<Example>();

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        Examples.Add(new Example());
        Examples.Add(new Example());
    }
}

haven't tried it but IsSynchronizedWithCurrentItem may help. — Sushil Mate, Jul 20 '17 at 00:27
It seems switching between tabs updates the layout everytime thus clearing the selection. Why wouldn't you use `TabControl` instead? — boop_the_snoot, Jul 20 '17 at 11:01
You can use [MahApps.Metro](http://mahapps.com/) which has a themed [TabControl](http://mahapps.com/controls/tab-control.html) which by default has flyout kind of animation. This Nuget Package in itself is awesome. Try it once — boop_the_snoot, Jul 20 '17 at 11:37
@Nobody, Maybe I said the wrong thing. I do not know much English. I want behavior [like this.](http://i.imgur.com/EITuyeY.gif). That is, I want tabs to turn into windows when moving. — trydex, Jul 20 '17 at 12:12
If all you want is the tear away function. You can implement this. https://github.com/ButchersBoy/Dragablz — Dylan, Jul 21 '17 at 21:04
@Dylan, I know about Dragablz, but I would like to deal with AvalonDock. — trydex, Jul 21 '17 at 21:07
Possible duplicate of [How to support ListBox SelectedItems binding with MVVM in a navigable application](https://stackoverflow.com/questions/11142976/how-to-support-listbox-selecteditems-binding-with-mvvm-in-a-navigable-applicatio). — bab7lon, Jul 22 '17 at 11:20

score 3 · Accepted Answer · answered Jul 24 '17 at 15:40

As @nobody suggested, switching between tabs seems to update the layout, and the selection state is lost. If UI can't persist the selection state, then you can use the next layer i.e. presentation or view-model to do the same.

In this case, adding a IsSelected property to view-model item and a binding to ListViewItem should do the trick.

XAML:

<Grid>
    <xcad:DockingManager DocumentsSource="{Binding Examples}">
        <xcad:DockingManager.DocumentHeaderTemplate>
            <DataTemplate>
                <TextBlock Text="Doc" />
            </DataTemplate>
        </xcad:DockingManager.DocumentHeaderTemplate>
        <xcad:DockingManager.LayoutItemTemplate>
            <DataTemplate>
                <ListBox 
                    DisplayMemberPath="Value"
                    ItemsSource="{Binding Content.Items}" 
                    SelectionMode="Extended">
                    <ListBox.Resources>
                        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="LightBlue" />
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
                        </Style>
                    </ListBox.Resources>
                </ListBox>
            </DataTemplate>
        </xcad:DockingManager.LayoutItemTemplate>
        <xcad:LayoutRoot />
    </xcad:DockingManager>
</Grid>

Code-behind:

public partial class MainWindow : Window
{
    public class ExampleItem
    {
        public int Value { get; set; }
        public bool IsSelected { get; set; }
    }
    public class Example
    {
        public List<ExampleItem> Items { get; } = new List<ExampleItem>();

        public Example()
        {
            for (var i = 0; i < 10; i++)
            {
                Items.Add(new ExampleItem { Value = i });
            }
        }
    }

    public List<Example> Examples { get; } = new List<Example>();

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        Examples.Add(new Example());
        Examples.Add(new Example());
    }
}

DataGrid loses selection

1 Answers1