Question

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

这是我到目前为止使用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>

它将导致：

Screenshot

跨流文档中的列跨文本

1 个答案: