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

How to add Close Button in tab of Dynamic WPF Tab control

提问by Avinash Singh

I have a WPF Tab Control..

我有一个 WPF 选项卡控件..

i am adding tabs in that TabControl dynamically

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

Now i want to give a Close Button in every Tab of Tab Control..

现在我想在选项卡控件的每个选项卡中提供一个关闭按钮..

So please tell me hopw to add Close button in that Tab Control..

所以请告诉我 hopw 在该选项卡控件中添加关闭按钮..

Code for adding tab

添加标签的代码

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

Code for Closing tab

关闭标签的代码

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

I am using TabControl of this article

我正在使用本文的 TabControl

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

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

Thanks in Advance..

提前致谢..

采纳答案by Rauld

TabControl does not provide the ability to close TabItems.

TabControl 不提供关闭 TabItem 的能力。

You could add a 'x' button and set the visibility to Collapsed / Hidden as a hack.

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

OR You could look at XamTabControl by Infragistics or any other vendor product which does support closing of Tabs.

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

回答by dnxit

if you make the tab control as a custom control and inherit the functionality from tab control and then add close button and handle its events then it can work

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

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

see in this article for details http://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItemthis might be helpful

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

回答by carlos357

I have tried several solutions and struggled to find something that looked nice and also highlighted the "X" in the button when the mouse hovers. I finally ended with this one. It also does not require too much code. I hope it helps:

我尝试了几种解决方案，并努力找到一些看起来不错的东西，并且在鼠标悬停时突出显示按钮中的“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>

回答by apb_developer

I also struggled with the same situation. However thishelped me. Hope it can help other too.

我也在同样的情况下挣扎。然而这对我有帮助。希望它也可以帮助其他人。

How to close Tab with a close button in WPF?

如何在 WPF 中使用关闭按钮关闭 Tab？