Centering a TableLayoutPanel in Parent

Question

I have spent hours trying to figure out how to organize my user interface, and what is simple in PHP/CSS is driving me nuts in C#.

Basically I am creating a class called Reply that is a 2x2 TablePanelLayout to display e-mail replies in. Each response will be an instance of this and they will appear in a vertical listing. I am trying to figure out how to create this Layout but keep it centered and have it resize when the parent container is stretched.

My last attempt used 2 TablePanelLayouts. One was a 3x3 grid, using the center cell for content and the rest were to create spacing between the edges, but I realized this method would not permit scrolling for the center content area. So my question is...what is the best way to do this?

I think a vertical FlowLayoutPanel would be best for the content, but im clueless as to how to keep the content area centered while allowing it to stretch when the parent is resized.

EDIT

If it makes it more clear, I think the idea would be...

<OutsideLayout>
     <RepliesContainer>
          <Reply></Reply>
          <Reply></Reply>
          <Reply></Reply>
     </RepliesContainer>
<OutsideLayout>

Where the "RepliesContainer" is a Vertical FlowLayoutPanel, "Reply" is my TableLayoutPanel for each response, and the "OutsideContainer" is whatever needed to keep it centered but permit the inside content to scroll. Im not sure an "OutsideContainer" is needed but I can't figure out how to use DockStyle.Fill and still keep spacing between edges otherwise.

Answer 1

The easiest way to keep the spaces is to add a left and right margin of equal values to your RepliesContainer. Then set its HorizontalAlignment to Stretch (which should already be the default.)

Next make your RepliesContainer just list out all of the replies you need. This may make your list taller than your visible area (which is solved by the next step)

Finally make your OutsideLayout simply be a ScrollViewer.

Of course, I wouldn't approach it this way in the first place. I'd personally use a simple ItemsControl which handles the scrollbar and vertical panel and laying out the individual 2x2 replies. Something like this (in pseudo-code so it may not compile. But you'll get the idea.)

<ItemsControl x:Name="MyRepliesControl"
    DataSource="{Binding MyRepliesData}">

    <!-- This is the template for an individual reply.
         The ItemsControl will create one instance for each reply automatically. -->
    <ItemsControl.ItemTemplate>

        <!-- 2x2 Reply Grid with a 24-unit margin on the left and right -->
        <Grid Margin="24,0" ...>
            ... contents of grid cells, etc. ...
        </Grid>

    </ItemsControl.ItemTemplate>

</ItemsControl>

Note: This puts the left and right margins inside of the scrollbar area. If you want the margins outside of the scrollbar, instead put the Margin attribute on the ItemsControl itself.

Then you simply set the DataContext and ensure it has an IEnumerable property called MyRepliesData which has each individual reply.

This is the proper way to do it. with this approach, you can customize anything you need to visual-wise by only focusing on the 'templates' of how the data works. The ItemsControl worries about laying it all out and giving you a scrollbar. Your only responsibility is giving it the data via MyRepliesData.