Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TabControl > Dynamic Tab Opening and Closing

• Ali Rafiee

  Posted on Jan 11, 2012 (permalink)

  Hi,
  
  I'm trying to write an application where the main view has a RibbonBar and a TabControl below it.  What I need to accomplish is to add Tabs to the TabControl, in response to the user click on buttons in the RibbonBar, and also allow closing of open tabs, both without disturbing the other tabs that are open. 
  
  Each tab that I need to open contain different UserControl controls.
  I did this by doing the following:
  public void buttonX_Clicked(....)
  {
     RadTabItem newTab = new RadTabItem() { Header = "The Text", Content = new PageX() } ;
     tabCtrl.Items.Add(newTab);
     tabCtrl.SelectedItem = newTab;
  }
  
  public void buttonY_Clicked(....)
  {
      RadTabItem newTab = new RadTabItem() { Header = "The Y Text", Content = new PageY() } ;
      tabCtrl.Items.Add(newTab);
      tabCtrl.SelectedItem = newTab;
  }
  
  I don't know if this the best way or not, but it worked.
  
  What I did next was to look at the example How to Add Close Button to the Tab Header http://www.telerik.com/help/wpf/radtabcontrol-how-to-add-close-button-to-the-tab-headers.html
  
  This uses Item templates for the header and content.
  So I setup a new class for my tab items:
  class MyTabItem
  {
     public string Title { get; set;}
     public UserControl Content { get; set; }
  }
  
  And use a List<MyTabItem> and set the ItemsSource of the TabControl to the list.
  
  What I can't figure out is, in the Item Template of the tab control, how do I bind the TabItem's Content property to the Content property in my MyTabItem.
  
  Does anyone have any suggestions?
  
  Thank you,
  Ali
  

  Reply

• Ali Rafiee

  Posted on Jan 12, 2012 (permalink)

  I got it figured out.  I looked at a couple of other examples and figured out what to do.
  
  Modified the style to this:
  

  <UserControl.Resources>

      <Style x:Key="ClosableStyle" TargetType="telerik:RadTabItem">

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

                                             Content="x"

                                             example:RoutedEventHelper.EnableRoutedClick="True"

                                             Padding="0" />

                      </Grid>

                  </DataTemplate>

              </Setter.Value>

          </Setter>

          <Setter Property="ContentTemplate">

              <Setter.Value>

                  <DataTemplate>

                      <Grid>

                          <ContentControl Content="{Binding Content}" />

                      </Grid>

                  </DataTemplate>

              </Setter.Value>

          </Setter>

      </Style>

  </UserControl.Resources>

  
  And made sure the that RadTabControl's IsContentPreserved="True".
  
  All is well.  Thank you for the examples.
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TabControl > Dynamic Tab Opening and Closing