聊天页面的简单实现

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}"  />
                  <TextBlock
Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
 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}" 
                             Grid.Row="1" />
                  <TextBlock
Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
 Grid.Row="2" />
                </Grid>
              </DataTemplate>
            </local:MessageBox.YouTemplate>

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

源代码下载：http://vdisk.weibo.com/s/3aw-W

聊天页面的简单实现

TAG:Windows Phone UI