wpf 下的仿QQ聊天气泡实现原理?

y5607 2014-04-28 01:47:26

最近公司做一个聊天通讯工具,完全仿照QQ的界面.请教各路大神,QQ聊天的气泡是怎么实现的呢.我的方法是在Grid里面嵌套一个Border,定义了一个GeometryDrawing,问题是当文本内容多的时候,这个气泡会撑大不美观.请教更加合理的实现方式.



  <Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

                                                <Grid.RowDefinitions>

                                                    <RowDefinition Height="10"></RowDefinition>

                                                    <RowDefinition Height="*"/>

                                                    <RowDefinition Height="10"/>

                                                </Grid.RowDefinitions>

                                                <Grid.ColumnDefinitions>

                                                    <ColumnDefinition Width="20" MaxWidth="20"/>

                                                    <ColumnDefinition Width="30*"  x:Name="testColumn" />

                                                    <ColumnDefinition Width="20" MaxWidth="20"/>

                                                </Grid.ColumnDefinitions>



                                                <Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" x:Name="testBorder" Width="auto" HorizontalAlignment="Stretch" >

                                                    <Border.Background>

                                                        <DrawingBrush Stretch="Fill">

                                                            <DrawingBrush.Drawing>

                                                                <DrawingGroup>

                                                                    <DrawingGroup.Children>

                                                                        <GeometryDrawing Brush="#FFF9F2DE" Geometry="F1 M 0.656021,0.0159988L 21.936,0.0159988L 21.936,

4.576L 0.656021,4.576L 0.656008,1.44939L 0.0159988,0.836052L 0.656015,0.435997L 0.656021,0.0159988 Z ">

                                                                            <GeometryDrawing.Pen>

                                                                                <Pen Thickness="0.032" StartLineCap="Round" EndLineCap="Round" LineJoin="Round" Brush="#FF000000"/>

                                                                            </GeometryDrawing.Pen>

                                                                        </GeometryDrawing>

                                                                    </DrawingGroup.Children>

                                                                </DrawingGroup>

                                                            </DrawingBrush.Drawing>

                                                        </DrawingBrush>

                                                    </Border.Background>

                                                </Border>                                     

                                                    <TextBlock   Grid.Column="1" Grid.Row="1"  HorizontalAlignment="Stretch" Margin="0" TextWrapping="Wrap"

  MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window},  Path=ActualWidth,Converter={StaticResource testC}}"

  Text="  一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十"/>

 </Grid>

...全文

857 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

xufzu123 2014-08-21

打赏
举报

可以参考这个网址下的代码 http://www.codeproject.com/KB/shell/balloontipsarticle.aspx

pengquanwei 2014-08-19

打赏
举报

难度在于流文档里面的元素没有高宽属性如：paragraph

ChinHol 2014-07-15

打赏
举报

我尝试了用richtextbox来做，气泡就是画paragraph的背景，但是效果不是很好

非专业开发Five 2014-07-11

打赏
举报

QQ气泡不是一个单纯的图像背景，是一个组合图像背景 +————————————+ |这里是文字内容，内容完成| +————————————> 大致逻辑如此，如果中央文字过多，QQ会截取部分内容并加上一个点击查看全部的小链接。继续分析就是这个结果首先是头部背景图片然后是文字内容配中部背景图片最后是底部背景图片文字过多给点击显示全部的操作。

非专业开发Five 2014-07-11