如何创建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{&nbsp; public TabData(string header)&nbsp; {&nbsp; &nbsp; this.Header = header;&nbsp; }&nbsp; public string Header { get; set; }&nbsp; private string serverAddress;&nbsp; public string ServerAddress&nbsp; {&nbsp; &nbsp; get => this.serverAddress;&nbsp; &nbsp; set&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; if (value == this.serverAddress) return;&nbsp; &nbsp; &nbsp; this.serverAddress = value;&nbsp; &nbsp; &nbsp; OnPropertyChanged();&nbsp; &nbsp; }&nbsp; }&nbsp; private string username;&nbsp; public string Username&nbsp; {&nbsp; &nbsp; get => this.username;&nbsp; &nbsp; set&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; if (value == this.username) return;&nbsp; &nbsp; &nbsp; this.username = value;&nbsp; &nbsp; &nbsp; OnPropertyChanged();&nbsp; &nbsp; }&nbsp; }&nbsp; private string password;&nbsp; public string Password&nbsp; {&nbsp; &nbsp; get => this.password;&nbsp; &nbsp; set&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; if (value == this.password) return;&nbsp; &nbsp; &nbsp; this.password = value;&nbsp; &nbsp; &nbsp; OnPropertyChanged();&nbsp; &nbsp; }&nbsp; }&nbsp; public event PropertyChangedEventHandler PropertyChanged;&nbsp; &nbsp;&nbsp;&nbsp; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)&nbsp; {&nbsp; &nbsp; this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));&nbsp; }}然后创建一个视图模型来处理选项卡数据并公开TabControl.视图模型是DataContext的TabControl。ViewModel.cspublic class ViewModel: INotifyPropertyChanged{&nbsp; public ViewModel()&nbsp; {&nbsp; &nbsp; this.TabDatas = new ObservableCollection<TabData>()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; new TabData("First Tab"),&nbsp; &nbsp; &nbsp; new TabData("Second Tab"),&nbsp; &nbsp; &nbsp; new TabData("Third Tab")&nbsp; &nbsp; };&nbsp; }&nbsp; // Adding a new TabData item to the TabDatas collection&nbsp;&nbsp; // will dynamically create a new TabItem inside the TabControl&nbsp; public void AddNewTab()&nbsp; {&nbsp; &nbsp; this.TabDatas.Add(new TabData("Fourth Tab"));&nbsp; }&nbsp; public ObservableCollection<TabData> TabDatas { get; set; }&nbsp; public event PropertyChangedEventHandler PropertyChanged;&nbsp; &nbsp;&nbsp;&nbsp; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)&nbsp; {&nbsp; &nbsp; this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));&nbsp; }}AddNewTab可以从ICommand（例如单击按钮时）或某些事件（例如可用的新数据）调用。主窗口.xaml：<Window>&nbsp; <Window.DataContext>&nbsp; &nbsp; <ViewModel />&nbsp; </Window.DataContext>&nbsp; <Grid>&nbsp; &nbsp; <!-- Use DisplayMemberPath property to set the source property for the tab header -->&nbsp; &nbsp; <TabControl x:Name="TabControl"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ItemsSource="{Binding TabDatas}"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DisplayMemberPath="Header" >&nbsp; &nbsp; &nbsp; <!-- Use a DataTemplate to design the visual appearance of the TabItem content -->&nbsp; &nbsp; &nbsp; <TabControl.ContentTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate DataType="TabData">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackPanel>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <GroupBox Header="Git Repo Credentials:">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackPanel>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="3*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Grid.Column="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Content="Server Address:" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextBox Grid.Column="1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Margin="2"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text="{Binding ServerAddress}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="3*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Grid.Column="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Content="Username:" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextBox Grid.Column="1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Margin="2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text="{Binding Username}"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="3*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Grid.Column="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Content="Password:" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextBox Grid.Column="1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Margin="2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text="{Binding Password}"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="2*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CheckBox x:Name="CheckBoxStoreCredentials"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Content="Store Credentials"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Grid.Column="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IsChecked="False"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; VerticalAlignment="Center" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button x:Name="ButtonDownloadConfiguration"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Content="Download Configuration"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Grid.Column="2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Margin="5" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackPanel>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </GroupBox>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackPanel>&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; </TabControl.ContentTemplate>&nbsp; &nbsp; </TabControl>&nbsp; </Grid></Window>