如何垂直对齐FlowDocument中的TableCell（或其内容）？

Question

有没有一种方法可以将TableCell的内容对齐到底部？我原以为这很容易，但显然不是。

情况：

在一个FlowDocument中，我有以下（简化的）Table：

<Table>
    <Table.Columns>
        <TableColumn Width="Auto"/>
        <TableColumn Width="Auto"/>
        <TableColumn Width="Auto"/>
    </Table.Columns>
    <TableRowGroup>
        <TableRow>
            <TableCell>
                <BlockUIContainer>
                    <Image Source="{Binding to an image}"/>
                </BlockUIContainer>
            </TableCell>
            <TableCell containing something else/>
           <TableCell>
                <BlockUIContainer>
                    <Image Source="{Binding to another image}"/>
                </BlockUIContainer>
            </TableCell>
        </TableRow>
    </TableRowGroup>
</Table>

这两张图片的高度不同，因此较小的图片下方有一些空白区域。

我想要的效果：

相反，我希望较小的图片的上方有空白区域（即将图像与TableRow底部对齐）。

我尝试过的方法：

我尝试查找VerticalAlignment属性以更改对齐方式。然而，在BlockUIContainer、TableCell或TableRow中都没有VerticalAlignment属性。

另外，我尝试用InlineUIContainer替换BlockUIContainer并设置它的BaselineAlignment。但是，为了做到这一点，我必须将其包装在一个Paragraph中，如下所示：

<TableCell>
    <Paragraph>
        <InlineUIContainer BaselineAlignment="Bottom">
            <Image Source="{Binding to an image}"/>
        </InlineUIContainer>
    </Paragraph>
</TableCell>

现在我有一张图片，它与位于单元格顶部的段落底部对齐，并且高度只有图片所需的高度。因此它看起来和之前完全一样。

- wkl

Answer 1

根据我的经验，唯一的方法是使用网格来格式化整个表格行。使用网格来创建列，而不是使用表格。因此，您可以利用网格的功能来底部对齐您的图像。现在您的表格可能如下所示...

    <Table>
        <TableRowGroup>
            <TableRow>
                <TableCell>
                    <BlockUIContainer>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="Images/globe.png" Height="10" Width="10" VerticalAlignment="Bottom"/>
                            <TextBlock Grid.Column="1" TextWrapping="Wrap">This is something else</TextBlock>
                            <Image Grid.Column="2" Source="Images/globe.png" Height="20" Width="20" VerticalAlignment="Bottom"/>
                        </Grid>
                    </BlockUIContainer>
                </TableCell>
            </TableRow>
        </TableRowGroup>
    </Table>

- AQuirky

---

太好了，谢谢！我只需要在“TableCell”中添加“ColumnSpan=3”就可以正确设置列。 - wkl