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;
  }

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