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

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

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

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

2 个答案: