如何在WPF中用关闭按钮关闭Tab？
如何在WPF中用关闭按钮关闭Tab？
提问于 2017-04-20 19:20:20
我正在工作的WPF应用程序，在那里，它创建新的选项卡时，点击一个按钮。效果很好。我很难弄清楚如何拥有一个关闭按钮，比如标签头旁边的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);
}有一个简单的方法来完成关闭按钮吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-20 19:55:08
对问题的回答：
- 创建选项卡。 使用堆叠板对齐文本框并水平关闭图像。请查看下面的示例。
- 单击“关闭”时移除选项卡。 若要关闭选项卡，请在后面的代码中创建事件处理程序，以处理单击。在此事件处理程序中，只需使用： tabConnections.Items.RemoveAt(tabConnections.SelectedIndex)； 为什么要使用所选的索引？这是因为当您单击该选项卡时，该选项卡将成为选定的选项卡。在单击事件处理程序之后，可以删除包含与所选索引相等的索引的选项卡。
示例：
在本例中，我为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将选项卡项绑定到上面的视图模型。
- 将
Header从Action Tab item绑定到TabControl中的TextBlock - 给图像控件一个从关闭按钮图像的路径。
- 将
Content绑定到来自Action Tab item的UserControl - 对标题信息使用堆栈面板并关闭图像并水平对齐。
<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);
}
}结果：
Stack Overflow用户
发布于 2021-12-26 05:20:18
这对我来说很管用
- 创建用户控件
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="2" Content="X" Height="19" OnClick="button_close_Click" HorizontalAlignment="Right" Margin="0,3,4,0"
VerticalAlignment="Top" Width="20" FontFamily="Courier"
FontWeight="Bold"
FontStretch="Normal"
FontSize="14" Background="IndianRed"/>
<Label Grid.ColumnSpan="2" Height="23" HorizontalAlignment="Left"
Margin="4,1,0,0" VerticalAlignment="Top"
FontFamily="Courier" FontSize="12" x:Name="NameLabel"/>
</Grid>2.用户控件类
public partial class CloseHeader : UserControl
{
MainWindow _shell;
int _index;
public CloseHeader(MainWindow shell, int index, string headerName)
{
InitializeComponent();
_shell = shell;
_index = index;
NameLabel.Content = headerName;
}
private void button_close_Click(object sender, System.Windows.RoutedEventArgs e)
{
_shell.CloseTab(_index);
}
}- 在主窗口
List<int> _tabs = new List<int>();
public void AddNewTab(HomeFunctions function)//HomeFunctions is an enum
{
int newIndex = tabControl.Items.Count;
_tabs.Add(newIndex);
switch (function)
{
case HomeFunctions.Settings:
tabControl.Items.Add(new TabItem { Content = new SettingsControl(this), Width = 100, Header = new CloseHeader(this, newIndex, HomeFunctions.Settings.ToString()) });
break;
}
tabControl.SelectedIndex = newIndex;
}
public void CloseTab(int tabId)
{
tabControl.Items.RemoveAt(_tabs.IndexOf(tabId));//tabControl.Items.RemoveAt(_tabs.IndexOf(tabId) + 1); if you have a non closeable tab first like i do in mine
_tabs.Remove(tabId);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43528152
复制相关文章
相似问题
腾讯云开发者
