TabControl的疑惑

Question

 

TabControl可以通过添加TabItem的方式来增加标签选项。而TabItem又可以通过<TabItem.Header></TabItem.Header>方式来设置标签头模板。如果我在标签头模板中添加了button控件，并且响应了button控件的click事件，如何才能知道click事件来自哪一个TabItem呢？比如响应了button的click，来关闭所在标签。需要TabControl.removeAt([标签的Index])。如何能知道这个Index呢？TabControl.selectIndex是在选中了某个标签的情况下能够知道，但是如果没有选中标签，而直接点击button，那么TabControl.selectIndex没有获取事件所在标签的Index。

Answer 1

 

虽然我没有进行试验，通常，可以通过button_click事件的sender 得到button对象，然后可以找Parent对象等方法进行

Answer 2

发帖子的时候正好在试parent，向上parent了八层也没找到TabItem。哪如果知道了TabItem的header的值，可以remove掉么？

Answer 3

明天我做个例子实验一下

 

Answer 4

嘿嘿，非常感谢啊！麻烦了！

Answer 5

Code Snippet

以下代码基于Silverlight 2.0正式版进行

xaml

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="SilverlightApplication3.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <basics:TabControl x:Name="t1">
            <basics:TabItem>
                <basics:TabItem.Header>
                    <Button Content="测试啊测试"></Button>
                </basics:TabItem.Header>
            </basics:TabItem>
            <basics:TabItem>
                <basics:TabItem.Header>
                    <Button Content="测试啊测试"></Button>
                </basics:TabItem.Header>
            </basics:TabItem>
            <basics:TabItem>
                <basics:TabItem.Header>
                    <Button Content="测试啊测试再测试" Click="Button_Click"></Button>                   
                </basics:TabItem.Header>
                <TextBox x:Name="t"></TextBox>
            </basics:TabItem>
        </basics:TabControl>
    </Grid>
</UserControl>


CS：

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    for (int i = 0; i < t1.Items.Count; i++)
    {
        TabItem tt = ((TabItem)t1.Items[i]);
        if (tt.HasHeader)
        {
            if (tt.Header.Equals(b))
            {
                t1.Items.RemoveAt(i);
            }
        }
    }

}

Answer 6

 

昨天晚上自己参考了IE7，Maxthon浏览网页的方式，当点击某一个tab标签的时候，才显示关闭标签的按钮，这样也基本能实现功能，不过你的更好！自己对你做的例子做了一些修改。

 

Code Snippet

   <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button x:Name="ButtonAddItem" Content="添加新的标签" FontSize="20" Click="ButtonAddItem_Click"></Button>
        <basics:TabControl x:Name="myTabContrl" Grid.Row="1">
            <basics:TabItem>
                <basics:TabItem.Header>
                    <uc:HeaderControlTest HeaderText="tab1"  ButtonIsVisibility="Visible" ButtonTag="tag1">
                    </uc:HeaderControlTest>
                </basics:TabItem.Header>
                <Canvas>
                    <TextBlock>hello tab1</TextBlock>
                </Canvas>
            </basics:TabItem>
            <basics:TabItem>
                <basics:TabItem.Header>
                    <uc:HeaderControlTest HeaderText="tab2" ButtonIsVisibility="Visible" ButtonTag="tag2">
                    </uc:HeaderControlTest>
                    <!--<StackPanel Orientation="Horizontal">
                        <TextBlock>tab2</TextBlock>
                        <Button Content="X" Width="16" Height="16" Padding="0" Tag="tab2" Click="xButton_Click" Visibility="Collapsed"></Button>
                    </StackPanel>-->
                </basics:TabItem.Header>
                <Canvas>
                    <TextBlock>hello tab2</TextBlock>
                </Canvas>
            </basics:TabItem>
            <basics:TabItem>
                <basics:TabItem.Header>
                    <uc:HeaderControlTest HeaderText="tab3" ButtonIsVisibility="Visible" ButtonTag="tag3">
                    </uc:HeaderControlTest>
                </basics:TabItem.Header>
                <Canvas>
                    <TextBlock>hello tab3</TextBlock>
                </Canvas>
            </basics:TabItem>
        </basics:TabControl>
    </Grid>

 

cs文件

Code Snippet

public partial class TabTestControl3 : UserControl
    {
        public TabTestControl3()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(TabTestControl3_Loaded);
        }
        void TabTestControl3_Loaded(object sender, RoutedEventArgs e)
        {
            //throw new NotImplementedException();
            for (int i = 0; i < myTabContrl.Items.Count; i++)
            {
                TabItem tbi = (TabItem)myTabContrl.Items[i];
                HeaderControlTest hct = (HeaderControlTest)tbi.Header;
                hct.xButton.Click += new RoutedEventHandler(xButton_Click);
            }
        }
        private void ButtonAddItem_Click(object sender, RoutedEventArgs e)
        {
            TabItem tbi = new TabItem();
            HeaderControlTest hct = new HeaderControlTest();
            hct.TextBlockHeader.Text = "新的标签" + (myTabContrl.Items.Count + 1).ToString();
            hct.xButton.Click += new RoutedEventHandler(xButton_Click);
            ContentPanelTest cpt = new ContentPanelTest();
            cpt.TextBlockContent.Text = "新的标签的内容" + (myTabContrl.Items.Count + 1).ToString();
            hct.ButtonIsVisibility = Visibility.Visible;
            hct.ButtonTag = "tag" + (myTabContrl.Items.Count + 1).ToString();
            tbi.Header = hct;
            tbi.Content = cpt;   

            myTabContrl.Items.Add(tbi);
        }
        private void xButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            for (int i = 0; i < myTabContrl.Items.Count; i++)
            {
                TabItem tb = (TabItem)myTabContrl.Items[i];
                if (tb.HasHeader)
                {
                    HeaderControlTest hct = (HeaderControlTest)tb.Header;
                    if (hct.xButton.Equals(b))
                    {
                        myTabContrl.Items.RemoveAt(i);
                    }
                }
            }
        }

 

 

