TopTemplate definition is suppressing the navigation arrows

[MacKenzie Mickelsen]

We have run into an issue with the RadTabControl, we have defined a control template for the top part of the control. Basically we are just adding a button to add more tabs. However, when we do this the navigation arrows don’t show up when we’ve added more tabs than can be displayed on the screen. Does anyone have any ideas what we might do to get those back?

 

Thanks in advance

MacKenzie

here is the control template we have defined

 

<ControlTemplate x:Key="TabControlTopTemplate" TargetType="navigation:RadTabControl">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled">
                            <Storyboard/>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border Margin="0" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="ContentElement" Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>
                </Border>
                <Grid Background="{StaticResource RadTabControlHeaderBackground}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="20" />
                    </Grid.ColumnDefinitions>

                    <Rectangle Grid.Column="0"  Visibility="{TemplateBinding BackgroundVisibility}" Fill="{StaticResource RadTabControlHeaderBackground}">

                    </Rectangle>
                    <ItemsPresenter Grid.Column="0" Margin="2 4 0 0"/>
                    <Image Grid.Column="1"  Name="addButton" Source="Images/NewLayout16.png" Width="16" Height="16" MouseLeftButtonDown="addButton_MouseLeftButtonDown" />

                </Grid>
                <Rectangle x:Name="DisableVisual" Visibility="Collapsed" Grid.RowSpan="2" Fill="{StaticResource RadTabItemDisabledBackground}"/>
            </Grid>
        </ControlTemplate>

[Dimitrina]

Hello MacKenzie,

After I reviewed you custom template I noticed that you have removed some of the required elements of the TabControl control template. In order to display the left/right arrows and the DropDownMenu when there are too many TabItems, you have to include the TabStrip element.

I prepared a sample project illustrating how to include an AddButton to the RadTabControl. Please take a look at it and let me know if it works for you or if you need more info.

Regards,
Dimitrina
the Telerik team