Multiple instances of the same TabItem

[Steve]

Hi,
We have an issue with tab control and the drop down menu items. Users can create multiple instances of the same tab, that's being displayed fine but when the drop down menu is shown, I can see the names of the tabs, i.e. multiple instances of say "Customer" tab. Now if I select first repeating tab then click on drop down, I can see multiple tabs being highlighted as selected. My question is how can I make those tab items unique so the tab control recognises them as such.

TIA

P.S. please find attached xaml for styling of drop down items

    <Style TargetType="Telerik_Windows_Controls_TabControl:DropDownMenu" x:Key="DropDownMenuStyle">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="{StaticResource MainScreen.DropDownMenu.BorderBrush}"/>
        <Setter Property="Background" Value="{StaticResource {x:Static root:TabResources.Tab_Active_Background_Brush}}"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="IconColumnWidth" Value="0"/>
        <Setter Property="MaxHeight" Value="500"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:RadWrapPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="Telerik_Windows_Controls_TabControl:DropDownMenuItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Telerik_Windows_Controls_TabControl:DropDownMenuItem">
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="True">
                                        <Setter Property="TextBlock.FontWeight" Value="Bold"/>
                                        <Setter Property="Border.Visibility" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="TextBlock.FontWeight" Value="SemiBold"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                                <Grid MaxWidth="250" MaxHeight="100"
                                      ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                                      DataContext="{Binding ., Converter={StaticResource String2ComplexObjectConverter}}" 
                                      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="2"/><!--padding left-->
                                        <ColumnDefinition Width="3"/><!--selected item border-->
                                        <ColumnDefinition/><!--content-->
                                        <ColumnDefinition Width="5"/><!--padding right-->
                                    </Grid.ColumnDefinitions>
                                    <!--Let's try to put something that can be hit detected when mousing over-->
                                    <TextBlock Text="" Grid.ColumnSpan="4" HorizontalAlignment="Stretch"/>
                                    <Border Background="{StaticResource ResourceKey={x:Static root:TabResources.Tab_Selected_Indicator_Brush}}"
                                            Visibility="{Binding RelativeSource={RelativeSource AncestorType=Telerik_Windows_Controls_TabControl:DropDownMenuItem}, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" 
                                            Grid.Column="1"/>
                                    <TextBlock Text="{Binding Title}"
                                               Foreground="{StaticResource {x:Static ColourResources.MenubarRibbonText}}"
                                               Margin="3,0"
                                               FontFamily="Segoe UI"
                                               Grid.Column="2"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Telerik_Windows_Controls_TabControl:DropDownMenu">
                    <Border Background="{TemplateBinding Background}"
                            Margin="{TemplateBinding Padding}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ItemsPresenter Margin="2,5,3,10" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[Dinko]

Hi Steve,

The selection issue is common in WPF's selector controls (like ListBox, ComboBox, the DropDownMenu and others). Basically, it happens when you have two items in the Items collection that are equal. For example, two strings named "Customer" or two instances of the same object.

The drop down menu of RadTabControl is using the Header values of the tabs in its items source, so if the headers are strings or any other objects that are duplicated and can be equal, the described issue will occur. My guess is that the Header is a string value. 

To resolve this, you can ensure that the Header contains unique values, even if the tab is duplicated. One way to do that is to use the data binding support of RadTabControl and work with custom class that describes each tab. That way, you can define two instances with the same name value and they won't be equal, thus the drop down menu will show them properly. You can see this idea in the attached project. Can you give it a try and let me know if it helps?

Regards,
Dinko
Progress Telerik