TabControl WPF中的TabControl

Caren 发表于 Dev

卡伦

我正在尝试创建水平标签，这些标签使用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; }
}

那个家伙

您的代码中存在多个问题，需要对其进行修复以使其按预期工作。

该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中的项目Header并Content具有属性Steps。此类型仅不具有这些属性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";