[TabView] Binding to ItemsSource causes render problem with controls

[oliverluethi]

I'm submitting a Bug report

Current behavior

When I bind ItemsSource in TabView my controls (placed in TabView.ItemTemplate) are changed over all TabItems. It seems that the same Control is shared over all TabItems

Expected behavior

Every TabItem holds its own control instances of the ItemTemplate content

Minimal reproduction of the problem with instructions

I've attached a sample UWP app. This contains the following code:
-TabView
-TabView.ItemTemplate
-A custom control (changes background color to red, if text is empty on LostFocus event or turns green if a value is set)

MainPage.xaml
<my:TabView x:Name="Test" Height="500" Width="600" TabNavigation="Cycle"> <my:TabView.ItemTemplate> <DataTemplate> <local:MyControl Style="{StaticResource Test}" Text="" /> </DataTemplate> </my:TabView.ItemTemplate> </my:TabView>

Custom Control
`public class MyControl : TextBox
{
private Border _border;

    public MyControl()
    {
        this.DefaultStyleKey = typeof(MyControl);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        _border = this.GetTemplateChild("MyTest") as Border;
        
        Initialize();
    }

    private void Initialize()
    {
      
        this.LostFocus += (s, e) =>
        {
            var c = s as MyControl;

            if (c.Text == string.Empty)
                c._border.Background = new SolidColorBrush(Windows.UI.Colors.Red);
            else
                c._border.Background = new SolidColorBrush(Windows.UI.Colors.Green);
        };
    }
    
}`

UWPTestApp.zip

Environment

Nuget Package(s):
Microsoft.Toolkit.Uwp
Microsoft.Toolkit.Uwp.UI.Controls

Package Version(s):
5.1.1

Windows 10 Build Number:

• Fall Creators Update (16299)
• April 2018 Update (17134)
• October 2018 Update (17763)
• Insider Build (build number: )

App min and target version:

• Fall Creators Update (16299)
• April 2018 Update (17134)
• October 2018 Update (17763)
• Insider Build (xxxxx)

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Visual Studio

• 2017 (version: 15.9.5)
• 2017 Preview (version: )

[michael-hawker]

Hi @oliverluethi, this is how the WPF TabControl behaves which is how the TabView was designed to behave as well in order to re-use controls for data type forms as a form of virtualization via data binding. Linking to the WinUI Issue as well for tracking.

In order to use the control in your desired pattern, you just need to use the TabView for your Tab header pieces and an ItemsControl for the content frame to remember state. E.g.

<controls:TabView x:Name="DocumentTabs"
                         CanCloseTabs="True"
                         IsCloseButtonOverlay="True"
                         ItemsSource="{x:Bind ViewModel.OpenFiles}"
                         SelectedItem="{x:Bind ViewModel.ActiveFile, Mode=TwoWay}"
                         SelectedTabWidth="200"
                         SelectionChanged="DocumentTabs_SelectionChanged"
                         TabClosing="DocumentTabs_TabClosing"
                         TabWidthBehavior="Equal">
    <controls:TabView.ItemTemplate>
        <DataTemplate />
    </controls:TabView.ItemTemplate>
    <controls:TabView.ItemHeaderTemplate>
        <DataTemplate x:DataType="models:MyDocument">
            <TextBlock Text="{x:Bind Title, Mode=OneWay}" />
        </DataTemplate>
    </controls:TabView.ItemHeaderTemplate>
</controls:TabView>

<!--  Tab Content  -->
<ItemsControl Grid.Row="1"
              ItemsSource="{x:Bind ViewModel.OpenFiles}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
                <local:Document x:Name="Document"
                                            HorizontalAlignment="Stretch"
                                            LoadedDocument="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>