2016-12-15 16 views
3

Есть ли способ выровнять содержимое TableCell в нижней части? Я думал, что это легко, но, очевидно, это не так.Как можно вертикально выровнять TableCell (или его содержимое) FlowDocument

Ситуация:

Внутри 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 свойство, чтобы изменить выравнивание. Тем не менее, нет VerticalAlignment Недвижимость в BlockUIContainer, TableCell или TableRow.

Кроме того, я попытался заменить BlockUIContainer на InlineUIContainer и установил его BaselineAlignment. Однако, чтобы сделать это, я должен был обернуть его в Paragraph так:

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

Теперь я изображение выравнивается по нижней части Paragraph, который выравнивается по верхней части TableCell и только столь же высоко как требуется для Image. Так выглядит так, как раньше.

ответ

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

Отлично, спасибо! Мне нужно было добавить 'ColumnSpan = 3' в' TableCell', чтобы получить столбцы вправо. – wkl