How to add controls inside WPF TabControl via XAML

Question

I have the following XAML , a TabControl which binds to an ObservableCollection and creates my tabs just fine.

<Window x:Class="BA_Auditing.AuditWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BizeAsset - Audit Results" Height="700" Width="1120" WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <Grid>
        <TabControl Name="ModuleTabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" ItemsSource="{Binding}" >
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock>                            
                        <TextBlock Text="{Binding DISPLAY_NAME}"/>
                    </TextBlock>
                </DataTemplate>
            </TabControl.ItemTemplate>

            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="Search:" HorizontalAlignment="Right"/>
                            <TextBox x:Name="tbxSearch" Grid.Column="1"/>
                        </Grid>
                        <TextBlock Grid.Row="2" Text="Items Selected: 0 of 908" />
                    </Grid>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

Next I'd like to populate each tab area with the next level of controls, which will include a Label , TextBox another TabControl and a TextBlock .

I previously wrote this in WinForms and this is what it looks like:

What XAML do I need add to do this?
That is because I am designing it dynamically via binding rather than literally adding a TabItem

[EDIT]
I have tried to enter controls into the TabControl.ContentTemplate however nothing displays in the body of the TabItem.

Answer 1

I think if you had "clicked" on the "WW - Wastewater" tab you would have seen something being generated (the Search box, etc) - that's because the tab wasn't selected by default.

Anyway, here is a bit of code which gets you a bit closer to what you want - it's just to get you started, you'll need to add the other plumbing code (change notification, etc).

I don't know what you intend to have in the "Services" tab, etc...so don't know if you can handle them all in the same way ie as "Assets". Also you might want to explicitly define the names of the grid columns rather than have them auto-generated - there are some techniques elsewhere you can find to do that.

<Window x:Class="WpfApp38.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp38"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl Name="ModuleTabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" ItemsSource="{Binding}" SelectedIndex="0" >
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock>                            
                        <TextBlock Text="{Binding DISPLAY_NAME}"/>
                    </TextBlock>
                </DataTemplate>
            </TabControl.ItemTemplate>

            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                            <Grid Grid.Row="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="Search:" HorizontalAlignment="Right"/>
                                <TextBox x:Name="tbxSearch" Grid.Column="1"/>
                            </Grid>
                        <TabControl Grid.Row="1" ItemsSource="{Binding SubCategories}">
                            <TabControl.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding DISPLAY_NAME}"/>
                                </DataTemplate>
                            </TabControl.ItemTemplate>
                            <TabControl.ContentTemplate>
                                <ItemContainerTemplate>
                                    <DataGrid AutoGenerateColumns="True" ItemsSource="{Binding Assets}">
                                    </DataGrid>
                                </ItemContainerTemplate>
                            </TabControl.ContentTemplate>
                        </TabControl>
                        <TextBlock Grid.Row="2" Text="Items Selected: 0 of 908" />
                    </Grid>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp38
{
    public class InfrastructureCateogry
    {
        public string DISPLAY_NAME { get; set; }

        public ObservableCollection<AssetCategory> SubCategories { get; set; }
    }

    public class AssetCategory
    {
        public string DISPLAY_NAME { get; set; }

        public ObservableCollection<AssetRecord> Assets { get; set; }
    }

    public class AssetRecord
    {
        public string AssetID { get; set; } // make it an int
        public string AssetType { get; set; }
        public string LastUpdateBy { get; set; } // make this a DateTime object
        public string LastUpdateDate { get; set; } // make this a DateTime object
    }

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<InfrastructureCateogry> infrastructurecategories = new ObservableCollection<InfrastructureCateogry>();

        public MainWindow()
        {
            InitializeComponent();

            var x = new InfrastructureCateogry()
            {
                DISPLAY_NAME = "AR - Roads and Bridges",
                SubCategories = new ObservableCollection<AssetCategory>
                {
                    new AssetCategory
                    {
                        DISPLAY_NAME = "Lines",
                        Assets = new ObservableCollection<AssetRecord>
                        {
                            new AssetRecord
                            {
                                AssetID = "20040927104600",
                                AssetType = "Gravity Main",
                                LastUpdateDate = "07/05/2015 17:01:55 PM"
                            },
                            new AssetRecord
                            {
                                AssetID = "20150507170116",
                                AssetType = "Relined",
                                LastUpdateDate = "07/05/2015 17:01:15 PM"
                            }
                        }
                    },
                    new AssetCategory
                    {
                        DISPLAY_NAME = "Points"
                    },
                    new AssetCategory
                    {
                        DISPLAY_NAME = "Plant/Components"
                    },
                    new AssetCategory
                    {
                        DISPLAY_NAME = "Services"
                    }
                }
            };

            infrastructurecategories.Add(x);

            var x2 = new InfrastructureCateogry();
            x2.DISPLAY_NAME = "WW - WasteWater";

            infrastructurecategories.Add(x2);

            this.DataContext = infrastructurecategories;
        }
    }
}