c# - 跨流文档中的列跨越文本

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>

这将导致：