[FIXED] How can I vertically align a TableCell (or its content) of a FlowDocument

Issue

Is there any way to align the content of a TableCell to the bottom? I thought this was easy, but obviously, it is not.

The situation:

Inside a FlowDocument I have the following (simplified) 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>

The two images do not have the same height so there is some empty space below the smaller of them.

What I want:

Instead, I want the empty space above the smaller image (i.e. the images aligned to the bottom of the TableRow).

What I tried:

I tried to find a VerticalAlignment property to change the alignment. However, there is no VerticalAlignment property in BlockUIContainer, TableCell or TableRow.

Also, I tried replacing the BlockUIContainer by an InlineUIContainer and setting its BaselineAlignment. However, to do this, I had to wrap it into a Paragraph like so:

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

Now I have an image aligned to the bottom of a Paragraph which is aligned to the top of the TableCell and only as high as required for the Image. So it looks exactly as it did before.

Solution

The only way to do this in my experience is to use a grid to format an entire table row. Use the grid to create columns, not the table. Therefore you can use the capabilities of the grid to bottom align your images. Here is what your table might look like now...

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

Answered By - AQuirky

Answer Checked By - Gilberto Lyons (PHPFixing Admin)