WPF气泡样式弹窗效果代码分享

页面设计需求,做了一个气泡形状的弹出框,效果如下:

设计思路如下:

1. 使用Path绘制气泡的尖尖,将这个放到顶层;

2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得Path图层和border看起来衔接在一起。

代码如下:

<Window x:Class="BubblePanelTest.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
  <Style TargetType="Label" x:Key="TopBubblePanel">
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type Label}">
      <Grid>
       <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Background="Yellow" HorizontalAlignment="Left" Margin="0,8.5,0,0" Padding="5">
        <ContentPresenter />
       </Border>
       <Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" Background="Transparent">
        <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
         <Path.Data>
          <PathGeometry Figures="M 0,10
         L 0,10,5,0
         L 5,0,10,10
         "/>
         </Path.Data>
        </Path>
       </Canvas>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
  <Style TargetType="Label" x:Key="BottomBubblePanel">
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type Label}">
      <Grid>
       <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Bottom" Margin="0,0,0,8.5" Background="Yellow" HorizontalAlignment="Left" Padding="5">
        <ContentPresenter />
       </Border>
       <Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,0,0,0" Background="Transparent">
        <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
         <Path.Data>
          <PathGeometry Figures="M 0,0
         L 0,0,5,10
         L 5,10,10,0
         "/>
         </Path.Data>
        </Path>
       </Canvas>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
  <Style TargetType="Label" x:Key="LeftBubblePanel">
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type Label}">
      <Grid>
       <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Margin="8.5,0,0,0" Background="Yellow" HorizontalAlignment="Left" Padding="5">
        <ContentPresenter />
       </Border>
       <Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent">
        <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
         <Path.Data>
          <PathGeometry Figures="M 10,0
         L 10,0,0,5
         L 0,5,10,10
         "/>
         </Path.Data>
        </Path>
       </Canvas>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
  <Style TargetType="Label" x:Key="RightBubblePanel">
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type Label}">
      <Grid HorizontalAlignment="Left">
       <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,8.5,0" Background="Yellow" Padding="5">
        <ContentPresenter />
       </Border>
       <Canvas Width="10" Height="10" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent">
        <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
         <Path.Data>
          <PathGeometry Figures="M 0,0
         L 0,0,10,5
         L 10,5,0,10
         "/>
         </Path.Data>
        </Path>
       </Canvas>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
 </Window.Resources>
 <StackPanel>
  <Label Style="{StaticResource TopBubblePanel}" Tag="Top" Margin="2">
   <StackPanel>
    <StackPanel Orientation="Horizontal">
     <TextBlock Text="abc" />
     <TextBox Width="80"/>
    </StackPanel>
   </StackPanel>
  </Label>
  <Label Style="{StaticResource BottomBubblePanel}" Tag="Top" Margin="2">
   <StackPanel>
    <StackPanel Orientation="Horizontal">
     <TextBlock Text="abc" />
     <TextBox Width="80"/>
    </StackPanel>
   </StackPanel>
  </Label>
  <Label Style="{StaticResource LeftBubblePanel}" Tag="Top" Margin="2">
   <StackPanel>
    <StackPanel Orientation="Horizontal">
     <TextBlock Text="abc" />
     <TextBox Width="80"/>
    </StackPanel>
   </StackPanel>
  </Label>
  <Label Style="{StaticResource RightBubblePanel}" Tag="Top" Margin="2">
   <StackPanel>
    <StackPanel Orientation="Horizontal">
     <TextBlock Text="abc" />
     <TextBox Width="80"/>
    </StackPanel>
   </StackPanel>
  </Label>
  <StackPanel Orientation="Horizontal" Margin="0,30,0,0">
   <Button Name="btnTestPopup1" Width="100" Height="30" Content="Bottom" Click="btnTestPopup1_Click" />
   <Button Name="btnTestPopup2" Width="100" Height="30" Content="Top" Click="btnTestPopup2_Click" />
   <Button Name="btnTestPopup3" Width="100" Height="30" Content="Right" Click="btnTestPopup3_Click" />
   <Button Name="btnTestPopup4" Width="100" Height="30" Content="Left" Click="btnTestPopup4_Click" />
  </StackPanel>
  <Popup Name="pop1" AllowsTransparency="True" StaysOpen="False" PopupAnimation="Slide" PlacementTarget="{Binding ElementName=btnTestPopup1}" Placement="Bottom" >
   <Label Style="{StaticResource TopBubblePanel}" Tag="Top">
    <StackPanel>
     <StackPanel Orientation="Horizontal">
      <TextBlock Text="abc" />
      <TextBox Width="80" Name="txtTest1" />
     </StackPanel>
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
      <Button Content="确定" Click="btnOK1_Click" Width="50" Height="25" Margin="5" />
      <Button Content="取消" Click="btnCancel1_Click" Width="50" Height="25" Margin="5"/>
     </StackPanel>
    </StackPanel>
   </Label>
  </Popup>
  <Popup Name="pop2" AllowsTransparency="True" StaysOpen="False" PopupAnimation="Fade" PlacementTarget="{Binding ElementName=btnTestPopup2}" Placement="Top" >
   <Label Style="{StaticResource BottomBubblePanel}" Tag="Top">
    <StackPanel>
     <StackPanel Orientation="Horizontal">
      <TextBlock Text="abc" />
      <TextBox Width="80" Name="txtTest2" />
     </StackPanel>
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
      <Button Content="确定" Click="btnOK2_Click" Width="50" Height="25" Margin="5"/>
      <Button Content="取消" Click="btnCancel2_Click" Width="50" Height="25" Margin="5"/>
     </StackPanel>
    </StackPanel>
   </Label>
  </Popup>
  <Popup Name="pop3" AllowsTransparency="True" StaysOpen="False" PopupAnimation="Scroll" PlacementTarget="{Binding ElementName=btnTestPopup3}" Placement="Right" >
   <Label Style="{StaticResource LeftBubblePanel}" Tag="Top">
    <StackPanel>
     <StackPanel Orientation="Horizontal">
      <TextBlock Text="abc" />
      <TextBox Width="80" Name="txtTest3" />
     </StackPanel>
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
      <Button Content="确定" Click="btnOK2_Click" Width="50" Height="25" Margin="5"/>
      <Button Content="取消" Click="btnCancel3_Click" Width="50" Height="25" Margin="5"/>
     </StackPanel>
    </StackPanel>
   </Label>
  </Popup>
  <Popup Name="pop4" AllowsTransparency="True" StaysOpen="False" PopupAnimation="None" PlacementTarget="{Binding ElementName=btnTestPopup4}" Placement="Left" >
   <Label Style="{StaticResource RightBubblePanel}" Tag="Top">
    <StackPanel>
     <StackPanel Orientation="Horizontal">
      <TextBlock Text="abc" />
      <TextBox Width="80" Name="txtTest4" />
     </StackPanel>
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
      <Button Content="确定" Click="btnOK4_Click" Width="50" Height="25" Margin="5"/>
      <Button Content="取消" Click="btnCancel4_Click" Width="50" Height="25" Margin="5"/>
     </StackPanel>
    </StackPanel>
   </Label>
  </Popup>
 </StackPanel>
