Search code examples
wpftabitemdockpanel

How to place multiple panels into a tab item?


I added a tab control and a tab item into my design and want to place 3 dock panels into this tab item horizontally. But I get an error:

The property 'Content' is set more than once.

I want a design like below.

TabItem1

PersonalInformationArea------LocationInformations------EducationInformations
Name : TextBox1 ---------------City : TextBox3 ------------School : TextBox5
Surname : Textbox2------------Country : TextBox4

How can I design this?

<TabControl>
    <TabItem Header="Ana Bilgiler">
        <DockPanel x:Name="dpMainInformations" LastChildFill="False" Width="230">
            <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="5,5,5,5">
                <TextBlock Text="Müşteri Bilgileri" FontWeight="Bold" HorizontalAlignment="Stretch" Width="200"></TextBlock>
            </StackPanel>
            <StackPanel x:Name="CustName" Orientation="Horizontal" DockPanel.Dock="Top" Margin="5,5,5,5">
                <TextBlock Name="lblCustName"  Text="Müşteri adı" Width="100"/>
                <TextBox x:Name="txtMusteriAdi" Width="100"  Text="{Binding CustName}"  IsReadOnly="{Binding IsControlsEditable}"/>
                <Button x:Name="btnSelectCust" Content="Seç" Click="Button_Click_5"  IsEnabled="{Binding IsControlsEditable}"/>
            </StackPanel>
        </DockPanel>
        <DockPanel LastChildFill="False" Margin="20,5,12,5">
            <StackPanel  Orientation="Horizontal" DockPanel.Dock="Top" Margin="0,5,0,5">
                <TextBlock Text="Uygunsuzluk Bilgileri" FontWeight="Bold"></TextBlock>
            </StackPanel>
            <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="0,0,0,5">
                <TextBlock Name="lblProblemDesc" Text="Tanımı" Width="60"/>
                <TextBox MinWidth="150" MaxLength="500" Text="{Binding Definition}" UndoLimit="500" VerticalAlignment="Stretch"  TextWrapping="Wrap" AcceptsReturn="True" MinLines="4" MaxWidth="200" Margin="0,0,0,0"  IsReadOnly="{Binding IsControlsEditable}" Height="40" Width="300"/>
            </StackPanel>
        </DockPanel>
    </TabItem>
    <TabItem Header="Kapanma Bilgileri">
    </TabItem>
</TabControl>

Solution

  • You need to place your DockPanels in a container panel, because the TabItem can have only one child element, as the error message states.

    E.g. if you want that your 3 dock panels are equally sized, you can use an UniformGrid:

    <TabItem>
        <UniformGrid Columns="3">
            <DockPanel>
                ...
            <DockPanel/>
    
            <DockPanel>
                ...
            <DockPanel/>
    
            <DockPanel>
                ...
            <DockPanel/>
        </UniformGrid>
    </TabItem>