如何以编程方式将图像添加到 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"/>

下面是视图模型

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

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

在 XAML 中

但是，UI 布局最常使用 XAML 编写。以下 XAML 假定您的视图模型中有一个 Items 属性，该属性是项的集合。这些项目具有TabHeaderName 和TabImagePath 属性。视图模型还应该有一个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 是一个可观察的集合，只需向其中添加一个项目就会自动为其添加一个选项卡项目。同样，删除一个项目将删除其选项卡项目。

Answer 2

试试这个：

    var tabItem = new TabItem();
    var stack = new StackPanel();
    var t = new TextBlock();
    t.Text = "My Tab Header";
    var i = new Image();
    //i.Source = ...
    stack.Children.Add(t);
    stack.Children.Add(i);
    tabItem.Header = stack;
    tabItem.Content = new StackPanel();
    tab.Items.Add(tabItem);