New tab creation button in RadTabControl

1 Answer 31 Views
TabControl
Priya
Top achievements
Rank 1
Iron
Iron
Iron
Priya asked on 07 Apr 2022, 08:00 PM

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?

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 12 Apr 2022, 10:19 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Priya
Top achievements
Rank 1
Iron
Iron
Iron
commented on 22 Apr 2022, 11:48 PM

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
Telerik team
commented on 27 Apr 2022, 12:26 PM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 28 Apr 2022, 09:55 PM

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.

Tags
TabControl
Asked by
Priya
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stenly
Telerik team
Share this question
or