您的位置：首页 > 移动开发

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

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

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



现在看看具体的代码

01
<
phone:PhoneApplicationPage.Resources
>
02
<
DataTemplate
 
x:Key
=
"template_Normal"
>
03
<
StackPanel
>
04
<
c4f:ChatBubble
 
ChatBubbleDirection
=
"{Binding direction,Mode=OneTime}"
 
Margin
=
"{Binding border,Mode=OneTime}"
 
Opacity
=
"{Binding opactiy,Mode=OneTime}"
 
Width
=
"350"
>
05
<
c4f:ChatBubble.Content
>
06
<
Grid
 
Width
=
"350"
>
07
<
Grid.RowDefinitions
>
08
<
RowDefinition
 
Height
=
"Auto"
 
/>
09
<
RowDefinition
 
Height
=
"Auto"
 
/>
10
</
Grid.RowDefinitions
>
11
<
TextBlock
 
Text
=
"{Binding content, Mode=OneTime}"
Margin
=
"0,0,31,12"
 
HorizontalAlignment
=
"Left"
 
FontSize
=
"22"
 
Foreground
=
"White"
TextWrapping
=
"Wrap"
 
/>
12
<
TextBlock
 
Text
=
"{Binding time,Mode=OneTime}"
Grid.Row
=
"1"
 
HorizontalAlignment
=
"Right"
 
FontSize
=
"18"
 
Margin
=
"0,0,31,0"
Foreground
=
"White"
 
TextWrapping
=
"Wrap"
 
/>
13
</
Grid
>
14
</
c4f:ChatBubble.Content
>
15
</
c4f:ChatBubble
>
16
 
17
</
StackPanel
>
18
</
DataTemplate
>
19
</
phone:PhoneApplicationPage.Resources
>
20
21
<!--LayoutRoot 是包含所有页面内容的根网格-->
22
<
Grid
 
x:Name
=
"LayoutRoot"
 
Background
=
"Transparent"
>
23
<
Grid.RowDefinitions
>
24
<
RowDefinition
 
Height
=
"Auto"
/>
25
<
RowDefinition
 
Height
=
"*"
/>
26
</
Grid.RowDefinitions
>
27
<
Canvas
 
Margin
=
"0,0,0,120"
>
28
<
Image
 
Source
=
"/Resource/Top/WordsTop.jpg"
 
Width
=
"480"
 
Height
=
"120"
Canvas.Top
=
"0"
 
/>
29
<
Rectangle
 
Width
=
"480"
 
Height
=
"65"
 
Fill
=
"Black"
 
Opacity
=
"0.7"
Canvas.Top
=
"55"
/>
30
<
TextBlock
 
x:Name
=
"lblTitle"
 
Text
=
""
 
FontSize
=
"40"
 
Canvas.Left
=
"10"
Canvas.Top
=
"60"
 
Foreground
=
"{StaticResource TitleBrush}"
/>
31
</
Canvas
>
32
<!--ContentPanel - 在此处放置其他内容-->
33
<
ListBox
 
Name
=
"list_Words"
 
Height
=
"646"
 
Grid.Row
=
"1"
VerticalAlignment
=
"Top"
 
ItemTemplate
=
"{StaticResource template_Normal}"
>
34
<
ListBox.ItemsPanel
>
35
<
ItemsPanelTemplate
>
36
<
VirtualizingStackPanel
 
CacheMode
=
"BitmapCache"
/>
37
</
ItemsPanelTemplate
>
38
</
ListBox.ItemsPanel
>
39
</
ListBox
>
40
</
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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航