0

我花了几个小时试图弄清楚如何组织我的用户界面，而 PHP/CSS 中的简单之处却让我在 C# 中发疯。

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

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

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

编辑

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

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

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

在此处输入图像描述

4

1 回答 1

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.

于 2013-03-24T08:43:55.580 回答