Tab navigation buttons issue

[Jerome MAILLEY]

Hi,

I'm facing an issue with the RadTabControl. In fact, when I have the number of tab is too big to be displayed in the available width, the right/left navigation stay disabled. Please have a look to the attached screenshot.

Nothing particular in my code :

TabNavigationControl.xaml

<UserControl x:Class="AS.Cpm.Silverlight.Client.UserControls.TabNavigationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
    xmlns:userControl="clr-namespace:AS.Cpm.Silverlight.Client.UserControls"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
  <UserControl.Resources>
    <Style x:Key="ClosableStyle" TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabItemStyle}">
      <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
      <Setter Property="HeaderTemplate">
        <Setter.Value>
          <DataTemplate>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
              </Grid.ColumnDefinitions>
              <ContentControl Content="{Binding Title}" />
              <telerik:RadButton Grid.Column="1"
                                 Width="16"
                                 Height="16"
                                 Margin="3 0 0 0"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 userControl:RoutedEventHelper.EnableRoutedClick="True"
                                 Content="x"
                                 Padding="0"
                                 IsEnabled="{Binding IsCloseEnabled}"
                                 Style="{StaticResource NoBorderRadButtonStyle}"/>
            </Grid>
          </DataTemplate>
        </Setter.Value>
      </Setter>
      <Setter Property="ContentTemplate">
        <Setter.Value>
          <DataTemplate>
            <Grid>
              <!--add a frame!-->
              <navigation:Frame Padding="5,5,5,5" x:Name="Frame" Source="{Binding Uri}"
                VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
                JournalOwnership="OwnsJournal" Grid.Row="1" Grid.Column="1">
                <navigation:Frame.UriMapper>
                  <uriMapper:UriMapper>
                    <uriMapper:UriMapping Uri="/ModuleExecution" MappedUri="/Views/Modules/ModuleEditionView.xaml"/>
                    <uriMapper:UriMapping Uri="/Refresh/Module/{pageName}/{param}" MappedUri="/Views/ModuleMenu.xaml?Menu={pageName}&Refresh={param}"/>
                    <uriMapper:UriMapping Uri="/Refresh/{pageName}/{param}" MappedUri="/Views/{pageName}View.xaml?Refresh={param}"/>
                    <uriMapper:UriMapping Uri="/Module/{pageName}" MappedUri="/Views/ModuleMenu.xaml?Menu={pageName}"/>
                    <uriMapper:UriMapping Uri="/FormulaEdition" MappedUri="/Views/Formulas/FormulaEditionView.xaml"/>
                    <uriMapper:UriMapping Uri="/GeneralLedger" MappedUri="/Views/GeneralLedger/GeneralLedgerView.xaml"/>
                    <uriMapper:UriMapping Uri="/Asp/{pageName}" MappedUri="/Views/AspPlaceHolder.xaml?Page={pageName}"/>
                    <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}View.xaml"/>
                  </uriMapper:UriMapper>
                </navigation:Frame.UriMapper>
              </navigation:Frame>
            </Grid>
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
    </Grid>
</UserControl>

 

TabNavigationControl.xaml.cs :

private void CreateTabControl()
{
    LayoutRoot.Children.Clear();
    _tabControl = new RadTabControl();
    _tabControl.ItemContainerStyle = Resources["ClosableStyle"] as Style;
    _tabControl.Align = Telerik.Windows.Controls.TabControl.TabStripAlign.Right;
    _tabControl.IsContentPreserved = true;
    _tabControl.SelectedItemRemoveBehaviour = Telerik.Windows.Controls.TabControl.SelectedItemRemoveBehaviour.SelectLast;
    _tabControl.AllowDragReorder = true;
    _tabControl.SelectionChanged += _tabControl_SelectionChanged;
    LayoutRoot.Children.Add(_tabControl);
    _tabControl.ItemsSource = tabItemsModel;
}

 

Thanks for your help,
   

 

[Martin Ivanov]

Hello Jerome,

I used your code to test the reported behavior but I wasn't able to reproduce it. Can you please give the attached project a try and let me know if I am missing something?

Regards,
Martin Ivanov
Progress Telerik

[Jerome MAILLEY]

Hello Martin,

First of all, please consider that I'm using the 2016.3.1024.1050 version of Telerik dll. I modified a bit your project to reproduce the issue. You will find it attached to this post.

The attached file extension is JPG but it's a fake extension. It just allows me to workaround your forum rules. In fact, you must change this extension to ZIP and then unzip the archive to get the project.

Thanks,

[Martin Ivanov]

Hello Jerome,

<ScrollViewer x:Name="ScrollViewerElement"
        Style="{StaticResource EmptyScrollViewerStyle}"
        VerticalScrollBarVisibility="Disabled"
        BorderThickness="0"
        IsTabStop="False"
        HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}"
        Margin="0">
    <ItemsPresenter/>
</ScrollViewer>

It seems that there are custom modifications in the Telerik.Windows.Controls.Navigation.xaml file and this is why the buttons are disabled. Basically, the x:Name of the ScrollViewer in the RadTabControl's template was removed. However, the scrolling logic of the control depends on this Name and if its missing it doesn't work. In order to resolve this you can set the x:Name of the ScrollViewer to "ScrollViewerElement".

Regards,
Martin Ivanov
Progress Telerik

[Jerome MAILLEY]

Hello Martin,

Thanks a lot, it works as expected.

Regards,