WPF Layout Problems

Question

I cant figure out what I am doing wrong I have a grid with 2 columns and 3 rows. In the left column I have a textblock and textbox and a listbox which is all good.

The right column gets a little more complicated where I have a tabcontrol to start. Then my TabItem and inside that I have my Main Grid and then inside that I have 2 grids. Which are grdDetailsTop and then grdDetailsBottom.

grdDetailsTop has 3 columns where the left will be an image with a Border the middle should be Member Code: 'TextBox' and under that should be Family Code: 'TextBox' and then finally under that I would like to place Balance: 'TextBox'

The way I tried it was, I have grdDetailsTop Grid with 3 columns in the first column I placed a groupbox and inside that I have a stackpanel.

Second Column is where I am having trouble I placed a Stackpanel with the orientation Horizontal and grid.Column="1" but my textblocks are going into the 3rd column without me telling them too. Sorry for the bad explanation but the code is posted hopefully you can help. Also the reason for my different Panels is so I can place a border around each column of the grdDetailsTop.

Thanks

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20*"></ColumnDefinition>
            <ColumnDefinition Width="70*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="100*"></RowDefinition>
        </Grid.RowDefinitions>

            <TextBlock Text="Search Member" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
            <TextBlock Text="Member Details" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
            <TextBox Name="txtMEMSearch" Background="Orange" Grid.Column="0" Grid.Row="1"></TextBox>
            <ListBox Name="lstSearchMembers" Grid.Row="2"
                     BorderBrush="Black" DisplayMemberPath="Name"
                     ItemsSource="{Binding ElementName=bindingToObject,
                                           Path=Clients}" />


        <TabControl Name="mainTabControl" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="5">
            <TabItem Header="Member Details" Name="memDetailTab">
                <Grid Name="mainTabGrid">
                    <Grid Name="grdDetailsTop" Height="175" VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"></ColumnDefinition>
                            <ColumnDefinition Width="200"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <GroupBox Header="Picture">
                            <StackPanel>
                                <Image Height="125" Width="125"></Image>
                            </StackPanel>
                        </GroupBox>


*************PROBLEM AREA******************

                        <StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
                            <TextBlock
                                VerticalAlignment="Top"
                                Margin="5"
                                Height="25">Member Code:</TextBlock>
                            <TextBlock
                                VerticalAlignment="Top"
                                Margin="5"
                                Width="75"
                                Height="25"></TextBlock>

                            <TextBlock
                                Margin="5"
                                Height="25"
                                Width="100">Family Code:</TextBlock>

                            <TextBlock
                                Margin="5"
                                Width="75"
                                Height="25"></TextBlock>

                            <TextBlock
                                VerticalAlignment="Bottom"
                                Margin="5"
                                Height="25"
                                Width="100">Balance Due:</TextBlock>

                            <TextBlock
                                Margin="5"
                                VerticalAlignment="Bottom"
                                Width="75"
                                Height="25"></TextBlock>
                        </StackPanel>  

******************************************                                                   
                    </Grid>

                    <Grid Name="grdDetailsBottom">                   
                    </Grid>                  
                </Grid>
          </TabItem>
        </TabControl>         
    </Grid>
</Page>

Screenshot

Brian S Brian S · Accepted Answer · 2013-03-02T19:35:56

You're missing the VerticalAlignment = "Top" on that TextBlock, and therefore, it is defaulting to Stretch which will center the text in the available vertical space. If you set that property, you'll see that it moves back up to be in line with the other TextBoxes in the same StackPanel.

It isn't actually moving that TextBox into the next column, rather, you've defined a fixed width of the column it is in (in this case, column 1 with a width of 200). But the contents of that column (the StackPanel are more than 200 units wide, so they push over into the next grid column. To keep all the TextBoxes in column 1, you'll either need to widen the column so they can fit, shrink the size of the TextBoxes or set the width Auto so it will automatically size itself to its contents. If you look at it, you're taking up 175 units with TextBlocks 2 and 3, leaving only 25 units for the rest of the TextBlocks in that StackPanel. There's just not enough space.

<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
  ... other text boxes ...
</StackPanel>

This will fix the vertical layout issue, but not the Horizontal layout issue. That requires changes to the grid column sizing or the size of the contents.

Per your comment below, I believe you're looking for the WrapPanel which will automatically wrap items to the next line (horizontal or vertical) when it runs out of space.

<WrapPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
  ... other text boxes ...
</WrapPanel>

This layout certainly looks nicer. But - I don't know your specific requirements, however rather than using a WrapPanel with fixed margins and sizes, I would recommend using a Grid with ColumnDefinitions and RowDefinitions to organize items in this type of layout. The Grid offers a much greater level of flexibility and allows for items to automatically resize based on system font sizes, a user resizing your view and other factors out of your control. If you are setting fixed heights/widths, you lose that flexibility. Again, I don't know you're requirements, so perhaps this is the best solution for you, but under most circumstances, I'd highly recommend a Grid instead.

WPF Layout Problems

1 Answers