</Window>

后台代码,很简单,就是控制pupup显示或隐藏

private void btnTestPopup1_Click(object sender, RoutedEventArgs e)
  {
   pop1.IsOpen = true;
  }
  private void btnOK1_Click(object sender, RoutedEventArgs e)
  {
   pop1.IsOpen = false;
  }
  private void btnCancel1_Click(object sender, RoutedEventArgs e)
  {
   pop1.IsOpen = false;
  }

  private void btnTestPopup2_Click(object sender, RoutedEventArgs e)
  {
   pop2.IsOpen = true;
  }
  private void btnOK2_Click(object sender, RoutedEventArgs e)
  {
   pop2.IsOpen = false;
  }
  private void btnCancel2_Click(object sender, RoutedEventArgs e)
  {
   pop2.IsOpen = false;
  }

  private void btnTestPopup3_Click(object sender, RoutedEventArgs e)
  {
   pop3.IsOpen = true;
  }
  private void btnOK3_Click(object sender, RoutedEventArgs e)
  {
   pop3.IsOpen = false;
  }
  private void btnCancel3_Click(object sender, RoutedEventArgs e)
  {
   pop3.IsOpen = false;
  }

  private void btnTestPopup4_Click(object sender, RoutedEventArgs e)
  {
   pop4.IsOpen = true;
  }
  private void btnOK4_Click(object sender, RoutedEventArgs e)
  {
   pop4.IsOpen = false;
  }
  private void btnCancel4_Click(object sender, RoutedEventArgs e)
  {
   pop4.IsOpen = false;
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-09-01

WPF微信聊天和通讯录按钮样式代码分享

一.先用Path画一下轮廓 <Path Stroke="Red" StrokeThickness="1" Margin="10" StrokeDashCap="Round"> <Path.Data> <GeometryGroup> <PathGeometry Figures="M 4,40 A 16,13 0 1 1 10,45 L 3,48 Z" /> &l

c#使用微信接口开发微信门户应用中微信消息的处理和应答

微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为计划的安排事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微信的相关开发过程和相关经验总结,希望给大家了解一下相关的开发历程.本篇随笔主要基于上一篇<c#使用微信接口开发微信门户应用>的基础上进行深入的介绍,介绍微信消息的处理和应答的过程. 1.微信的消息应答交互 我们知道,微信的服务器架起了客户手机和开发者服务器的一个桥梁,通过消息的传递和响应,实现了与

C#开发微信公众号接口开发

具体实现方式不多说了,请看下文 一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号密码.作为微信接口开发人员我们知道网页授权可以用作微信网页用作安全登录,带参数二维码的使用用作记录用户来源,模板消息用作购物消费等消息的通知,但是很少看到有综合利用这些高级接口做出体验比较好的公众账号,这里分享一些我开发的用户绑定和验证码的一些心得.所需要的接口有基础

C#微信公众号开发之接收事件推送与消息排重的方法

本文实例讲述了C#微信公众号开发之接收事件推送与消息排重的方法.分享给大家供大家参考.具体分析如下: 微信服务器在5秒内收不到响应会断掉连接,并且重新发起请求,总共重试三次.这样的话,问题就来了.有这样一个场景:当用户关注微信账号时,获取当前用户信息,然后将信息写到数据库中.类似于pc端网站的注册.可能由于这个关注事件中,我们需要处理的业务逻辑比较复杂.如送积分啊,写用户日志啊,分配用户组啊.等等--一系列的逻辑需要执行,或者网络环境比较复杂,无法保证5秒内响应当前用户的操作,那如果当操作尚未完

超炫酷的WPF实现Loading控件效果

Win8系统的Loading效果还是很不错的,网上也有人用CSS3等技术实现,研究了一下,并打算用WPF自定义一个Loading控件实现类似的效果,并可以让用户对Loading的颗粒(Particle)背景颜色进行自定义,话不多说,直接上代码: 1.用VS2012新建一个WPF的用户控件库项目WpfControlLibraryDemo,VS自动生成如下结构: 2.删除UserControl1.xaml,并新建一个Loading的CustomControl(不是UserControl),如下图所示

WPF实现渐变淡入淡出的登陆窗口效果

本文实例讲述了WPF实现渐变淡入淡出的登陆窗口效果的方法.分享给大家供大家参考.具体实现方法如下: 1.实现原理 ① 利用UIElement.OpacityMask属性,用于改变对象区域的不透明度的画笔.可以使元素的特定区域透明或部分透明,从而实现比较新颖的效果. ② OpacityMask属性接受任何画刷,可利用LinearGradientBrush线性渐变画刷,通过对渐变画刷中各颜色点加以动画处理即可. 2.渐变淡入实现 渐变淡入效果,可通过事件触发器触发Loaded事件实现,所以可以仅用前

C#实现微信公众号群发消息(解决一天只能发一次的限制)实例分享

总体思路: 1.首先必须要在微信公众平台上申请一个公众号. 2.然后进行模拟登陆.(由于我对http传输原理和编程不是特别懂,在模拟登陆的地方,不是特别清楚,希望有大神指教) 3.模拟登陆后会获得一个token(令牌)和cookie. 4.因为模拟登陆后相当于就进入了微信公众平台,在这个里面就可以抓取到需要的数据,如公众好友的昵称,fakeId.其中的fakeid非常重要,因为传输数据必须要知道对方的fakeid. 5.知道对方的fakeid就可以进行数据的发送了. 这里是整个项目的源码下载:h

C#微信开发(服务器配置)

小编对微信开发颇感兴趣,查阅了网上相关文章进行整理,方便大家一起学习. 1.注册帐号--填写服务器配置 在https://mp.weixin.qq.com/ 微信公众平台上注册帐号: 服务号是公司申请的微信公共账号,订阅号是个人申请的,个人权限比较少: 登录微信公众平台官网后,在公众平台后台管理页面 - 开发者中心页,点击"修改配置"按钮,填写服务器地址(URL).Token和EncodingAESKey,其中URL是开发者用来接收微信消息和事件 的接口URL.Token可由开发者可以

c#使用微信接口开发微信门户应用

微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为日常计划的重要事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微信的相关开发过程和相关经验总结,希望给大家了解一下相关的开发历程.本随笔主要针对微信开发过程的前期准备和一些初始的工作的介绍. 在写下本文的之前一周时间里,我主要就是参考一些介绍文章以及微信公众平台的相关接口说明,并结合C#的代码开发,整理了自己公司的门户界面,实现了微信工作号的初步用户交互和信

.Net语言Smobiler开发之如何仿微信朋友圈的消息样式

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的"Smobiler Components"拖动一个MicroBlog控件到窗体界面上 2.用代码添加手机界面上显示的内容 Load事件代码: VB: Private Sub TestMicroBlog_Load(sender As Object, e As EventArgs) Handles MyBa

Android 仿微信朋友圈点赞和评论弹出框功能

贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

Android 高仿微信朋友圈动态支持双击手势放大并滑动查看图片效果

最近参与了开发一款旅行APP,其中包含实时聊天和动态评论功能,终于耗时几个月几个伙伴完成了,今天就小结一下至于实时聊天功能如果用户不多的情况可以scoket实现,如果用户万级就可以采用开源的smack + opnefile实现,也可以用mina开源+XMMP,至于怎么搭建和实现,估计目前github上一搜一大把,至于即时通讯怕误人子弟,暂且不做介绍,现就把实现的一个微信朋友圈的小功能介绍一下. 先上效果图: 一拿到主流的UI需求,大致分析下,需要我ListView嵌套Gridview,而grid

Android仿微信朋友圈全文、收起功能的实例代码

前言 一般在社交APP中都有类似朋友圈的功能,其中发表的动态内容很长的时候不可能让它全部显示.这里就需要做一个仿微信朋友圈全文.收起功能来解决该问题.在网上看到一个例子-->http://www.jb51.net/article/105251.htm,写的很不错,但是有个bug,他这个Demo只有在条目固定的时候才正常,当增加.删除条目的时候会出现全文.收起显示混乱的问题.原因是他使用了固定的position作为key来保存当前显示的状态.这篇文章在他的基础上进行优化. 效果图 具体代码 (详细

Android 高仿微信朋友圈拍照上传功能

模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)

