Search code examples
c#wpfxamlstackpaneldockpanel

How to set multiple buttons, textblocks and textboxes underneath each other in WPF?


Right now I have the following:

<DockPanel Height="150">

    <Button DockPanel.Dock="Right" Padding="5" Margin="5 0 5 0" FontWeight="Bold" Content="Submit" Click="Button_Click"/>
    <TextBlock TextAlignment="Left" Padding="5" Text="DVM Positive Readout" />

    <Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
        <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" x:Name="DVM_Positive_ReadOut" LostKeyboardFocus="DVM_Positive_ReadOut_LostKeyboardFocus" />
    </Border>

    <Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
        <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" x:Name="DVM_Negavtive_ReadOut" LostKeyboardFocus="DVM_Negative_ReadOut_LostKeyboardFocus" />
    </Border>

</DockPanel>

Which results in:
How it currently is

I want to have two submit buttons and two textblocks. The Textboxes are correctly stacked, though it would be nice if they were centered.

Like this:
How I want it to be


Solution

  • You can achieve this by using StackPanel with its horizontal or vertical attribute:

    <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock TextAlignment="Left"
                           Padding="5"
                           Text="DVM Positive Readout" 
                           Width="150"/>
                <Border Height="25"
                        BorderBrush="Black"
                        BorderThickness="1"
                        Width="150"
                        DockPanel.Dock="Top">
                    <TextBox HorizontalAlignment="Stretch"
                             VerticalAlignment="Center"
                             x:Name="DVM_Positive_ReadOut"
                             LostKeyboardFocus="DVM_Positive_ReadOut_LostKeyboardFocus" />
                </Border>
                <Button DockPanel.Dock="Right"
                        Padding="5"
                        Margin="5 0 5 0"
                        FontWeight="Bold"
                        Content="Submit"
                        Click="Button_Click" />
            </StackPanel>
    
            <StackPanel Orientation="Horizontal">
                <TextBlock TextAlignment="Left"
                           Padding="5"
                           Text="DVM Negative Readout"
                           Width="150" />
                <Border Height="25"
                        BorderBrush="Black"
                        BorderThickness="1"
                        Width="150"
                        DockPanel.Dock="Top">
                    <TextBox HorizontalAlignment="Stretch"
                             VerticalAlignment="Center"
                             x:Name="DVM_Negavtive_ReadOut"
                             LostKeyboardFocus="DVM_Negative_ReadOut_LostKeyboardFocus" />
                </Border>
                <Button DockPanel.Dock="Right"
                        Padding="5"
                        Margin="5 0 5 0"
                        FontWeight="Bold"
                        Content="Submit"
                        Click="Button_Click" />
            </StackPanel>
        </StackPanel>
    

    enter image description here