2016-12-15 9 views
3

TableCellの内容を下部に揃える方法はありますか?これは簡単だと思いましたが、明らかにそうではありません。FlowDocumentのTableCell(またはその内容)を垂直に整列する方法

状況:

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

小さい下記のいくつかの空のスペースがあるので、2枚の画像が同じ高さを持っていない:私はTable(簡体字)、以下のいるFlowDocumentインサイド

そのうちの。私が欲しいもの

は代わりに、私は上記の小さい画像(TableRowの下に整列すなわち画像)の空きスペースが欲しいです。

私は、配置を変更するVerticalAlignmentプロパティを見つけることを試みた:私が試した何

。ただし、BlockUIContainerにはVerticalAlignmentというプロパティはありません。TableCellまたはTableRowです。

また、BlockUIContainerInlineUIContainerに置き換えて、そのBaselineAlignmentに設定してみました。ただし、これを行うには、私はそうのようParagraphにそれをラップする必要がありました:

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

は、今私はTableCellのトップに整列し、と同じくらいの高さParagraphの底に位置合わせされた画像を持っています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

ありがとうございました!私は 'TableCell'に' ColumnSpan = 3'を加えて列を正しく取得するだけでした。 – wkl

関連する問題