Weird RadTabItem behaviour when adding tabs - no wrapping or scrolling

[Kalle]

Hi!

This has probably something to do with the style that my RadTabItems are using but I thought it would be faster for me to solve this by asking here.
What my problem is that adding of RadTabItems to my TabControl works until the tabs reach the right side of the application window. After that something weird is happening and no wrapping or anything is done, I only see some of the tabs and they are "scaled" to fill the visible part of the tabitem area.

I have tried changing the settings of TabControl:
- ScrollMode="Pixel", "Item", "Viewport"
- OverflowMode="Scroll", "Wrap"
- DropDownDisplayMode="Visible", "WhenNeeded"

but none of these seem to do anything in this case. I would like my tabcontrol to have scroll buttons if tab items overflow.

Maybe it has something to do with some Width or Height property?

Here's couple of screenshots before adding the last tab item and after adding it:

TabControl before adding last item
TabControl after adding last item

Here's the XAML for my TabControl:

<telerik:RadTabControl
        Width="Auto"
        Height="Auto"
        x:Name="TabRegion"
        Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TabRegion}"
        AllowDragReorder="True"
        SelectedItemRemoveBehaviour="SelectPrevious"
        ItemContainerStyle="{DynamicResource RadTabItemStyle1}"
        ScrollMode="Viewport"
        OverflowMode="Scroll"
        DropDownDisplayMode="WhenNeeded"
        SelectedIndex="{Binding SelectedDashboardTab, Mode=TwoWay}"/>

And here's RadTabItemStyle1:

<Style x:Key="RadTabItemStyle1" TargetType="{x:Type telerik:RadTabItem}">
    <Setter Property="MinWidth" Value="50"/>
    <!-- Setter Property="BorderThickness" Value="{StaticResource TabItem_OuterBorderThickness}"/ -->
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="MinHeight" Value="30"/>
    <Setter Property="Background">
        <Setter.Value>
            <SolidColorBrush Color="#FF00659E"/>
        </Setter.Value>
    </Setter>
    <!-- Setter Property="BorderBrush" Value="{StaticResource TabItem_OuterBorder_Normal}"/ -->
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="10 0"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Header" Value="{Binding DataContext.ViewTitle, UpdateSourceTrigger=PropertyChanged}"/>
    <Setter Property="Height" Value="30" />
    <Setter Property="IsSelected" Value="{Binding DataContext.IsTabSelected, Mode=TwoWay}"/>
    <!-- Setter Property="DropDownContent" Value="{Binding DataContext.ViewTitle, UpdateSourceTrigger=PropertyChanged}"/ -->
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <ContentControl Content="{Binding}" />
                    <telerik:RadButton Grid.Column="1"
                            Width="14"
                            Height="14"
                            Margin="5 0 0 0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="10"
                            Foreground="Black"
                            Background="White"
                            l:RoutedEventHelper.EnableRoutedClick="True"
                            Padding="0"
                            Focusable="False"
                            >
                        <Image Source="/Dashboard;component/Images/delete_icon.png" Width="10" Height="10" Focusable="False"/>
                    </telerik:RadButton>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template" Value="{DynamicResource RadTabItemControlTemplate2}"/>
</Style>

And the ControlTemplate it is using:

<ControlTemplate x:Key="RadTabItemControlTemplate2" TargetType="{x:Type telerik:RadTabItem}">
        <Grid x:Name="wrapper">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStateGroup">
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="Selected">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/>
                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="SelectedMouseOver">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectionVisual">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <SolidColorBrush Color="#FFFFC92B"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.1" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement"/>
                            <DoubleAnimation Duration="0:0:0.1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="PlacementStates">
                    <VisualState x:Name="HorizontalTop"/>
                    <VisualState x:Name="HorizontalLeft">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <RotateTransform Angle="180"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="HorizontalRight"/>
                    <VisualState x:Name="HorizontalBottom">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <RotateTransform Angle="180"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="VerticalTop">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <RotateTransform Angle="-90"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="VerticalLeft">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <RotateTransform Angle="90"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="VerticalRight">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <RotateTransform Angle="-90"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="VerticalBottom">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <RotateTransform Angle="-90"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="ValidationStates"/>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="NormalVisual" CornerRadius="0" Margin="0,2,0,0" Background="Black" BorderBrush="#05C33F3F" Height="28">
                <Border BorderBrush="#FF002564" BorderThickness="1,1,1,0" CornerRadius="0" Background="#FF004D78"/>
            </Border>
            <Border x:Name="MouseOverVisual" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="0" Margin="0,2,0,0" Opacity="0" Background="#FF5FC2FA">
                <Border BorderThickness="1,1,1,0" CornerRadius="0" BorderBrush="#00000000"/>
            </Border>
            <Border x:Name="SelectionVisual" BorderBrush="#00000000" BorderThickness="1,1,1,0" CornerRadius="0" Margin="0" Opacity="0" Background="Black">
                <Border BorderBrush="Blue" BorderThickness="0,0,0,0" CornerRadius="0" Background="#FF0479BA"/>
            </Border>
            <telerik:LayoutTransformControl x:Name="OrientationTransform" IsTabStop="False">
                <ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </telerik:LayoutTransformControl>
        </Grid>
    </ControlTemplate>

Br,

Kalle

[Kiril Vandov]

Hello Kalle,

We have tried to reproduce the described behavior, but with no success. That is why I would like to ask you for more information about your scenario:
- is your RadTabControl in data-bound scenario or all tabs are xaml defined.
- do you add/remove RadTabItems dynamically.
- what is the exact version of your binaries, is it (2014.2 617)?
- do you use XAML or NOXAML binaries.
- do you have any other styles targeting RadTabControl or RadTabItem?

I have attached the project I used to test the described behavior. Please take a look at the project and ;et us know if you still reproduce the issue in it.

Kind regards,
Kiril Vandov
Telerik