【OSC手机App技术解析】- 气泡对话列表

在OSC的Windows Phone以及Android客户端上，个人消息中心里与别人的对话都是类似于手机短信那样的对话气泡。 在Windows Phone平台上我们是使用来自Coding4Fun小组提供的 ChatBubble控件

我们先来看看显示效果，如下图

现在看看具体的代码

<phone:PhoneApplicationPage.Resources>        <DataTemplate x:Key="template_Normal">            <StackPanel>                <c4f:ChatBubble ChatBubbleDirection="{Binding direction,Mode=OneTime}" Margin="{Binding border,Mode=OneTime}" Opacity="{Binding opactiy,Mode=OneTime}" Width="350">                    <c4f:ChatBubble.Content>                        <Grid Width="350">                            <Grid.RowDefinitions>                                <RowDefinition Height="Auto" />                                <RowDefinition Height="Auto" />                            </Grid.RowDefinitions>                            <TextBlock Text="{Binding content, Mode=OneTime}" Margin="0,0,31,12" HorizontalAlignment="Left" FontSize="22" Foreground="White" TextWrapping="Wrap" />                            <TextBlock Text="{Binding time,Mode=OneTime}" Grid.Row="1" HorizontalAlignment="Right" FontSize="18" Margin="0,0,31,0" Foreground="White" TextWrapping="Wrap" />                        </Grid>                    </c4f:ChatBubble.Content>                </c4f:ChatBubble>                            </StackPanel>        </DataTemplate>    </phone:PhoneApplicationPage.Resources>    <!--LayoutRoot 是包含所有页面内容的根网格-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <Canvas Margin="0,0,0,120">            <Image Source="/Resource/Top/WordsTop.jpg" Width="480" Height="120" Canvas.Top="0" />            <Rectangle Width="480" Height="65" Fill="Black" Opacity="0.7" Canvas.Top="55"/>            <TextBlock x:Name="lblTitle" Text="" FontSize="40" Canvas.Left="10" Canvas.Top="60" Foreground="{StaticResource TitleBrush}"/>        </Canvas>        <!--ContentPanel - 在此处放置其他内容-->        <ListBox Name="list_Words" Height="646" Grid.Row="1" VerticalAlignment="Top" ItemTemplate="{StaticResource template_Normal}">            <ListBox.ItemsPanel>                <ItemsPanelTemplate>                    <VirtualizingStackPanel CacheMode="BitmapCache"/>                </ItemsPanelTemplate>            </ListBox.ItemsPanel>        </ListBox>    </Grid>

这里尤其注意到ChatBubbleDirection这个属性，这就是那个小箭头的指向。如果指错了可是被人笑话的 :D

如果大家有任何疑问，欢迎在下面回帖讨论

PS:
OSC Android客户端下载地址:http://www.oschina.net/uploads/osc.apk
OSC iPhone客户端下载地址:http://www.oschina.net/uploads/osc.ipa
OSC Windows Phone客户端下载地址:http://www.oschina.net/uploads/osc.xap

转载：http://www.oschina.net/question/213217_59136