CODEWITHSUNDEEP
c#wpf
Rauf Abid
Rauf Abid

Reputation: 325

How to Programatically Add Images to WPF Tab Control Item

I am creating TabItems programmatically without any issue by using the following code:

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

Now when a tab item added to tab control i also want to add image button at the same time with the creation of TabItem aligned at right side. How can i achieve this? thanks in advance.

EDIT: I have tried a lot and still did not get an idea. following is my tabcontrol in xaml and ObservableCollection. When i run project tabs shows successfully but i don't know how to add images in it because in my tab control in xaml, it does not have TabItems markup and they are displaying automatically when running project. Please view my sample code and transform into my desired result. I wana conclude and close this issue, I Really thanks and appreciate help.

Following is xaml:

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

Following is 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;
        }

    }
}

Upvotes: 2

Views: 3468

Answers (2)

Pieter Witvoet
Pieter Witvoet

Reputation: 2833

In code

TabItem.Header is not limited to displaying strings - you can set any UI control on it. For example:

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

To display both text and a close button, you could use a horizontal stack panel that contains a text block and a button.

In XAML

However, UI layouts are most often written in XAML. The following XAML assumes you have an Items property in your view model, which is a collection of items. These items have a TabHeaderName and TabImagePath property. The view model should also have a RemoveTabCommand property, which is an ICommand that takes a single argument (the tab item to be removed):

<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>

If Items is an observable collection, simply adding an item to it will automatically add a tab item for it. Likewise, removing an item will remove its tab item.

Upvotes: 1

lerner1225
lerner1225

Reputation: 902

Try this:

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

Upvotes: 0

Related Questions