c# - 如何以编程方式将图像添加到 WPF 选项卡控件项

Question

我正在使用以下代码以编程方式毫无问题地创建 TabItems:

var tabItem = new TabItem();
tabItem.Header = "My Tab Header";
tabItem.Content = new UserControl1();
MainTabControl.Items.Add(tabItem); 

现在，当将选项卡项添加到选项卡控件时，我还想在创建右侧对齐的 TabItem 的同时添加图像按钮。我怎样才能做到这一点？提前致谢。

编辑:我已经尝试了很多，但仍然没有想法。以下是我在 xaml 和 ObservableCollection 中的 tabcontrol。当我成功运行项目选项卡时，但我不知道如何在其中添加图像，因为在我的 xaml 选项卡控件中，它没有 TabItems 标记，并且它们在运行项目时自动显示。请查看我的示例代码并转换为我想要的结果。我想结束并关闭这个问题，我真的感谢并感谢帮助。

以下是xaml:

  <TabControl ItemsSource="{Binding TabItems, Mode=TwoWay}" DisplayMemberPath="Content" HorizontalAlignment="Left" Height="73" Margin="10,25,0,0" VerticalAlignment="Top" Width="312"/>

下面是viewmodel

     namespace WpfApplication1.ViewModels
    {
    public class VMTabControl : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyname)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyname));
            }
        [![enter image description here][1]][1]}

        public VMTabControl()
        {
            TabItems = new ObservableCollection<clsTabs>(GetList().ToList());
        }

        private ObservableCollection<clsTabs> _tabItems;
        public ObservableCollection<clsTabs> TabItems
        {
            get { return _tabItems; }
            set
            {
                _tabItems = value;
                OnPropertyChanged("TabItems");
            }
        }

        public List<clsTabs> GetList()
        {
            List<clsTabs> tablist = new List<clsTabs>();
            tablist.Add(new clsTabs { Content = "First", ImgPath = "path" });
            tablist.Add(new clsTabs { Content = "Second", ImgPath = "path" });
            return tablist;
        }

    }
}

Answer 1

在代码中

TabItem.Header 不限于显示字符串 - 您可以在其上设置任何 UI 控件。例如:

tabItem.Header = new Button { Content = "Click me" };

要同时显示文本和关闭按钮，您可以使用包含文本 block 和按钮的水平堆栈面板。

在 XAML 中

但是，UI 布局通常是用 XAML 编写的。以下 XAML 假定您的 View 模型中有一个 Items 属性，它是一个项目集合。这些项目具有 TabHeaderName 和 TabImagePath 属性。 View 模型还应该有一个 RemoveTabCommand 属性，它是一个带有单个参数(要删除的选项卡项)的 ICommand:

<TabControl ItemsSource="{Binding Items}">
    <!-- // If you only need to display a single property, you can use DisplayMemberPath.
         // If you need something more fancy (such as a text-block and button next to each other),
         // you'll have to provide a tab header template instead: -->
    <TabControl.ItemTemplate>
        <DataTemplate>
            <!-- // Tab item header template (this is how each tab header will look): -->
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding TabHeaderName}" />
                <Button Content="X"
                        Command="{Binding DataContext.RemoveTabCommand, RelativeSource={RelativeSource AncestorType=TabControl}}"
                        CommandParameter="{Binding}" />
            </StackPanel>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <!-- // Tab item content template (this is how each tab content will look): -->
            <Image Source="{Binding TabImagePath}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

如果 Items 是一个可观察的集合，只需向其中添加一个项目就会自动为其添加一个选项卡项目。同样，删除项目将删除其选项卡项目。