在Flow文档中跨栏跨越文本

Question

我正在将我的即时消息应用程序聊天界面重新设计为流程文档。这是我试图复制的设计。

http://imgur.com/5LAz1Tv

这是我迄今为止尝试过使用XamlPad。我的主要问题是对齐和/或列跨越。编辑：在顶部

<TabControl Width="500"> 

    <TabItem Header="Julien Rosen"> 

     <FlowDocument> 

      <Table> 

       <Table.Columns> 

        <TableColumn Width="60" /> 
        <TableColumn /> 
        <TableColumn Width="100" /> 

       </Table.Columns> 

       <TableRowGroup> 

        <TableRow> 

         <TableCell RowSpan="2"> 
          <Paragraph> 
           <Image Source="c:\logo.png" Height="35" /> 
           <LineBreak /> 
           <Image Margin="0,5,5,0" Source="c:\file.png" Height="10" /> 
           <Image Source="c:\flag-green.png" Height="10" /> 
          </Paragraph> 
         </TableCell> 

        </TableRow> 

        <TableRow> 

         <TableCell> 

          <Paragraph FontStyle="Italic" FontSize="12"> 
           <TextBox BorderThickness="0" IsReadOnly="False" Background="Transparent" IsEnabled="False"> 
            Julien Rosen: 
           </TextBox> 
           <TextBox BorderThickness="0" IsReadOnly="False" Background="Transparent" IsEnabled="False"> 
            03/01/2013 14:17 
           </TextBox>  
          </Paragraph> 

          <Paragraph Margin="0,10,0,0" FontSize="12"> 
           This is a new attempt using rows differently 
          </Paragraph> 

         </TableCell> 

        </TableRow> 

       </TableRowGroup> 

      </Table> 

      <Table> 

       <Table.Columns> 

        <TableColumn Width="60" /> 
        <TableColumn /> 
        <TableColumn Width="100" /> 

       </Table.Columns> 

       <TableRowGroup> 

        <TableRow> 
         <TableCell> 
          <Paragraph> 
           <Image Source="c:\logo.png" Height="35" /> 
           <LineBreak /> 
           <Image Margin="0,5,5,0" Source="c:\file.png" Height="10" /> 
           <Image Source="c:\flag-green.png" Height="10" /> 
          </Paragraph> 
         </TableCell> 

         <TableCell> 

          <Paragraph FontStyle="Italic" FontSize="12"> 
           <TextBox BorderThickness="0" IsReadOnly="False" Background="Transparent" IsEnabled="False"> 
            Julien Rosen: 
           </TextBox> 
          </Paragraph> 

          <Paragraph Margin="0,10,0,0" FontSize="12"> 
           Long messages end at the end at the cell wall instead of continuing underneath the date, regardless of ColumnSpan being set on the TableCell 
          </Paragraph> 

         </TableCell> 

         <TableCell> 
          <Paragraph FontStyle="Italic" FontSize="12"> 
           <TextBox BorderThickness="0" IsReadOnly="False" Background="Transparent" IsEnabled="False"> 
            03/01/2013 14:17 
           </TextBox>          
          </Paragraph> 
         </TableCell> 

        </TableRow> 

       </TableRowGroup> 

      </Table> 

      <Table> 

       <Table.Columns> 

        <TableColumn Width="60" /> 
        <TableColumn /> 

       </Table.Columns> 

       <TableRowGroup> 

        <TableRow> 
         <TableCell> 
          <Paragraph> 
           <Image Source="c:\logo.png" Height="35" /> 
           <LineBreak /> 
           <Image Margin="0,5,5,0" Source="c:\file.png" Height="10" /> 
           <Image Source="c:\flag-green.png" Height="10" /> 
          </Paragraph> 
         </TableCell> 

         <TableCell> 

          <Paragraph> 
           <Figure HorizontalAnchor="PageLeft"> 

            <Paragraph FontStyle="Italic" FontSize="12"> 
             <TextBox BorderThickness="0" IsReadOnly="False" Background="Transparent" IsEnabled="False"> 
              Julien Rosen: 
             </TextBox> 
            </Paragraph> 

           </Figure> 

           <Figure HorizontalAnchor="PageRight"> 

            <Paragraph FontStyle="Italic" FontSize="12"> 
             <TextBox BorderThickness="0" IsReadOnly="False" Background="Transparent" IsEnabled="False"> 
              03/01/2013 14:17 
             </TextBox>          
            </Paragraph> 

          </Figure> 
          </Paragraph> 


          <Paragraph Margin="0,10,0,0" FontSize="12"> 
           This style tries to use figures, which messes up the alignment and does crazy stuff with the text, but at least the text continues under the date 
          </Paragraph> 

         </TableCell> 

        </TableRow> 

       </TableRowGroup> 

      </Table> 

     </FlowDocument> 

    </TabItem> 

</TabControl> 

Answer 1

