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

时间:2017-04-20 19:20:21

标签: c# wpf xaml

我正在开发一个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>

添加Tab方法,在点击按钮时创建新标签 MainWindow.xaml.cs

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

有一种简单的方法可以关闭按钮吗?

1 个答案:

答案 0 :(得分:8)

回答问题:

  1. 创建标签。

    使用stack panel对齐文本框并水平关闭图像。请查看以下示例。

  2. 点击关闭时删除标签。

    为了关闭标签,在后面的代码中创建一个事件处理程序来处理点击。在此事件处理程序中,您只需使用:

    tabConnections.Items.RemoveAt(tabConnections.SelectedIndex);
    

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

  3. 示例:

    在此示例中,我为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 item绑定到TabControl中的TextBlock

    2. 从关闭按钮图像

    3. 为图像控件提供路径
    4. Content绑定到来自Action Tab item

    5. 的UserControl
    6. 使用堆栈面板作为标题信息并关闭图像并水平对齐。

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

      <强>结果: