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

Tab navigation buttons issue

4 Answers 40 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Jerome MAILLEY
Top achievements
Rank 1
Jerome MAILLEY asked on 26 Mar 2018, 02:47 PM

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: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"
    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,
   

 

4 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 29 Mar 2018, 10:20 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jerome MAILLEY
Top achievements
Rank 1
answered on 06 Apr 2018, 08:43 AM

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,

0
Martin Ivanov
Telerik team
answered on 10 Apr 2018, 12:09 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jerome MAILLEY
Top achievements
Rank 1
answered on 10 Apr 2018, 12:36 PM

Hello Martin,

Thanks a lot, it works as expected.

Regards,

Tags
TabControl
Asked by
Jerome MAILLEY
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Jerome MAILLEY
Top achievements
Rank 1
Share this question
or