Android自定义TextView仿微信朋友圈文字展开全文功能

Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical

Android GridView仿微信朋友圈显示图片

最近项目要求上传多图并且多图显示,而且要规则的显示,就像微信朋友圈的图片显示一样. 利用GridView再适合不过了,GridView可以动态加载图片的数量,而且还比较规律,下面说一下自己的思路: 1.获取网络图片 2.初始化gridview,自定义适配器 3.根据图片数量设置gridview的列数 4.更新适配器 下面贴上部分源码并给大家解析一下 一.首先是GridView的item <com.view.SquareLayout xmlns:android="http://schemas

Android仿微信朋友圈实现滚动条下拉反弹效果

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动条实现的.下拉,当松开时候,反弹至原来的位置.下拉时候能看到背景图片.那么这里简单介绍一下这种效果的实现. 1.效果图 这部手机显示的分辨率有限,很老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; import androi

Android+Html5混合开发仿微信朋友圈

开发之前 大约从去年开始吧, 也可能是前年 Html5好像火得不得了, 不得了...总能从网上听说到 XXX混合开发, 为了紧跟潮流(虽然有点儿晚了), 咱们也看看Android+Html5混合开发是怎样的! 今天带来的案例是微信的朋友圈, 因为我觉得是微信把H5给"捧红了". 不过丑话说在前头, 咱们的仿朋友圈可是"低仿", 只是把混合开发的大致流程说说, 界面可能不堪入目...见谅.. 开发环境 Android Studio 2.2.2 JDK1.7 API 2

Android自定义SwipeRefreshLayout高仿微信朋友圈下拉刷新

上一篇文章里把SwipeRefreshLayout的原理简单过了一下,大致了解了其工作原理,不熟悉的可以去看一下:http://www.jb51.net/article/89310.htm 上一篇里最后提到,SwipeRefreshLayout的可定制性是比较差的,看源码会发现跟样式相关的几个类都是private的而且方法是写死的,只暴露出了几个颜色设置的方法.这样使得SwipeRefreshLayout的使用比较简单,主要就是设置一个监听器在onRefresh方法里完成刷新逻辑.讲道理Swip