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

How to close Tab with a close button in WPF?

提问by Truecolor

I am working on a WPF app where it creates new tab upon clicking a button. That is working fine. I am having hard time in figuring out how to have a close button, like a Xnext to the Tab header and close the selected tab?

我正在开发一个 WPF 应用程序，它在单击按钮时创建新选项卡。那工作正常。我很难弄清楚如何有一个关闭按钮，比如选项卡标题旁边的X并关闭所选选项卡？

MainWindow.xaml

主窗口.xaml

<Grid>
        <StackPanel Name="listConnections" Grid.Column="0" Background="#4682b4" Margin="0,0,0,-0.2" >
        </StackPanel>            
        <TabControl Name="tabConnections" Grid.Column="1" TabStripPlacement="Top" Margin="0,0,0.4,-0.2">
        </TabControl>
    </Grid>
</Window>

add Tab method to create new tabs upon button click MainWindow.xaml.cs

添加 Tab 方法以在按钮单击时创建新选项卡MainWindow.xaml.cs

public void addTab(Connection connection)
{
    TabItem tab = new TabItem();
    tab.Header = connection.name;
    tabConnections.Items.Add(tab);
}

Is there a simple way to do the close button?

有没有简单的方法来做关闭按钮？

回答by Timon Post

Answer to question:

回答问题：

1. Create tab.

   Use a stack panelfor aligning the text box and close image horizontally. Check the example below.

2. Remove tab when clicking on close.

   For closing a tab create an event handler in the code behind for handling the click. In this event handler you can simply use:

   tabConnections.Items.RemoveAt(tabConnections.SelectedIndex);
   

   Why do I use the selected index? This is because when you click the tab the tab becomes the selected one. where after the click event handler could remove the tab with the index that is equal to the selected index.

1. 创建选项卡。

   使用堆栈面板对齐文本框并水平关闭图像。检查下面的示例。

2. 单击关闭时删除选项卡。

   要关闭选项卡，请在后面的代码中创建一个事件处理程序来处理点击。在此事件处理程序中，您可以简单地使用：

   tabConnections.Items.RemoveAt(tabConnections.SelectedIndex);
   

   为什么我使用选定的索引？这是因为当您单击选项卡时，该选项卡将成为选定的选项卡。单击事件处理程序可以删除索引等于所选索引的选项卡。

Example:

例子：

In this example, I create dynamic content for the TabControl. By using your own UserControls as content. Also, this example will provide a closing image in the tab. So first create a Tab class and the view modal behind it.

在本例中，我为 TabControl 创建了动态内容。通过使用您自己的用户控件作为内容。此外，此示例将在选项卡中提供关闭图像。所以首先创建一个 Tab 类和它后面的视图模式。

The tab

选项卡

// This class will be the Tab int the TabControl
public class ActionTabItem
{
    // This will be the text in the tab control
    public string Header { get; set; }
    // This will be the content of the tab control It is a UserControl whits you need to create manualy
    public UserControl Content { get; set; }
}

View modal

查看模态

/// view model for the TabControl To bind on
public class ActionTabViewModal
{
    // These Are the tabs that will be bound to the TabControl 
    public ObservableCollection<ActionTabItem> Tabs { get; set; }

    public ActionTabViewModal()
    {
        Tabs = new ObservableCollection<ActionTabItem>();
    }

    public void Populate()
    {
        // Add A tab to TabControl With a specific header and Content(UserControl)
        Tabs.Add(new ActionTabItem { Header = "UserControl 1", Content = new TestUserControl() });
        // Add A tab to TabControl With a specific header and Content(UserControl)
        Tabs.Add(new ActionTabItem { Header = "UserControl 2", Content = new TestUserControl() });
    }
}

Now we need to create the xaml whits binds the tab item to the viewmodel above.

现在我们需要创建 xaml whits 将选项卡项绑定到上面的视图模型。

1. Bind The Headerfrom the Action Tab itemto a TextBlock in the TabControl

2. Give the image control a path from the close button image

3. Bind the Contentto the UserControl from the Action Tab item

4. Use A stack panel for the Header Info and close image and align it horizontally.

1. 绑定Header来自Action Tab item于TabControl的一个TextBlock

2. 为图像控件提供关闭按钮图像的路径

3. 绑定Content到 UserControl 从Action Tab item

4. 使用堆栈面板作为标题信息并关闭图像并将其水平对齐。

    <Grid>
        <TabControl x:Name="actionTabs" DockPanel.Dock="Right" Background="White">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="21" Width="100">
                        <TextBlock Width="80" Text="{Binding Header}"/>
                        <Image Source="PathToFile\close.png" Width="20" Height="20" MouseDown="Image_MouseDown"/>
                    </StackPanel>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <UserControl Height="800" Width="1220" Content="{Binding Content}" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>

In the code behind

在后面的代码中

public partial class Window1 : Window
{
    private ActionTabViewModal vmd;

    public Window1()
    {
        InitializeComponent();
        // Initialize viewModel
        vmd  = new ActionTabViewModal();
        // Bind the xaml TabControl to view model tabs
        actionTabs.ItemsSource = vmd.Tabs;
        // Populate the view model tabs
        vmd.Populate();
    }

    private void Image_MouseDown(object sender, MouseButtonEventArgs e)
    { 
        // This event will be thrown when on a close image clicked
        vmd.Tabs.RemoveAt(actionTabs.SelectedIndex);
    }
}

Result:

结果：