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 样式的结果将如下所示。