CODEWITHSUNDEEP
c#wpfxaml
Bobby Ricky
Bobby Ricky

Reputation: 381

Putting stack panels side by side

In XAML I am trying to put the two stack panels (in the image) side by side:

![enter image description here][1]

I am trying to use Grid.Row to put the two stack panels in the same row, however I have not been successful.

Below is my code:

 <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition ></RowDefinition>
                        </Grid.RowDefinitions>

                        <Border BorderBrush="Black" BorderThickness="1" Width="auto" Height="auto" Margin="10,0,0,0">
                        <StackPanel Margin="10,5,279,0" Name="ConnectUpsStackPanel" >
                            <Label Name="ConnectUpsLabel" Height="28" VerticalAlignment="Top" HorizontalAlignment="Left" Width="93">Connect-Ups</Label>

                                <Border BorderBrush="Black" BorderThickness="1" Height="235" Grid.Row="1" >
                            <!--Caution Codes Stack-->
                                    <StackPanel HorizontalAlignment="Left" Margin="0,0,0,10" Name="CautionCodeStackPanel" Height="Auto" Orientation="Horizontal" Grid.Row="1">
                                <StackPanel Name="CautionCodesReviewStackPanel" >
                                    <GroupBox Header="Caution Codes" Margin="0,0,0,0" HorizontalAlignment="Left" Width="137" BorderThickness="2" Height="217">
                                        <ScrollViewer VerticalScrollBarVisibility="Visible">
                                            <Grid Name="grdCautionCodes" Width="104" Background="SeaShell" Height="203"></Grid>
                                        </ScrollViewer>
                                    </GroupBox>
                                </StackPanel>

                            <StackPanel>
                                    <Button ToolTip="Create Connect-Up" Margin="0,0,5,0" Width="0.75 in" Click="btnCreateConnectUp_Click" HorizontalAlignment="Left" Height="72">
                                        <TextBlock FontSize="18" TextAlignment="Center">Add</TextBlock>
                                    </Button>
                                            <Button ToolTip="Delete Connect-Up" Margin="0,0,5,0" Name="btnDeleteConnectUp1" Width="0.75 in" FontSize="11" Click="btnbtnDeleteConnectUp1_Click" Height="0.75 in" >
                                        <TextBlock FontSize="18" TextAlignment="Center">Delete</TextBlock>
                                    </Button>
                                            <Button ToolTip="Delete Connect-Up" Margin="0,0,5,0" Name="btnDeleteConnectUp2" Width="0.75 in" FontSize="11" Click="btnbtnDeleteConnectUp2_Click" Height="0.75 in" f>
                                                <TextBlock FontSize="18" TextAlignment="Center">Delete</TextBlock>
                                            </Button>
                                        </StackPanel>
                            </StackPanel>
                            </Border>





                                <StackPanel Margin="0,0,0,0" Name="ExternalStackPanel" Grid.Row="1" Orientation="Horizontal">
                                <Border BorderBrush="Black" BorderThickness="1" Height="226" Margin="0,0,0,0" Width="306">

                                        <WrapPanel Margin="0,0,26,0" x:Name="ExternalWrapPanel">

                                            <StackPanel Margin="0,0,5,0" x:Name="NumberStackPanel" Grid.Column="1" >
                                            <Label HorizontalAlignment="Left" Margin="0,0,0,0"  x:Name="EternalLabel" VerticalAlignment="Top" Width="52" Content="External"/>
                                            <Label HorizontalAlignment="Left" x:Name="pobLabel" VerticalAlignment="Top" Content="Number"/>
                                            <TextBox HorizontalAlignment="Left" x:Name="NumTextBox1" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" />
                                            <TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox2" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" />
                                            <TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox3" Height="23" Width="130" Text="{Binding POB}" MaxLength="30"  />
                                            <TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox4" Height="23" Width="130" Text="{Binding POB}" MaxLength="30"/>
                                            <TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox5" Height="23" Width="130" Text="{Binding POB}" MaxLength="30"/>
                                            <TextBox HorizontalAlignment="Left" Margin="0,5,0,0" x:Name="NumTextBox6" Height="23" Width="130" Text="{Binding POB}" MaxLength="30" my:SearchProps.SearchType="PersonPlaceOfBirth"/>

                                        </StackPanel>
                                        <StackPanel Margin="5,25,0,0" x:Name="PersonStackPanel" Height="197">
                                            <Label x:Name="PersonLabel" Height="28" VerticalAlignment="Top" HorizontalAlignment="Left" Width="58" Content="Person"/>
                                            <telerik:ComboBox DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonyComboBox1" />
                                            <telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox2" />
                                            <telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox3" />
                                            <telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox4" />
                                            <telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox5" />
                                            <telerik:ComboBox Margin="0,5,0,0" DisplayMemberPath="NAME" Height="23" ItemsSource="{Binding}" x:Name="PersonComboBox6" />

                                        </StackPanel>



                                    </WrapPanel>

                                </Border>
                            </StackPanel>

                        </StackPanel>
                    </Border>

                    </Grid>

Upvotes: 0

Views: 3668

Answers (4)

Bobby Ricky
Bobby Ricky

Reputation: 381

Thanks guys, apparently I made this more difficult than I thought. I changed all the orientations in the stack panels to "Horizontal" and that moved my panel up to the same row as the other. I didn't even have to add grids. Lesson learned.

Upvotes: 0

David
David

Reputation: 10708

Because your stackpanels are in a Border, that Border determines their layout, not the grid.

If you DO put your stackpanels in the exact same grid row and column (and by not specifying, they're both using the default column of zero) they'll visually overlap.

What you should instead do is one of two things

First, you could put the border properties from your Border element into the grid, and use Columns instead of Rows.

<Grid.ColumnDefinitions>
    <!-- Width="*" to assure that the controls get equals spacing -->
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0">...</StackPanel>
<StackPanel Grid.Column="1">...</StackPanel

Alternatively, you could replace the Border with a StackPanel, which will accept the same border parameters, and set Orientation to Horizontal

<!-- Instead of "Border"...-->
<StackPanel BorderBrush="Black" BorderThickness="1" Width="auto" Height="auto" Margin="10,0,0,0"
            Orientation="Horizontal">
    <StackPanel Margin="10,5,279,0" Name="ConnectUpsStackPanel" Width="*">...</StackPanel>
    <StackPanel Margin="0,0,0,0" Name="ExternalStackPanel" Width="*" Orientation="Horizontal">...</StackPanel>
</StackPanel>

Upvotes: 1

Vasistan
Vasistan

Reputation: 292

you should use column for side-by-side control placement.

check the below code

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="248*"/>
        <ColumnDefinition Width="269*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0">
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
    </StackPanel>
    <StackPanel Grid.Column="1">
        <Button Content="Button 3"/>
        <Button Content="Button 4"/>
    </StackPanel>
</Grid>

Upvotes: 1

Nahuel Ianni
Nahuel Ianni

Reputation: 3185

You can create a new Stack Panel with the Orientation property set to "Horizontal", put this panel in the second row of your grid and then put both of your stack panels inside of it.

Basically:

<StackPanel Grid.Row="2" Orientation="Horizontal">
   <YourFirstStackPanel/>
   <YourSecondStackPanel/>
</StackPanel>

The other solution you can implement, is to create two columns in your grid and put your stack panels on the same row but one on column 0 and the other in column one.

Example:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <StackPanel Grid.Row="0" Grid.Column="0">...</StackPanel>
  <StackPanel Grid.Row="0" Grid.Column="1">...</StackPanel>
</Grid>

Upvotes: 3

Related Questions