如何创建WPF用户控件：自定义TabItem？

Question

Thanks in advance for any support! I am trying to create a custom tab item to act as a canvas for dynamically creating UI elements. Here is an image to give an idea as to what I would like in this custom control:

I need to be able to generate the Tab Items dynamically to the TabControl in a parent form - the problem is that my code seems to do nothing to the TabItem - it's just always blank and it doesn't complain about my code. What's missing? Thanks for any help!

My WPF user control tabitem Code:

<UserControl x:Class="Configuration_Manager.SearchTab"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Configuration_Manager"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">

    <TabItem Header="Search Configuration Name">
        <StackPanel>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <GroupBox Header="Git Repo Credentials:">
                    <StackPanel>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="3*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Content="Server Address:" />
                            <TextBox Grid.Column="1" Margin="2" />
                        </Grid>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="3*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Content="Username:" />
                            <TextBox Grid.Column="1" Margin="2" />
                        </Grid>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="3*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Content="Password:" />
                            <TextBox Grid.Column="1" Margin="2" />
                        </Grid>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <CheckBox x:Name="CheckBoxStoreCredentials" Content="Store Credentials" Grid.Column="0" IsChecked="False" VerticalAlignment="Center"/>
                            <Button x:Name="ButtonDownloadConfiguration"  Content="Download Configuration" Grid.Column="2" Margin="5" />
                        </Grid>
                    </StackPanel>
                </GroupBox>
            </Grid>
        </StackPanel>
    </TabItem>
</UserControl>

The Designer:

Answer 1

In WPF if you want to dynamically create controls you always have to use templates. TabControl is an ItemsControl . TabItem elements (the tabs) are automatically generated for each item inside the ItemsControl.ItemsSource collection. The visual of this TabItem can be designed by using styles and templates.
Use the TabControl.ContentTemplate property to specify the DataTemplate for the content of each tab

First you have to create the data model that should be displayed inside a TabItem .

TabData.cs:

public class TabData : INotifyPropertyChanged
{
  public TabData(string header)
  {
    this.Header = header;
  }

  public string Header { get; set; }

  private string serverAddress;
  public string ServerAddress
  {
    get => this.serverAddress;
    set
    {
      if (value == this.serverAddress) return;
      this.serverAddress = value;
      OnPropertyChanged();
    }
  }

  private string username;
  public string Username
  {
    get => this.username;
    set
    {
      if (value == this.username) return;
      this.username = value;
      OnPropertyChanged();
    }
  }

  private string password;
  public string Password
  {
    get => this.password;
    set
    {
      if (value == this.password) return;
      this.password = value;
      OnPropertyChanged();
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;    
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

Then create a view model that handles the tab data and exposes the items source for the TabControl .
The view model is the DataContext of the TabControl .

ViewModel.cs

public class ViewModel: INotifyPropertyChanged
{
  public ViewModel()
  {
    this.TabDatas = new ObservableCollection<TabData>()
    {
      new TabData("First Tab"),
      new TabData("Second Tab"),
      new TabData("Third Tab")
    };
  }

  // Adding a new TabData item to the TabDatas collection 
  // will dynamically create a new TabItem inside the TabControl
  public void AddNewTab()
  {
    this.TabDatas.Add(new TabData("Fourth Tab"));
  }


  public ObservableCollection<TabData> TabDatas { get; set; }

  public event PropertyChangedEventHandler PropertyChanged;    
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

AddNewTab can be invoked from a ICommand (eg on button clicked) or some event (eg new data available).

MainWindow.xaml:

<Window>
  <Window.DataContext>
    <ViewModel />
  </Window.DataContext>

  <Grid>

    <!-- Use DisplayMemberPath property to set the source property for the tab header -->
    <TabControl x:Name="TabControl" 
                ItemsSource="{Binding TabDatas}" 
                DisplayMemberPath="Header" >

      <!-- Use a DataTemplate to design the visual appearance of the TabItem content -->
      <TabControl.ContentTemplate>
        <DataTemplate DataType="TabData">
          <StackPanel>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <GroupBox Header="Git Repo Credentials:">
                <StackPanel>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="3*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0"
                           Content="Server Address:" />
                    <TextBox Grid.Column="1"
                             Margin="2" 
                             Text="{Binding ServerAddress}" />
                  </Grid>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="3*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0"
                           Content="Username:" />
                    <TextBox Grid.Column="1"
                             Margin="2"
                             Text="{Binding Username}"/>
                  </Grid>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="3*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0"
                           Content="Password:" />
                    <TextBox Grid.Column="1"
                             Margin="2"
                             Text="{Binding Password}"/>
                  </Grid>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="2*" />
                      <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <CheckBox x:Name="CheckBoxStoreCredentials"
                              Content="Store Credentials"
                              Grid.Column="0"
                              IsChecked="False"
                              VerticalAlignment="Center" />
                    <Button x:Name="ButtonDownloadConfiguration"
                            Content="Download Configuration"
                            Grid.Column="2"
                            Margin="5" />
                  </Grid>
                </StackPanel>
              </GroupBox>
            </Grid>
          </StackPanel>
        </DataTemplate>
      </TabControl.ContentTemplate>
    </TabControl>
  </Grid>
</Window>