Disappearing tab content and other weird behavior

[Mark]

Alright, I'm doing something fairly complicated here, so bear with me. I have an object that makes queries to the server and returns a number of records for each query. I store the results in an ObservableCollection, and notify as soon as the first query returns, letting the collection update automatically with the resulting queries. As soon as I'm notified, I try to populate a TabControl with the appropriate data using templating/data binding. If I only have 1 query, it works fine, but if I have 2 or more, there's a problem. Tabs are created with the appropriate headers, making it appear as though the binding is working, but If I click on one that's not selected, the content is not displayed (it remains the content from the 1st result). If I then try to go back to the first tab, all content disappears. Below are the templates I'm using and the code I'm calling to do the binding. I know for sure it's only hitting my custom transformer once, because I tried setting a breakpoint there. Anyone have any ideas?

    <Application.Resources>
        <Style TargetType="telerik:RadTabItem" x:Key="LayerTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding Layer.Name}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <telerik:RadTabControl AllowDragReorder="True" SelectedIndex="{Binding ActiveRecordIndex}" ItemsSource="{Binding Records}" ItemContainerStyle="{StaticResource RecordTabItem}">
                        </telerik:RadTabControl>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="telerik:RadTabItem" x:Key="RecordTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding ID}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
        </Style>
        <DataTemplate x:Key="ItemTemplate">
            <Border BorderThickness="3,3,3,3" CornerRadius="5,5,5,5" Width="400" Height="200" VerticalAlignment="Stretch">
                <Border.BorderBrush>
                    <LinearGradientBrush EndPoint="0.986999988555908,0.958999991416931" StartPoint="0.0130000002682209,0.0230000000447035">
                        <GradientStop Color="#FFFFFFFF"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                        <GradientStop Color="#FFF2F2F2" Offset="0.51700001955032349"/>
                        <GradientStop Color="#FF707070" Offset="0.27000001072883606"/>
                        <GradientStop Color="#FF474747" Offset="0.76800000667572021"/>
                    </LinearGradientBrush>
                </Border.BorderBrush>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF080808"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Content="{Binding Converter={StaticResource ItemConverter}}"></ScrollViewer>
            </Border>
        </DataTemplate>
    </Application.Resources>

<Grid x:Name="LayoutRoot">
    <telerik:RadWindow Name="IdentifyBalloon" Header="Property Info" WindowStartupLocation="Manual" WindowAnimation="OnShow" CloseMode="Hide" ResizeMode="NoResize">
        <telerik:RadTabControl AllowDragReorder="True" ItemContainerStyle="{StaticResource LayerTabItem}">
        </telerik:RadTabControl>
    </telerik:RadWindow>
</Grid>

        public void Select(IdentifyStackObserver stackObserver, RadWindow window)
        {
            pixPoint = stackObserver.PixelPosition;
            ObservableCollection<IdentifyLayer> layers = stackObserver.Layers;
            string activeLayerName = stackObserver.ActiveLayer.Name;

            RadTabControl tabControl = window.Content as RadTabControl;
            IdentifyLayer[] layersCopy = new IdentifyLayer[layers.Count];
            int selectedIndex = 0;
            for (int i = 0; i < layers.Count; i++)
            {
                layersCopy[i] = layers[i];
                if (layers[i].Layer.Name.Equals(activeLayerName))
                    selectedIndex = i;
            }
            tabControl.ItemsSource = layers;
            layers.Clear();
            for (int i = 0; i < layersCopy.Length; i++)
                layers.Add(layersCopy[i]);
            tabControl.SelectedIndex = selectedIndex;

            if (!window.IsOpen)
            {
                window.Opened += PositionWindow;
                //window.Show();
                Application.Current.RootVisual.Dispatcher.BeginInvoke(window.Show);
            }
            else
            {
                PositionWindow(window, null);
            }
        }

[Miroslav]

Hi Mark,

I tried binding the tab to an observable collection and could not reproduce this, I tried adding and removing items.

Thanks for the code sample. Unfortunately I could not get it to run since there are a few things that I am missing, but looking at it:

The Xaml seems to be ok.

As far as I gather from your code, you bind the TabControl to a collection, then copy the collection, afterwards clear the first collection and then copy back the items. Why is this? 

If the collection that you bind to is observable (as it seems), this should not be necessary.

Also, you can set a selected item instead of a selectedIndex, like so:

tabControl.SelectedItem = layers.FirstOrDefault(layer => String.Equals(layer.Name, ActiveLayer.Name));

Please make sure that the collections and objects that you bind to are observable, so that everything will get updated properly.

We will be happy to look at a sample project where the problem happens. If you want you can open a support ticket and send us a sample there.

Regards,

Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.