Question

this is my code to dynamically add tabitem to tabcontrol:

TabItem newTab = new TabItem();
newTab.Header = ncn.courseName;
newTab.FontSize = 20;
TextBox textbox = new TextBox();
textbox.HorizontalAlignment = HorizontalAlignment.Stretch;
textbox.VerticalAlignment = VerticalAlignment.Stretch;
textbox.FontSize = 12;
textbox.AcceptsReturn = true;
newTab.Content = textbox;
this.Courses.Items.Add(newTab);
this.Courses.SelectedItem = newTab;

I think there might be better way to do this (ie, define the UI in xaml). I’m new to WPF and couldn’t figure out how the template thing works. So please help me!

NOTE: the tabcontrol is empty at the beginning (showing nothing, no tabitem, no textbox)! I want to add new tab only when I click the “add” button.

---

Someone helped me and figured it out.

Answer 1

The first thing is: It is in 99% of all cases the best and possible to write you UI in XAML.

Second you should inform yourself, whats the WPF indicates and how to use the MVVM. If you don’t you should stay by Windows Forms!

So now:

You ViewModel:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using PB.Base;

namespace DynTabItems
{
    public class MainWindowViewModel
    {
        public MainWindowViewModel()
        {
            AddItemCommand = new DelegateCommand(AddItem, CanAddItem);
            RemoveItemCommand = new DelegateCommand(RemoveItem, CanRemoveItem);
        }

        public DelegateCommand AddItemCommand { private set; get; }
        public DelegateCommand RemoveItemCommand { private set; get; }

        ObservableCollection<MyModel> _yourBehaviorClass = new ObservableCollection<MyModel>();
        MyModel _selectetItem;

        public MyModel SelectetItem
        {
            get { return _selectetItem; }
            set { _selectetItem = value; }
        }

        public ObservableCollection<MyModel> YourBehaviorClass
        {
            get { return _yourBehaviorClass; }
            set { _yourBehaviorClass = value; }
        }

        private void AddItem(object obj)
        {
            YourBehaviorClass.Add(new MyModel());
        }

        private bool CanRemoveItem(object obj)
        {
            return SelectetItem != null;
        }

        private bool CanAddItem(object obj)
        {
            return true;
        }

        private void RemoveItem(object obj)
        {
            YourBehaviorClass.Remove(SelectetItem);
        }
    }
}

And now your XAML Code:

<Window x:Class="DynTabItems.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <Button Content="Add" Command="{Binding AddItemCommand}"/>
        <Button Content="Remove" Command="{Binding RemoveItemCommand}"/>
        <TabControl ItemsSource="{Binding YourBehaviorClass}" SelectedItem="{Binding SelectetItem}">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Header" Value="{Binding YourHeader, UpdateSourceTrigger=PropertyChanged}"/>
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel>
                                <TextBox Text="{Binding YourText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}">
                                    <ToolTipService.ToolTip>
                                        <TextBlock Text="{Binding Error}"/>
                                    </ToolTipService.ToolTip>
                                </TextBox>
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.ItemContainerStyle> 
        </TabControl>
    </StackPanel>
</Window>

And last but not least MyModel:

using PB.Base;
using PB.Interfaces;
using PB.ValidationError;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DynTabItems
{
    public class MyModel : ViewModelBaseEx<MyModel>
    {
        public MyModel()
        {
            YourHeader = "You header String";
            ListOfExistingErrors = new ObservableCollection<IValidationErrorInfo<MyModel>>();
            ListOfExistingErrors.Add(new Error<MyModel>() { ErrorIndicator = "YourText", ErrorText = "Your Error Text", Predicate = s => string.IsNullOrEmpty(s.YourText) });
        }

        string _yourText;
        string _yourHeader;

        public string YourHeader
        {
            get { return _yourHeader; }
            set
            { 
                _yourHeader = value;
                SendPropertyChanged(() => YourHeader);
            }
        }

        public string YourText
        {
            get { return _yourText; }
            set 
            { 
                _yourText = value;
                SendPropertyChanged(() => YourText);
            }
        }

        public override ObservableCollection<IValidationErrorInfo<MyModel>> ListOfExistingErrors
        {
            get;
            set;
        }
    }
}

If you need the example Project contact me.