Modifying TabControl/TabStripPanel

5 posts, 1 answers
  1. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 27 Mar 2009 Link to this post

    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
  2. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 30 Mar 2009 Link to this post

    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.
  3. DevCraft banner
  4. Answer
    Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 31 Mar 2009 Link to this post

    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.
  5. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 31 Mar 2009 Link to this post

    Thanks for this Miroslav, looks like it could be what I'm looking for - will let you know!
  6. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 01 Apr 2009 Link to this post

    Perfect, works 100% :)

    Thank you for the prompt response!
Back to Top
DevCraft banner