做了一个头模板的自定义控件这样可以显示tab标签的标题。

现在还有个问题，就是当动态添加标签过后，标签页会自动累加，逐渐缩小了tab标签content的空间，如何才能像ie或则Maxthon一样，标签只能在一行内增加，如果增加的标签过多时，可以自动缩小标签头宽度，并且可以在标签栏两侧添加，向左，向右两个按钮来实现导航选择呢？

Answer 7

这是昨晚自己做的方式，点击某一个标签时，才显示按钮控件。

Code Snippet

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button x:Name="ButtonAddItem" Content="添加新的标签" FontSize="20" Click="ButtonAddItem_Click"></Button>
        <basics:TabControl x:Name="myTabContrl" Grid.Row="1">
            <basics:TabItem MouseLeftButtonUp="TabItem_MouseLeftButtonUp">
                <basics:TabItem.Header>
                    <uc:HeaderControlTest HeaderText="tab1"  ButtonIsVisibility="Visible">
                    </uc:HeaderControlTest>
                </basics:TabItem.Header>
                <Canvas>
                    <TextBlock>hello tab1</TextBlock>
                </Canvas>
            </basics:TabItem>
            <basics:TabItem MouseLeftButtonUp="TabItem_MouseLeftButtonUp">
                <basics:TabItem.Header>
                    <uc:HeaderControlTest HeaderText="tab2">
                    </uc:HeaderControlTest>
                    <!--<StackPanel Orientation="Horizontal">
                        <TextBlock>tab2</TextBlock>
                        <Button Content="X" Width="16" Height="16" Padding="0" Tag="tab2" Click="xButton_Click" Visibility="Collapsed"></Button>
                    </StackPanel>-->
                </basics:TabItem.Header>
                <Canvas>
                    <TextBlock>hello tab2</TextBlock>
                </Canvas>
            </basics:TabItem>
            <basics:TabItem MouseLeftButtonUp="TabItem_MouseLeftButtonUp">
                <basics:TabItem.Header>
                    <uc:HeaderControlTest HeaderText="tab3">                       
                    </uc:HeaderControlTest>
                </basics:TabItem.Header>
            <Canvas>
                <TextBlock>hello tab3</TextBlock>
            </Canvas>
            </basics:TabItem>
        </basics:TabControl>
    </Grid>

 

cs文件

Code Snippet

public partial class TabTestControl2 : UserControl
    {
        public TabTestControl2()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(TabTestControl2_Loaded);
        }

        void TabTestControl2_Loaded(object sender, RoutedEventArgs e)
        {
            //throw new NotImplementedException();
            for (int i = 0; i < myTabContrl.Items.Count; i++)
            {
                TabItem tbi = (TabItem)myTabContrl.Items[i];
                HeaderControlTest hct = (HeaderControlTest)tbi.Header;
                hct.xButton.Click += new RoutedEventHandler(xButton_Click);
            }
        }

        private void xButton_Click(object sender, RoutedEventArgs e)
        {
            myTabContrl.Items.RemoveAt(myTabContrl.SelectedIndex);
            if (myTabContrl.Items.Count > 0)
            {
                TabItem tbi = (TabItem)myTabContrl.Items[myTabContrl.SelectedIndex];
                HeaderControlTest hctV = (HeaderControlTest)tbi.Header;
                hctV.ButtonIsVisibility = Visibility.Visible;
            }
           
        }

        private void TabItem_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            TabItem tbi = sender as TabItem;           
            if (tbi != null)
            {
                foreach (TabItem tb in myTabContrl.Items)
                {
                    
                    HeaderControlTest hctC = (HeaderControlTest)tb.Header;
                    hctC.ButtonIsVisibility = Visibility.Collapsed;
                }
                HeaderControlTest hctV = (HeaderControlTest)tbi.Header;
                hctV.ButtonIsVisibility = Visibility.Visible;
            }
        }

        private void ButtonAddItem_Click(object sender, RoutedEventArgs e)
        {
            TabItem tbi = new TabItem();
            HeaderControlTest hct = new HeaderControlTest();
            hct.TextBlockHeader.Text = "新的标签" + (myTabContrl.Items.Count + 1).ToString();
            hct.xButton.Click += new RoutedEventHandler(xButton_Click);
            ContentPanelTest cpt = new ContentPanelTest();
            cpt.TextBlockContent.Text = "新的标签的内容" + (myTabContrl.Items.Count + 1).ToString();
            if (myTabContrl.Items.Count == 0)
            {
                hct.ButtonIsVisibility = Visibility.Visible;
            }
            tbi.Header = hct;
            tbi.Content = cpt;
            tbi.MouseLeftButtonUp += new MouseButtonEventHandler(TabItem_MouseLeftButtonUp);
           
            myTabContrl.Items.Add(tbi);
        }