我试着拿出你是可以扩大样本最新尝试。我使用阴影让你知道哪个单元格/行正在做什么。

<Window x:Class="JulienSample.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="500" Width="525"> 
    <Window.Resources> 
     <BitmapImage x:Key="AvatarImage" UriSource="https://shop.blindferret.com/uploads/products/339af7124f5be1c660107332475fd6038742e1e0.jpg" DecodePixelHeight="96" DecodePixelWidth="72"/> 
     <BitmapImage x:Key="FlagImage" UriSource="flag.png" DecodePixelHeight="18" DecodePixelWidth="18" /> 
     <BitmapImage x:Key="FileImage" UriSource="file.png" DecodePixelHeight="18" DecodePixelWidth="18" /> 
    </Window.Resources> 
    <TabControl Width="500"> 
     <TabItem Header="Julien Rosen"> 
      <FlowDocumentReader ViewingMode="Scroll" IsPageViewEnabled="False" IsPrintEnabled="False" IsTwoPageViewEnabled="False"> 
       <FlowDocument FontFamily="Segoe UI" > 
        <Table BorderBrush="CadetBlue" BorderThickness="1"> 
         <Table.Columns> 
          <TableColumn Width="100"/> 
          <TableColumn Width="100" /> 
          <TableColumn /> 
          <TableColumn Width="100" /> 
         </Table.Columns> 
         <TableRowGroup> 
          <TableRow Background="AntiqueWhite"> 
           <TableCell RowSpan="2"> 
            <BlockUIContainer> 
             <Image Source="{StaticResource AvatarImage}" Width="72" Height="96"/> 
            </BlockUIContainer> 
           </TableCell> 

           <TableCell> 
            <Paragraph>Julien Rosen</Paragraph> 
           </TableCell> 

           <TableCell Background="Chartreuse"></TableCell> 

           <TableCell> 
            <Paragraph>07/03/2013</Paragraph> 
           </TableCell> 
          </TableRow> 

          <TableRow Background="Aquamarine"> 
           <TableCell ColumnSpan="3" RowSpan="3"> 
            <Paragraph> 
             Long messages end at the end at the cell wall instead of continuing underneath the date, regardless of ColumnSpan being set on the TableCell 
            Long messages end at the end at the cell wall instead of continuing underneath the date, regardless of ColumnSpan being set on the TableCell 
            </Paragraph> 
           </TableCell> 
          </TableRow> 
          <TableRow Background="BurlyWood"> 
           <TableCell Background="DarkGreen"> 
            <BlockUIContainer> 
             <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 
              <Image Source="{StaticResource FlagImage}" Height="18" Width="18"/> 
              <Image Source="{StaticResource FileImage}" Height="18" Width="18"/> 
             </StackPanel> 
            </BlockUIContainer> 
           </TableCell> 
          </TableRow> 
          <TableRow> 
           <TableCell /> 
          </TableRow> 
         </TableRowGroup> 
        </Table> 
        <Table BorderBrush="CadetBlue" BorderThickness="1"> 
         <Table.Columns> 
          <TableColumn Width="100"/> 
          <TableColumn Width="100" /> 
          <TableColumn /> 
          <TableColumn Width="100" /> 
         </Table.Columns> 
         <TableRowGroup> 
          <TableRow Background="AntiqueWhite"> 
           <TableCell RowSpan="2"> 
            <BlockUIContainer> 
             <Image Source="{StaticResource AvatarImage}" Width="72" Height="96"/> 
            </BlockUIContainer> 
           </TableCell> 

           <TableCell> 
            <Paragraph>Julien Rosen</Paragraph> 
           </TableCell> 

           <TableCell Background="Chartreuse"></TableCell> 

           <TableCell> 
            <Paragraph>07/03/2013</Paragraph> 
           </TableCell> 
          </TableRow> 

          <TableRow Background="Aquamarine"> 
           <TableCell ColumnSpan="3" RowSpan="3"> 
            <Paragraph> 
             Long messages end at the end at the cell wall instead of continuing underneath the date, regardless of ColumnSpan being set on the TableCell 
            Long messages end at the end at the cell wall instead of continuing underneath the date, regardless of ColumnSpan being set on the TableCell 
            </Paragraph> 
           </TableCell> 
          </TableRow> 
          <TableRow Background="BurlyWood"> 
           <TableCell Background="DarkGreen"> 
            <BlockUIContainer> 
             <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 
              <Image Source="{StaticResource FlagImage}" Height="18" Width="18"/> 
              <Image Source="{StaticResource FileImage}" Height="18" Width="18"/> 
             </StackPanel> 
            </BlockUIContainer> 
           </TableCell> 
          </TableRow> 
          <TableRow> 
           <TableCell /> 
          </TableRow> 
         </TableRowGroup> 
        </Table>    </FlowDocument> 
      </FlowDocumentReader> 
     </TabItem> 

    </TabControl> 
</Window> 

而且这会导致：