QQ和IM+都有自己的聊天页面，对于Android, Windows Phone写自己User Control更加简单。

public class MessageBox : ContentControl
{
///

/// The DataTemplate to use when Message.Side == Side.ME
///

public DataTemplate MeTemplate { get; set; }

///

/// The DataTemplate to use when Message.Side == Side.YOU
///

public DataTemplate YouTemplate { get; set; }

protected override void OnContentChanged(object oldContent, object newContent)
{
base.OnContentChanged(oldContent, newContent);

// Apply the required template
Message message = newContent as Message;
if (message.Side == MessageSide.ME)
{
ContentTemplate = MeTemplate;
}
else
{
ContentTemplate = YouTemplate;
}
}
}

在xaml里，两个对话框最大的不同就是箭头的指向和左右对齐。

<local:MessageBox.MeTemplate>
<DataTemplate>
<Grid Margin="30, 10, 5, 0" contribControls:GridUtils.RowDefinitions=",," Width="420">
<Rectangle Fill="{StaticResource PhoneAccentBrush}" Grid.RowSpan="2" />
<TextBlock Text="{Binding Path=Text}" Style="{StaticResource TextBlockStyle}" />
<TextBlock
Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
Style="{StaticResource TimestampStyle}" Grid.Row="1" />
<Path Data="m 0,0 l 16,0 l 0,16 l -16,-16" Fill="{StaticResource PhoneAccentBrush}"
Margin="0,0,5,0" HorizontalAlignment="Right" Grid.Row="2" />
Grid>
DataTemplate>
local:MessageBox.MeTemplate>
<local:MessageBox.YouTemplate>
<DataTemplate>
<Grid Margin="5, 10, 30, 0" contribControls:GridUtils.RowDefinitions=",," Width="420">

<Path Data="m 0,0 l 0,16 l 16,0 l -16,-16" Fill="{StaticResource PhoneAccentBrush}"
Margin="5,0,0,0" HorizontalAlignment="Left" />
<Rectangle Fill="{StaticResource PhoneAccentBrush}" Grid.Row="1" Grid.RowSpan="2" />
<TextBlock Text="{Binding Path=Text}" Style="{StaticResource TextBlockStyle}"
Grid.Row="1" />
<TextBlock
Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
Style="{StaticResource TimestampStyle}" Grid.Row="2" />
Grid>
DataTemplate>
local:MessageBox.YouTemplate>

看到了，很简单吧。好了，看看效果...

源代码下载：