New tab creation button in RadTabControl

[Priya]

Hello,

Is there an option I can enable in the RadTabControl like the one shown below for creating new tabs?

If not, is there a easy way to add a custom "+" button to the toolbar area?

[Stenly]

Hello Priya,

To achieve the desired result, you could extract the default control template of the RadTabControl element, and add a new button inside the ScrollViewer control, with x:Name="ScrollViewerElement". After that, create a new Style with TargetType="RadTabControl" and set the modified template to its Template property. 

Please note that if the Xaml version of the assemblies is used, each StaticResource present inside the default control template would need to be extracted as well. Otherwise, an exception will occur for the missing resources.

Regarding the functionality of the included button, you could bind it to a command inside your view model. Through this command, modify the collection bound to the ItemsSource property of the RadTabControl element.

Alternatively, if the abovementioned approach is undesired, you could take a look at this article from our documentation, which shows an example of how to include such a button inside each RadTabItem element. Furthermore, the Closable Tabs SDK Example provides a runnable example of the approach from the provided article. The example could be found in our SDK Samples Browser, or in our GitHub repository.

With that said, I have attached a sample project, that contains an implementation of the first suggestion, so, could you give it a try?

Regards,
Stenly
Progress Telerik

[Priya]

Hi Stenly,

I would like to avoid making a copy of the whole template if that was possible. I also don't like the "+" button on every tab.

I was wondering if the solution you provided here for a different problem (https://www.telerik.com/forums/context-menu-in-the-header-area-of-the-radtabcontrol) can be applied.

I tried something like this

        private void RadTabCtrl_Loaded(object sender, RoutedEventArgs e)
        {
            var scrollViewer = ((RadTabControl)sender)
                    .ChildrenOfType<ScrollViewer>()
                    .FirstOrDefault(x => x.Name == "ScrollViewerElement");

            if (scrollViewer != null)
            {
                var sp = new StackPanel();
                sp.Orientation = Orientation.Horizontal;

                var btn = new Button();
                btn.Content = "+";
                sp.Children.Add(btn);

                scrollViewer.Content = sp;
            }

        }

Which gave me this

Meaning, I got my "+" button, but lost my Tabs

Any ideas?

[Stenly]

This behavior is expected because, in the default implementation of the ScrollViewer element, an ItemsPresenter is set to its content. By setting a new value to the Content property, the ItemsPresenter is removed.

With this being said, you could cache the ItemsPresenter element and include it inside the newly created StackPanel layout. After that, set the StackPanel as the content of the ScrollViewer.

private void RadTabControl_Loaded(object sender, RoutedEventArgs e)
{
    var scrollViewer = ((RadTabControl)sender)
        .ChildrenOfType<ScrollViewer>()
        .FirstOrDefault(x => x.Name == "ScrollViewerElement");

    if (scrollViewer != null)
    {
        var sp = new StackPanel();
        sp.Orientation = Orientation.Horizontal;

        var btn = new Button();
        btn.Content = "+";
        sp.Children.Add(btn);

        var currentContent = scrollViewer.Content as ItemsPresenter;
        scrollViewer.Content = null;

        sp.Children.Add(currentContent);
        scrollViewer.Content = sp;
    }
}

The produced result is as follows:

With that said, could you give this suggestion a try?

[Priya]

Hi Stenly,

That worked very well.

Also, by the changing the order of the children in the Stackpanel, I was able to get the button show  up in the end (than at the beginning) - which looks a bit better.

Thanks again for your help.