Template with data binding categories as tab items with nested check boxes-CodePudding

I want to create a WPF-Form that has a TabItem inside a TabControl for each Category inside of Checklist. Inside of each TabItem is a list of CheckBoxes with names for each ChecklistItem.

This is the actual data structure:

public class Checklist
{
    public int ChecklistId { get; set; }
    public IEnumerable<Category> Categories { get; set; }
}

public class Category
{
    public string CategoryName { get; set; }
    public IEnumerable<ChecklistItem> ChecklistItems { get; set; }
}

public class ChecklistItem
{
    public int ItemId { get; set; }
    public string ItemName { get; set; }
    public bool ItemChecked { get; set; }
}

How do I create the XAML for this?

CodePudding user response：

You can use an ItemContainerStyle to set the tab header to CategoryName and a data template as ContentTemplate for the tab content. The content template uses an ItemsControl to display the list of ChecklistItem using another data template containg a CheckBox that binds the properties.

<TabControl ItemsSource="{Binding Checklist.Categories}">
   <TabControl.ItemContainerStyle>
      <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
         <Setter Property="Header" Value="{Binding CategoryName}"/>
      </Style>
   </TabControl.ItemContainerStyle>
   <TabControl.ContentTemplate>
      <DataTemplate DataType="{x:Type local:Category}">
         <ItemsControl ItemsSource="{Binding ChecklistItems}">
            <ItemsControl.ItemTemplate>
               <DataTemplate DataType="{x:Type local:ChecklistItem}">
                  <CheckBox Content="{Binding ItemName}" IsChecked="{Binding ItemChecked}"/>
               </DataTemplate>
            </ItemsControl.ItemTemplate>
         </ItemsControl>
      </DataTemplate>
   </TabControl.ContentTemplate>
</TabControl>