Weird RadTabItem behaviour when adding tabs - no wrapping or scrolling

2 posts, 0 answers
  1. Kalle
    Kalle avatar
    26 posts
    Member since:
    Feb 2013

    Posted 25 Jun 2014 Link to this post

    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
  2. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 26 Jun 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top