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

Question

预先感谢您的支持！我正在尝试创建一个自定义选项卡项来充当动态创建 UI 元素的画布。这是一张图片，让您了解我想要在此自定义控件中实现的功能：我需要能够在父窗体中动态生成选项卡项到 TabControl - 问题是我的代码似乎对 TabItem 没有任何作用 - 它总是空白，并且不会抱怨我的代码。少了什么东西？谢谢你的帮助！我的 WPF 用户控件 tabitem 代码：<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>设计师：

Answer 1

在 WPF 中，如果您想动态创建控件，则始终必须使用模板。TabControl是一个ItemsControl. TabItem元素（选项卡）是为ItemsControl.ItemsSource 集合内的每个项目自动生成的。TabItem可以使用样式和模板来设计其视觉效果。

使用TabControl.ContentTemplate属性指定DataTemplate每个选项卡的内容

首先，您必须创建应在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));

  }

}

然后创建一个视图模型来处理选项卡数据并公开TabControl.

视图模型是DataContext的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可以从ICommand（例如单击按钮时）或某些事件（例如可用的新数据）调用。

主窗口.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>