在Parent中居中TableLayoutPanel

Question

我花了好几个小时试图弄清楚如何组织我的用户界面，而PHP / CSS中的简单方法让我在C＃中疯狂。

基本上我正在创建一个名为Reply的类，它是一个2x2 TablePanelLayout来显示电子邮件回复。每个响应都是这个的实例，它们将出现在垂直列表中。我试图找出如何创建此布局但保持居中并在父容器拉伸时调整大小。

我上一次尝试使用了2个TablePanelLayouts。一个是3x3网格，使用中心单元格的内容，其余的是在边缘之间创建间距，但我意识到这种方法不允许滚动中心内容区域。所以我的问题是......最好的方法是什么？

我认为一个垂直的FlowLayoutPanel最适合内容，但是如何保持内容区域居中，同时允许它在父级调整大小时拉伸。

修改的

如果它更清楚，我认为这个想法是......

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

“RepliesContainer”是Vertical FlowLayoutPanel，“Reply”是每个响应的TableLayoutPanel，“OutsideContainer”是保持居中但允许内部内容滚动所需的任何内容。我不确定是否需要“OutsideContainer”但我无法弄清楚如何使用DockStyle.Fill并且仍然保持边缘之间的间距。

Answer 1

保留空格的最简单方法是向RepliesContainer添加相等值的左右边距。然后将其Horizo​​ntalAlignment设置为Stretch（应该已经是默认值。）

接下来让您的RepliesContainer列出您需要的所有回复。这可能会使您的列表比您的可见区域更高（这将在下一步解决）

最后让你的OutsideLayout成为ScrollViewer。

当然，我不会首先以这种方式接近它。我个人使用一个简单的ItemsControl来处理滚动条和垂直面板，并列出各个2x2的回复。像这样的东西（在伪代码中，所以它可能无法编译。但你会得到这个想法。）

<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>

注意：这会将左右边距放在滚动条区域内。如果你想要滚动条之外的边距，而是将Margin属性放在ItemsControl本身上。

然后，您只需设置DataContext并确保它具有名为MyRepliesData的IEnumerable属性，该属性具有每个单独的回复。

这是正确的方法。通过这种方法，您可以通过仅关注数据工作方式的“模板”来自定义您需要的任何内容。 ItemsControl担心将它全部铺开并给你一个滚动条。您唯一的责任是通过MyRepliesData为其提供数据。