xaml - How to design a Conversation view in windows 8 Metro App?

Question

I'm Trying to design the Conversation View for a chat Application in windows 8 Metro App. I'm new to xaml designs, how to set the Conversation view like the image below,

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 允许您自由移动这些块。