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

Question

我正在开发一个WPF应用程序,它会在单击按钮时创建新选项卡.这工作正常.我很难弄清楚如何设置关闭按钮,比如Tab标题旁边的X并关闭所选标签？

MainWindow.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>

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

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

有一个简单的方法来关闭按钮吗？

Answer 1

回答问题:

1. 创建标签.

   使用堆栈面板对齐文本框并水平关闭图像.请查看以下示例.

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

   对于关闭选项卡,在后面的代码中创建一个事件处理程序来处理单击.在此事件处理程序中,您只需使用:

   tabConnections.Items.RemoveAt(tabConnections.SelectedIndex);
   

   为什么我使用所选索引？这是因为单击选项卡时,选项卡将成为选定选项卡.click事件处理程序之后可以删除索引等于所选索引的选项卡.

例:

在此示例中,我为TabControl创建动态内容.使用您自己的UserControls作为内容.此外,此示例将在选项卡中提供结束图像.所以首先创建一个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 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() });
    }
}

现在我们需要创建xaml whits将选项卡项绑定到上面的viewmodel.

1. Header从Action Tab itemTabControl中绑定到TextBlock

2. 从关闭按钮图像给图像控件一个路径

3. Content从中绑定到UserControlAction 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>

在后面的代码中

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

结果: