TabControl WPF 中的 TabControl

Question

我正在尝试使用如下所示的 WPF 创建动态加载垂直选项卡的水平选项卡。我想创建类似的东西，这不是我的应用程序的屏幕截图。

我好像无法在选项卡项内创建选项卡控件。

我的 XAML 文件包含以下代码，我试图在其中添加 TabControl 选项卡的内容：

<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
   <TabControl ItemsSource="{Binding Tabs}">
      <TabControl.ItemTemplate>
         <!-- this is the header template-->
         <DataTemplate>
            <TextBlock Text="{Binding Header}" />
         </DataTemplate>
      </TabControl.ItemTemplate>
      <TabControl.ContentTemplate>
         <!-- this is the body of the TabItem template-->
         <DataTemplate>
            <TabControl ItemsSource="{Binding steps}">
               <TabControl.ItemTemplate>
                  <!-- this is the header template-->
                  <DataTemplate>
                     <TextBlock Text="{Binding Header}" />
                  </DataTemplate>
               </TabControl.ItemTemplate>
               <TabControl.ContentTemplate>
                  <!-- this is the body of the TabItem template-->
                  <DataTemplate>
                     <TextBlock Text="{Binding Content}" />
                  </DataTemplate>
               </TabControl.ContentTemplate>
            </TabControl>

            <TextBlock Text="{Binding Content}" />
         </DataTemplate>
      </TabControl.ContentTemplate>
   </TabControl>
</Grid>

我的 C# 代码包含以下对象：

public ObservableCollection<TabItem> Tabs { get; set; }

public AddElement()
{
   Steps step = new Steps();
   step.display = "1";

   Steps step2 = new Steps();
   step.display = "2";

   ObservableCollection<Steps> stepsList = new ObservableCollection<Steps>();
   stepsList.Add(step);
   stepsList.Add(step2);

   Tabs = new ObservableCollection<TabItem>();
   Tabs.Add(new TabItem { Header = "One", Content = "One's content", Steps = stepsList });
   Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });

}

public sealed class TabItem
{
   public string Header { get; set; }
   public string Content { get; set; }
   public ObservableCollection<Steps> Steps { get; set; }
}

public class Steps
{
   public string display { get; set; }
}

Answer 1

您的代码中存在多个问题，您需要修复这些问题才能使其按预期运行。

Steps属性的绑定有错别字。它必须以大写字母开头。
```
<TabControl ItemsSource="{Binding Steps}">
```

从 XAML 中删除最后一个或将其放在 Grid 中，如下所示。实际上，代码将无法编译，因为您只能将单个元素设置为 DataTemplate.

中的内容

<DataTemplate>
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <TabControl Grid.Row="0" ItemsSource="{Binding steps}">
         <!-- ...other code. -->
      </TabControl>          
      <TextBlock Grid.Row="1" Text="{Binding Content}" />
   </Grid>
</DataTemplate>

您绑定到 XAML 中 Steps 项的 Header 和 Content 属性。这种类型没有任何这些属性，只有 display。您可以引入这些属性并删除 display.
```
public class Steps
{
   public string Header { get; set; }
   public string Content { get; set; }
}
```

在AddElement中你只修改了step实例，而不是step2，所以它是空的。初始化两者，例如具有上述附加属性。

Steps step = new Steps();
step.Header = "Header 1";
step.Content = "Content 1";

Steps step2 = new Steps();
step2.Header = "Header 2";
step2.Content = "Content 2";

如果你想让你的内部 TabControl 的标签条在左侧垂直显示，你必须相应地设置 TabStripPlacement 属性。
```
<TabControl ItemsSource="{Binding Steps}" TabStripPlacement="Left">
```

使用默认的 WPF 样式，结果将如下所示。

TabControl WPF 中的 TabControl

TabControl inside a TabControl WPF

c#

wpf

xaml

binding

tabcontrol