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

而且這會導致：