none
TabControl的疑惑 RRS feed

  • 问题

  •  

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

答案

  • 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);
                }
            }
        }

    }

    2008年10月21日 1:15
    版主

全部回复

  •  

    虽然我没有进行试验,通常,可以通过button_click事件的sender 得到button对象,然后可以找Parent对象等方法进行
    2008年10月20日 12:08
    版主
  • 发帖子的时候正好在试parent,向上parent了八层也没找到TabItem。哪如果知道了TabItem的header的值,可以remove掉么?
    2008年10月20日 12:24
  • 明天我做个例子实验一下

     

    2008年10月20日 13:03
    版主
  • 嘿嘿,非常感谢啊!麻烦了!
    2008年10月20日 13:09
  • 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);
                }
            }
        }

    }

    2008年10月21日 1:15
    版主
  •  

    昨天晚上自己参考了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一样,标签只能在一行内增加,如果增加的标签过多时,可以自动缩小标签头宽度,并且可以在标签栏两侧添加,向左,向右两个按钮来实现导航选择呢?

    2008年10月21日 5:56
  • 这是昨晚自己做的方式,点击某一个标签时,才显示按钮控件。

    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);
            }

     

     

    2008年10月21日 6:00