4

インスタント メッセージング アプリのチャット インターフェイスをフロー ドキュメントに再設計しています。これが私が複製しようとしているデザインです。

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>

4

1 に答える 1