How to move window controls inside a TabItem in TabControl?

Question

I've added a TabControl to my window in a WPF application, but I'm not sure how to re-position the TabControl so that all the other controls (buttons, textboxes, labels, data grid) are inside the General tab item.

I tried placing all my controls inside the TabItem element for the General Header, within a grid but I got a host of errors: http://hastebin.com/isenokidev.xml

Does anyone know how define this in XAML?

This is the xaml definition for the window with all the controls outside of the TabControl. I'm wondering how I can place them(in the same layout) within the general tab:

<Window x:Class="MongoDBApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="800"
        Height="500">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="70" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="1*" />
            <RowDefinition Height=".50*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.25*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width=".50*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width=".75*" />
        </Grid.ColumnDefinitions>
        <TabControl>
            <TabItem Header="General">


            </TabItem> 

            <TabItem Header="Security" />
            <TabItem Header="Details" />
        </TabControl>
        <DataGrid Name="infogrid"
                  Grid.Row="0"
                  Grid.RowSpan="3"
                  Grid.Column="3"
                  Grid.ColumnSpan="4"
                  Width="356"
                  HorizontalAlignment="Left"
                  AutoGenerateColumns="True" />
        <Label Grid.Row="4"
               Grid.Column="3"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Content="First Name:" />
        <TextBox Grid.Row="4"
                 Grid.Column="4"
                 Grid.ColumnSpan="2"
                 Width="120"
                 Height="23"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top"
                 Text=""
                 TextWrapping="Wrap" />
        <Label Grid.Row="5"
               Grid.Column="3"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Content="Last Name:" />
        <TextBox Grid.Row="5"
                 Grid.Column="4"
                 Grid.ColumnSpan="2"
                 Width="120"
                 Height="23"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top"
                 Text=""
                 TextWrapping="Wrap" />
        <Label Grid.Row="6"
               Grid.Column="3"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Content="Department" />
        <TextBox Grid.Row="6"
                 Grid.Column="4"
                 Grid.ColumnSpan="2"
                 Width="120"
                 Height="23"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top"
                 Text=""
                 TextWrapping="Wrap" />


        <Button x:Name="saveBtn"
                Grid.Row="7"
                Grid.Column="3"
                Width="75"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Content="Save" />
        <Button x:Name="updateBtn"
                Grid.Row="7"
                Grid.Column="4"
                Width="75"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Content="Update" />
        <Button x:Name="deleteBtn"
                Grid.Row="7"
                Grid.Column="5"
                Width="75"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Content="Delete" />
    </Grid>
</Window>

kskyriacou kskyriacou · Accepted Answer · 2015-11-03T20:33:47

For all your controls to be in the General tab item, they need to be defined in it. I'm not sure why you were getting errors earlier, but this works fine:

<Grid>
    <TabControl>
        <TabItem Header="General">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="70" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height=".50*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width=".75*" />
                </Grid.ColumnDefinitions>

                <DataGrid Name="infogrid"
                          Grid.Row="0"
                          Grid.RowSpan="3"
                          Grid.ColumnSpan="4"
                          Width="356"
                          HorizontalAlignment="Left"
                          AutoGenerateColumns="True" />

                <Label Grid.Row="4"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Content="First Name:" />
                <TextBox Grid.Row="4"
                         Grid.Column="1"
                         Grid.ColumnSpan="2"
                         Width="120"
                         Height="23"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         Text=""
                         TextWrapping="Wrap" />

                <Label Grid.Row="5"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Content="Last Name:" />
                <TextBox Grid.Row="5"
                         Grid.Column="1"
                         Grid.ColumnSpan="2"
                         Width="120"
                         Height="23"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         Text=""
                         TextWrapping="Wrap" />

                <Label Grid.Row="6"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Content="Department" />
                <TextBox Grid.Row="6"
                         Grid.Column="1"
                         Grid.ColumnSpan="2"
                         Width="120"
                         Height="23"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         Text=""
                         TextWrapping="Wrap" />

                <Button x:Name="saveBtn"
                        Grid.Row="7"
                        Width="75"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Content="Save" />

                <Button x:Name="updateBtn"
                        Grid.Row="7"
                        Grid.Column="1"
                        Width="75"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Content="Update" />

                <Button x:Name="deleteBtn"
                        Grid.Row="7"
                        Grid.Column="2"
                        Width="75"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Content="Delete" />
            </Grid>
        </TabItem>

        <TabItem Header="Security" />

        <TabItem Header="Details" />
    </TabControl>
</Grid>

How to move window controls inside a TabItem in TabControl?

1 Answers