如何在动态WPF选项卡控件的选项卡中添加关闭按钮

Question

我有一个WPF选项卡控件。

我正在动态地向该TabControl中添加选项卡。

现在我想在每个选项卡中添加一个关闭按钮。

请告诉我如何在该TabControl中添加关闭按钮。

添加选项卡的代码：

private void AddTab(ITabbedMDI mdiChild)
    {
       if (_mdiChildren.ContainsKey(mdiChild.UniqueTabName))
        {
            //user control is already opened in tab. 
            //So set focus to the tab item where the control hosted
            foreach (object item in tcMdi.Items)
            {
                TabItem ti = (TabItem)item;
                if (ti.Name == mdiChild.UniqueTabName)
                {
                    ucChildLoc = (UserControl)mdiChild;
                    ti.Focus();
                    //tcMdi.Width = this.ucChildLoc.Width;
                    //tcMdi.Height = this.ucChildLoc.Height;
                    break;
                }
            }
        }
   }

关闭选项卡的代码

private void CloseTab(ITabbedMDI tab, EventArgs e)
    {
        TabItem ti = null;
        foreach(TabItem item in tcMdi.Items)
        {
            if (tab.UniqueTabName == ((ITabbedMDI)item.Content).UniqueTabName)
            {
                ti = item;
                break;
            }
        }
        if (ti != null)
        {
            _mdiChildren.Remove(((ITabbedMDI)ti.Content).UniqueTabName);
            tcMdi.Items.Remove(ti);
        }
    }

我正在使用这篇文章中的TabControl

http://www.codeproject.com/Articles/32362/Tabbed-MDI-in-WPF

提前感谢..

- Avinash Singh

---

我发现这个很有用 - http://fabtab.codeplex.com/ - SyntaxGoonoo

Answer 1

我尝试了几种解决方案，但很难找到一个既好看又能在鼠标悬停时突出显示按钮中的“X”的方案。最终我选择了这个方案。它也不需要太多代码。希望它能有所帮助：

<TabControl>
        <TabItem>
            <TabItem.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0">Output</TextBlock>
                    <Button Grid.Column="1" Name="button_close" Click="button_close_Click">
                  <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Path Data="M0,0 L8,8 M8,0 L0,8" StrokeThickness="3" VerticalAlignment="Center" Margin="5,4,0,2">
                                    <Path.Style>
                                        <Style TargetType="{x:Type Path}">
                                            <Style.Triggers>
                                                <Trigger Property="IsMouseOver" Value="False">
                                                    <Setter Property="Stroke" Value="LightGray" />
                                                </Trigger>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="Stroke" Value="Black" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Path.Style>
                                </Path>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>


            </TabItem.Header>
         <TabItem.Content>
         </TabItem.Content>

- carlos357

Answer 2

如果您将选项卡控件作为自定义控件，并继承选项卡控件的功能，然后添加关闭按钮并处理其事件，则它可以正常工作。

    <UserControl x:Class="CloseableHeader"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="23" d:DesignWidth="81" Margin="0">
<Grid>
  <Button Content="X"  Height="19" HorizontalAlignment="Right" Margin="0,3,4,0" 
      Name="button_close" VerticalAlignment="Top" Width="20" FontFamily="Courier" 
      FontWeight="Bold" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
      FontStretch="Normal" Visibility="Visible" 
      FontSize="14" Padding="0" ToolTip="Close"/>
  <Label Content="TabItem"  Height="23" HorizontalAlignment="Left" 
      Margin="4,1,0,0" Name="label_TabTitle" VerticalAlignment="Top" 
      FontFamily="Courier" FontSize="12" />
</Grid>

    class ClosableTab : TabItem
     {
        // Constructor
      public ClosableTab()
      {
         // Create an instance of the usercontrol
         closableTabHeader = new CloseableHeader();
         // Assign the usercontrol to the tab header
         this.Header = closableTabHeader;
       }
    }

请查看本文详细信息：http://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItem，这可能会有所帮助。

- dnxit

Answer 3

TabControl无法提供关闭TabItems的能力。

您可以添加一个“x”按钮，并将其可见性设置为Collapsed / Hidden作为hack。

或者您可以查看由Infragistics或任何其他供应商提供的支持关闭选项卡的XamTabControl等产品。

- Rauld

---

如何在选项卡中添加“X”按钮 - Avinash Singh

<telerik:RadButton Command="{Binding TabCloseCommand}" CommandParameter="{Binding ElementName=TabMain, Path=SelectedItem}" Content="x" /> - Kristina Lex