This is a migrated thread and some comments may be shown as answers.

Weird RadTabItem behaviour when adding tabs - no wrapping or scrolling

1 Answer 191 Views

TabControl

This is a migrated thread and some comments may be shown as answers.

Kalle asked on 25 Jun 2014, 06:30 AM

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="Foreground" Value="White"/>

<Setter Property="MinHeight" Value="30"/>

<Setter Property="Background">

<Setter.Value>

<SolidColorBrush Color="#FF00659E"/>

</Setter.Value>

</Setter>

<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="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

<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

1 Answer, 1 is accepted

answered on 26 Jun 2014, 11:02 AM

TabControl-TabWidthStrangeBehavior.zip

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

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.