none
关于聊天气泡的实现方式 RRS feed

  • 问题

  • 如图,消息应用中消息内容和文本框的这种聊天气泡的样式如何实现?是要通过设置部件的style吗?请指教

    2014年5月25日 17:53

答案

  • 你好,这种对话气泡的控件可以这样实现:

    StackPanel中纵向放置两组控件,第一组是文本显示控件(TextBlock)和时间显示控件(TextBlock)的StackPanel(纵向排列),第二组是显示角度的Polygon。另外StackPanel也可以由Grid替换:

        <StackPanel Orientation="Vertical">
            <StackPanel Background="{StaticResource PhoneAccentBrush}" Height="90" Width="350">
                <TextBlock Text="Hello World" Margin="10" FontSize="25"/>
                <TextBlock Text="2013/12/6, 15:16" HorizontalAlignment="Right" Margin="10"/>
            </StackPanel>
            <Polygon Points="300,0 330,15 330,0" Fill="{StaticResource PhoneAccentBrush}" Stroke="Transparent"/>
        </StackPanel>

    运行效果:


    2014年5月26日 1:55

全部回复

  • 你好,这种对话气泡的控件可以这样实现:

    StackPanel中纵向放置两组控件,第一组是文本显示控件(TextBlock)和时间显示控件(TextBlock)的StackPanel(纵向排列),第二组是显示角度的Polygon。另外StackPanel也可以由Grid替换:

        <StackPanel Orientation="Vertical">
            <StackPanel Background="{StaticResource PhoneAccentBrush}" Height="90" Width="350">
                <TextBlock Text="Hello World" Margin="10" FontSize="25"/>
                <TextBlock Text="2013/12/6, 15:16" HorizontalAlignment="Right" Margin="10"/>
            </StackPanel>
            <Polygon Points="300,0 330,15 330,0" Fill="{StaticResource PhoneAccentBrush}" Stroke="Transparent"/>
        </StackPanel>

    运行效果:


    2014年5月26日 1:55
  • 非常感谢!
    2014年5月26日 2:48