Custom Tabcontrol using silverlight in .cs File? (Adding stack panel inside custom tabitem header not working )

Question

In Silver light Tab control ,i have adding custom tab header (name along with close button) using xaml Working perfectly .

{xaml code}

<Grid Height="559" Name="grid1" Width="953">
<sdk:TabControl Height="391" HorizontalAlignment="Left" Margin="105,57,0,0" Name="tabControl1" VerticalAlignment="Top" Width="729">
    <sdk:TabItem  Name="tabItem1" IsTabStop="False">
        <sdk:TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="New Tab" Margin="1,1,1,1" VerticalAlignment="Center" />
                <Button Content="X" />
            </StackPanel>
        </sdk:TabItem.Header>
        <Grid />
    </sdk:TabItem>
</sdk:TabControl>
<Button Content="+" Height="23" HorizontalAlignment="Left" Margin="74,57,0,0" Name="button1" VerticalAlignment="Top" Width="31" Click="button1_Click" />
<Button Content="-" Height="23" HorizontalAlignment="Left" Margin="12,492,0,0" Name="button2" VerticalAlignment="Top" Width="31" Click="button2_Click" Visibility="Collapsed" />

Same implementation tried with .cs but i Could add stack panel inside the new tab header

code for your reference

   StackPanel st = new StackPanel();
            st.Orientation = Orientation.Horizontal;
            TextBlock txtb = new TextBlock();
            txtb.Text = "test";
            txtb.Margin = new Thickness(1, 1, 1, 1);
            txtb.VerticalAlignment = VerticalAlignment.Center;
            st.Children.Add(txtb);
            Button btn = new Button();
            btn.Content = "X";           
            st.Children.Add(btn);         

             tabControl1.Items.Add(new TabItem
            {
                Header =st              

            });

Help me to solve this problem . i need Custom tab header With button control

Chris Taylor · Accepted Answer · 2011-06-11T13:36:38.107

2

You should be setting tbItem.Header = st. tbItem.Content is used to define the content of the tab, not the tab header.

Your code would look something like this

  StackPanel st = new StackPanel();
  st.Orientation = Orientation.Horizontal;
  TextBlock txtb = new TextBlock();
  txtb.Text = "New Tab";
  txtb.Margin = new Thickness(1, 1, 1, 1);
  txtb.VerticalAlignment = VerticalAlignment.Center;
  st.Children.Add(txtb);
  Button btn = new Button();
  btn.Content = "X";      
  st.Children.Add(btn);

  TabItem tbitem = new TabItem();
  // Set the header to the stack panel with the 
  // TextBlock and Button
  tbitem.Header = st;

  // This is where you define the content
  // of the tab page. Here I just added a Grid 
  // as an example.
  tbitem.Content = new Grid(); 

  tabControl1.Items.Add(tbitem);

Edit: Here is a complete example

XAML With TabControl - Notice that I hook the Loaded event, this is where I will add the dynamic TabItem.

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" >  
  <Grid x:Name="LayoutRoot" Background="White">
    <Grid x:Name="Container">      
      <controls:TabControl Name="tabControl1" Loaded="TabControl_Loaded">

      </controls:TabControl>
    </Grid>
  </Grid>
</UserControl>

Here is the Code behind

using System;
using System.Windows;
using System.Windows.Controls;

namespace SilverlightApplication1
{
  public partial class MainPage : UserControl
  {
    public MainPage()
    {
      InitializeComponent();
    }

    private void TabControl_Loaded(object sender, RoutedEventArgs e)
    {
      StackPanel st = new StackPanel();
      st.Orientation = Orientation.Horizontal;
      TextBlock txtb = new TextBlock();
      txtb.Text = "New Tab";
      txtb.Margin = new Thickness(1, 1, 1, 1);
      txtb.VerticalAlignment = VerticalAlignment.Center;
      st.Children.Add(txtb);
      Button btn = new Button();
      btn.Content = "X";      
      st.Children.Add(btn);

      TabItem tbitem = new TabItem();
      // Set the header to the stack panel with the 
      // TextBlock and Button
      tbitem.Header = st;

      // This is where you define the content
      // of the tab page. Here I just added a Grid 
      // as an example.
      tbitem.Content = new Grid(); 

      tabControl1.Items.Add(tbitem);
    }
  }
}

edited Jun 11 '11 at 13:36

answered Jun 11 '11 at 12:56

Chris Taylor

52,623
10
78
89

@Chris taylor: Thanks For your reply . I Want to add stackpanel inside the TabItem header not tabitem content . – Ash Jun 11 '11 at 13:12
@Ash, and that is what `tbitem.Header = st` does, it assigns the StackPanel to the TabItem header, which is exactly what your XAML is doing as well. – Chris Taylor Jun 11 '11 at 13:15
Is it possible to add stackpanel inside tabitem for custom header? – Vasu Ashok Jun 11 '11 at 13:15
@Asta ni enohpi, yes it is, by assigning the StackPanel instance to the TabItem.Header, the header will host the StackPanel. – Chris Taylor Jun 11 '11 at 13:18
@Chris taylor:Plz See my Edited Question. But Stil that Button is not visible and name of the tab also displayed as new tab instead of test. Meaning behind is ,tabitem header doesn't accept custom header.Can you give solution for this. anything am missing – Ash Jun 11 '11 at 13:22
@Ash, at what point are you running the code to create the new TabControl? – Chris Taylor Jun 11 '11 at 13:33
@Chris taylor:i have created tab control statically .After that onclick of one button i have created newtab and added to static tabcontrol(code of this in my question) – Ash Jun 11 '11 at 13:41
@Ash, have you tried this in a simple application just doing the minimum? The edit I provided is directly from a quick test I did, I would suggest you do the same thing and work from there to see where you are going wrong. – Chris Taylor Jun 11 '11 at 13:49
@Chris Taylor:Works well.Thanks lot.+1 – Vasu Ashok Jun 12 '11 at 05:11
@Chris Taylor. If i Add more no tabitems ,it ll auto wrap automatically to New line.New Way to get in Single line with scroll like chrome – Vasu Ashok Jun 14 '11 at 08:27
@Asta ni enohpi, I have not done this myself but you will probably need to create a custom style and tab control. Take a look at this post http://www.dansoltesz.com/post/2010/07/20/Silverlight-tabcontrol-with-scrollable-tabItems.aspx – Chris Taylor Jun 14 '11 at 10:11
@Chris Taylor:thanks , i ll check . one more issue tabindex changed Randomly. Actually am setting tab-index and button name are same value.After created tabitems using button onclick ,i have tried to remove tabitem using button name . but it was deleted some other order.How could i manage this?? – Vasu Ashok Jun 15 '11 at 05:34
@Asta ni enohpi, it might be worth creating a new question which describes the problem and shows example code that demonstrates the problem, currently I will have to guess what you have done and then guess what might have gone wrong, which makes it hard to give quality help. – Chris Taylor Jun 15 '11 at 08:59

Custom Tabcontrol using silverlight in .cs File? (Adding stack panel inside custom tabitem header not working )

1 Answers1