跨文本跨流程文档中的列
我正在将即时消息传递应用聊天界面重新设计为流程文档。这是我要复制的设计。
到目前为止，这是我使用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>
我试图提供一个可以扩展的示例。我已经使用阴影使您了解了表格中的哪个单元格/行正在做什么。
<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>
它将导致：
| 归档时间： |
|
| 查看次数： |
1690 次 |
| 最近记录： |