【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