如何在windows 8 Metro App中设计对话视图？

Question

我正在尝试为windows 8 Metro App中的聊天应用程序设计对话视图。我是xaml设计新手，如何设置对话视图，如下图所示，

​

​

Answer 1

虽然第一次看起来这个布局可以放到有三列的网格中，但我相信在某个时候你会需要滚动。因此，您可以只使用Canvas，它允许自由浮动控件。将它们放置在具有Canvas.Left和Canvas.Top附加属性的位置。

更新:我的意思的一个插图：

<Canvas Width="300" Height="200">
    <Border Width="40" Height="40" Canvas.Left="10" Canvas.Top="60" Background="Red"/>
    <Border Width="160" Height="80" Canvas.Left="60" Canvas.Top="60" Background="LightGray"/>
    <Border Width="40" Height="40" Canvas.Left="250" Canvas.Top="150" Background="Red"/>
    <Border Width="160" Height="30" Canvas.Left="80" Canvas.Top="150" Background="LightGray"/>
</Canvas>

让我们假设红色边框是用户图片(把Image放在里面)，灰色边框是消息(把RichTextBlock放进去)。Canvas允许您自由地移动这些块。