Add/Remove Tabs with User Control Dynamically in WPF - Binding Tab Name

Question

I would to create application with TabControl.

I would to put UserControls on Tabs, but I wouldn't create this in *.cs file, but using binding.

I have application where I can add tab with usercontrol, but i don't know how bind String with tab name.

My code:

MainWindow.xaml.cs

using System.Windows;

namespace WpfApp3
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

MainWindow.xaml

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TabControl ItemsSource="{Binding UserControls}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="???" /> <!--binding? -->
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
        <Button Grid.Row="1" Content="Dodaj zakładkę" Command="{Binding AddButtonCommand}"/>

    </Grid>
</Window>

MainWindowViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfApp3
{
    class MainWindowViewModel : BindableBase
    {
        public ObservableCollection<UserControl> UserControls { get; set; }
        public ICommand AddButtonCommand { get; set; }

        public MainWindowViewModel()
        {
            AddButtonCommand = new DelegateCommand(ClickButton);
            UserControls = new ObservableCollection<UserControl>();           
        }

        private void ClickButton()
        {
            UserControls.Add(new UCTest());
            RaisePropertyChanged("UserControls");
        }
    }
}

I tried add constructor UserControl with parameter with name, but i don't know how join it with binding.

My second thing is create class with UserControl and String (with tab name), but i couldnt bind field with UserControl to Widdow.

Thanks, regards.

Possible duplicate of [WPF Databinding TabItem Headers](https://stackoverflow.com/questions/7164889/wpf-databinding-tabitem-headers) — LittleBit, Apr 25 '18 at 13:57
This Question may be answered here https://stackoverflow.com/a/5651542/9669202 — LittleBit, Apr 25 '18 at 13:59
You could add a string property inside UCTest and bind that to the textbox. — Shivani Katukota, Apr 26 '18 at 07:27

score 0 · Answer 1 · answered Apr 26 '18 at 15:04

You shouldn't add UserControls or any other UI elements to the ObservableCollection in the view model. Instead you should define your own model type and add instances of this one to the source collection.

You could then bind to any property of this class:

class Model
{
    public string Header { get; set; }
}

class MainViewModel : BindableBase
{
    public ObservableCollection<Model> UserControls { get; set; }
    public ICommand AddButtonCommand { get; set; }

    public Window13ViewModel()
    {
        AddButtonCommand = new DelegateCommand(ClickButton);
        UserControls = new ObservableCollection<Model>();
    }

    private void ClickButton()
    {
        UserControls.Add(new Model() { Header = "some name..." });
    }
}

XAML:

<TabControl ItemsSource="{Binding UserControls}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <local:UCTest />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Add/Remove Tabs with User Control Dynamically in WPF - Binding Tab Name

1 Answers1

Linked