聊天页面的简单实现
QQ和IM+都有自己的聊天页面，对于Android, Windows Phone写自己User Control更加简单。两个DataTemplates, 一个Template selector。
public class MessageBox : ContentControl
{
/// <summary>
/// The DataTemplate to use when Message.Side == Side.ME
/// </summary>
public DataTemplate MeTemplate { get; set; }
/// <summary>
/// The DataTemplate to use when Message.Side == Side.YOU
/// </summary>
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>
看到了，很简单吧。好了，看看效果...