none
WPF Tabcontrol 添加关闭按钮 RRS feed

  • 问题

  • 我想要做像Visual Studio那样子的标签效果,每个Tabitem都有 "×" 关闭按钮,单击它就可以关闭当前TabItem。请问怎么做?

    谢谢

    2018年12月30日 7:35

答案

  • 修改TabControl.ItemTemplate的内容即可


      <Window.Resources>
            <DataTemplate x:Key="D1">
                <Grid>
                    <TextBlock Text="{Binding Text}"/>
                    <Grid Height="20"  Width="20" Background="Transparent" Tag="{Binding Text}" MouseLeftButtonUp="Grid_MouseLeftButtonUp" Margin="70,0,0,0">
                        <Path   Data="M307,28.093333 L52.333333,250.76" Fill="Red" Stretch="Fill"   Stroke="#FFEA1717" HorizontalAlignment="Right" />
                        <Path   Data="M56.666667,53 L352,265.66667" Fill="Red"  Stretch="Fill"   Stroke="#FFEA1717" HorizontalAlignment="Right" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </Window.Resources>
        <Grid>
            <TabControl x:Name="TC" ItemTemplate="{StaticResource D1}"/>
        </Grid>
     List<DataText> texts;
            public MainWindow()
            {
                InitializeComponent();
               texts = new List<DataText>();
    
                for (var i = 0; i < 10; i++)
                    texts.Add(new DataText { Text =i.ToString() });
    
                TC.ItemsSource = texts;
                
               
            }
    
            private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                var index = Convert.ToInt32(((Grid)sender).Tag);
    
                texts.Remove(texts.Find(x=>x.Text==index.ToString()));
              
                TC.Items.Refresh();
               
            }


    • 已编辑 ARM830 2018年12月31日 4:03
    • 已标记为答案 Aileen--1024 2019年1月5日 11:22
    2018年12月30日 16:37
  • Hi Aileen,

    除了ARM830所说的修改TabControl的模板以外, 你也可以自定义一个控件UserControl,里面有一个Label,显示标题,一个Button,关闭当前的TabItem。

    创建一个名为ClosableTab的新类,它继承自TabItem,在这里,我们将创建一个我们在上面创建的新UserControl 的新实例。 然后,我们将其分配给选项卡标题,如下所示。 这意味着当显示TabItem时,它将在标题上显示我们的新UserControl。 这正是我们需要的,因为它将显示标签和我们的关闭按钮。

    相关的详细信息,请参考一下:

    https://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItem

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2018年12月31日 4:46
    版主

全部回复

  • 修改TabControl.ItemTemplate的内容即可


      <Window.Resources>
            <DataTemplate x:Key="D1">
                <Grid>
                    <TextBlock Text="{Binding Text}"/>
                    <Grid Height="20"  Width="20" Background="Transparent" Tag="{Binding Text}" MouseLeftButtonUp="Grid_MouseLeftButtonUp" Margin="70,0,0,0">
                        <Path   Data="M307,28.093333 L52.333333,250.76" Fill="Red" Stretch="Fill"   Stroke="#FFEA1717" HorizontalAlignment="Right" />
                        <Path   Data="M56.666667,53 L352,265.66667" Fill="Red"  Stretch="Fill"   Stroke="#FFEA1717" HorizontalAlignment="Right" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </Window.Resources>
        <Grid>
            <TabControl x:Name="TC" ItemTemplate="{StaticResource D1}"/>
        </Grid>
     List<DataText> texts;
            public MainWindow()
            {
                InitializeComponent();
               texts = new List<DataText>();
    
                for (var i = 0; i < 10; i++)
                    texts.Add(new DataText { Text =i.ToString() });
    
                TC.ItemsSource = texts;
                
               
            }
    
            private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                var index = Convert.ToInt32(((Grid)sender).Tag);
    
                texts.Remove(texts.Find(x=>x.Text==index.ToString()));
              
                TC.Items.Refresh();
               
            }


    • 已编辑 ARM830 2018年12月31日 4:03
    • 已标记为答案 Aileen--1024 2019年1月5日 11:22
    2018年12月30日 16:37
  • Hi Aileen,

    除了ARM830所说的修改TabControl的模板以外, 你也可以自定义一个控件UserControl,里面有一个Label,显示标题,一个Button,关闭当前的TabItem。

    创建一个名为ClosableTab的新类,它继承自TabItem,在这里,我们将创建一个我们在上面创建的新UserControl 的新实例。 然后,我们将其分配给选项卡标题,如下所示。 这意味着当显示TabItem时,它将在标题上显示我们的新UserControl。 这正是我们需要的,因为它将显示标签和我们的关闭按钮。

    相关的详细信息,请参考一下:

    https://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItem

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2018年12月31日 4:46
    版主