WPF UI Persistence in TabControl

Question

I am having problems with something that seems very simple, but actually turned out to be quite complicated.

Lets say you have a TabControl associated with the Items ViewModels source and the items displayed using the DataTemplate. Now let's say that the DataTemplate consists of a grid with two columns and a grid divider to resize the columns.

The problem is that when you resize columns on one tab and switch to another tab, the column sizes also change. This is because TabControl uses a DataTemplate among all tabs. This lack of user interface stability applies to all elements of the template, which can lead to frustration when configuring various user interface components. Another example is the scroll position in a DataGrid (tab). A DataGrid with several elements will scroll outside the field of view (only one row will be visible) if a DataGrid with a large number of rows scrolls down to another tab. In addition to this, if the TabControl has various elements defined in several DataTemplates, the view is reset when switching between elements of types differenet. I can understand that this approach saves resources, but the resulting functionality seems rather inconsistent with the expected user interface behavior.

And so I am wondering if there is a solution / workaround for this, since I am sure that this is what others have met before. I noticed several similar questions in other forums, but there was no real solution. One is about using AdornerDecorator, but doesn't seem to work when used with a DataTemplate. I'm not interested in binding all UI properties (e.g. column width, scroll position) to my ViewModels, and in fact I tried it for a simple GridSplitter example, and I was not able to get it working. The width of the ColumnDefinitions parameter is not necessarily dependent on the grid separator. Despite this, it would be nice if it were a general solution. Any thoughts?

If I remove TabControl and use ItemControl, will I encounter a similar problem? Is it possible to change the style of TabControl so that it does not share ContentPresenter between tabs?

Answer 1

I’ve been busy with this for a long time. Finally, instead of trying to fix / modify the TabControl, I simply recreated its functionality. It really worked very well. I made a Tab'like'Control from the Listbox (Tab headers) and ItemsControl. The main thing was to set the ItemsPanelTemplate parameter of the ItemsControl element to the grid. A bit of styling and a DataTrigger to control the visibility of items and voila. It works great, each “tab” is a unique object and saves all its user interfaces, such as scroll position, selection, column width, etc. Any flaws or problems that may arise with this type of solution?

<DockPanel> <ListBox DockPanel.Dock="Top" ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}" ItemContainerStyle="{StaticResource ImitateTabControlStyle}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"> </StackPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="2,2,2,0" Orientation="Horizontal" > <TextBlock Margin="4,0" FontWeight="Bold" Padding="2" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Name}" > </TextBlock> <Button Margin="4,0" Command="{Binding CloseCommand}"> <Image Source="/TERM;component/Images/Symbol-Delete.png" MaxHeight="20"/> </Button> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <ItemsControl ItemsSource="{Binding Tabs}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <ContentControl Content="{Binding}"> <ContentControl.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding IsSelected}" Value="False"> <Setter Property="ContentControl.Visibility" Value="Hidden" /> </DataTrigger> </Style.Triggers> </Style> </ContentControl.Style> </ContentControl> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </DockPanel>