Modifying TabControl/TabStripPanel

[Richard]

Hi,

Now that I've sorted out my issues around the styling of the TabPanels themselves, I've hit a new snag.... styling the actual TabControl/TabStripPanel itself.

In our application we're using TabPanels to display "pages" - the tabs can be closed using a "x" button in the header. What we'd like to do is place a "+" button on the TabStripPanel to allow us to open a new tab/page.

Is there any way to style the TabControl to allow this?

Thanks,

Richard

[Bobi]

Hello Richard,

You can customize the appearance of the RadTabControl headers in the following way:

 <telerik:RadTabItem.Header>
                        <StackPanel Orientation="Horizontal">
                            //here you can put "X" image
                            <Image Source="/Examples/Common/Images/TabControl/Categories/beverages.png" Height="16" Width="16" />
                            <TextBlock Text="Beverages" Margin="3,0,0,0"/>
                        </StackPanel>
                    </telerik:RadTabItem.Header>
For more information about nested TabControls please visit:

http://demos.telerik.com/silverlight/default.aspx#TabControl/FirstLook
 
I hope that this answers your question. If not, please send us sample code (or even application) to be able to test it locally and try to find a solution to the problem.

Kind regards,
Boryana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Miroslav]

Hello Richard,

May I add to this, since I answered to a similar question before. I will paste my answer here, hopefully it will be usefult to you:

------------------------------------------
When you need to combine several collections it is quite handy to use the union:

// Get the data items, this can come from any source.
var dataItemsSource = Enumerable.Range(1, 10).Select(num => new PersonModel()
{
    Name = String.Format("Person: {0}", num)
}).Cast<Object>();

// Get a second collection with just the "new item" button.
var newnewButtonSource = new List<Object>()
{
    new NewTabModel()
};

//Combine them:
var itemsSource = dataItemsSource.Union(newButtonSource);

tabControl.ItemsSource = itemsSource;

The then with a StyleSelector, you can give the last item a different look and handle the selected event which will make sure that new data objects are added to the data collection when needed.

Generally this may seem as an overkill but with the M-V-VM pattern we could rarely bind directly to the Models, but need to add UI-specific models (i.e. the ViewModels) that we will bind to.

There is a problem with the updating of the objects - adding to the dataItemsSource collection will not update the UI. This is why you may look into BindableUnions or Bindable LINQ (found on codeplex).

The idea there is that you have a mock-collection that works like a facade for the two collections and is read-only. It implements IEnumerable and INotifyCollectionChanged and listens for the INotifyCollectionChanged events of the source collections (quite useful for building applications IMO).

I realize this is a little far-fetched for the simple feature but I hope that it was at least informative.

------------------------------------------

All the best,
Miroslav
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Richard]

Thanks for this Miroslav, looks like it could be what I'm looking for - will let you know!

[Richard]

Perfect, works 100% :)

Thank you for the prompt response!