WPF 气泡尖角在左边、下面、右边、上面

原文:WPF 气泡尖角在左边、下面、右边、上面

由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的。

1、气泡尖角在左边的:

  

 <Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow" HorizontalAlignment="Right">
            <Path.Data>
                <PathGeometry Figures="
                                      M 10,10
                                      L 10,10 200,10
                                      L 200,10 200,100
                                      L 200,100 10,100
                                      L 10,40 -10,30
                                      L -10,30 10,30
                                      Z"/>
            </Path.Data>
        </Path>

2、气泡尖角在下面的:

  

<Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow">
            <Path.Data>
                <PathGeometry Figures="
                                      M 10,10
                                      L 10,10 200,10
                                      L 200,10 200,100 

                                      L 200,100 40,100  

                                      L 40,100  30,110
                                      L 30,110 30,100
                                      L 30,100 10,100
                                      Z"/>
            </Path.Data>
        </Path>

3、气泡尖角在右边

  

 <Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,0,0,59.339">
            <Path.Data>
                <PathGeometry Figures="
                                      M 10,10
                                      L 10,10 200,10
                                      L 200,10 200,80
                                      L 200,80 210,80
                                      L 210,80 200,90
                                      L 200,100 10,100
                                      Z"/>
            </Path.Data>
        </Path>

4、气泡尖角在上面

<Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10,0,0,59.339">
            <Path.Data>
                <PathGeometry Figures="
                                      M 10,10
                                      L 10,10 180,10
                                      L 180,10 190,0
                                      L 190,0 190,10
                                      L 190,10,200,10
                                      L 200,100 10,100

                                      Z"/>
            </Path.Data>
        </Path>

最后的效果显示:

时间: 2024-10-27 08:21:20

WPF 气泡尖角在左边、下面、右边、上面的相关文章

Android 实现气泡布局/弹窗,可控制气泡尖角方向及偏移量

Android 自定义布局实现气泡弹窗,可控制气泡尖角方向及偏移量. 效果图 实现 首先自定义一个气泡布局. /** * 气泡布局 */ public class BubbleRelativeLayout extends RelativeLayout { /** * 气泡尖角方向 */ public enum BubbleLegOrientation { TOP, LEFT, RIGHT, BOTTOM, NONE } public static int PADDING = 30; public

百度前端笔试题目--css 实现一个带尖角的正方形

今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯.(参考地址:http://www.ithao123.cn/content-5672159.html) 实现图示的效果涉及到的知识主要有两点:一个是before.after伪元素,一个是border 1.before 和 after 都是css中的伪元素,通过给定一个属性content给元素添加新的

html如何绘制带尖角(三角)的矩形

摘要:网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3.我们先来看一个三角在左边的对话框的效果图矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类.下面说下矩形左边的小三角,我们可以这么设置.右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:<divclass="log-content" 网上有很多html+c

带尖角的div

原以为尖角三角形是png图片,原来是可以用css画出来,css3也可以很简单的得到带圆角的div, 大概思路: 1.画出一个带细边框的div 2.使用::before和left:100%在div的右边添加一个height和width为0但是带边框的元素 3.使用::after覆盖before #demo { width: 100px; height: 100px; background-color: #fff; border: 2px rgb(31, 197, 86) solid; border

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

css细节决定薪水一:尖角处理

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂.我查看了各大互联网公司的网站,包括腾讯.百度.新浪.天猫.去哪网, 腾讯: 百度: 去哪网: 天猫: 其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌. 优点:形状随意: 缺点:不方便维护: 下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码: <div clas

解决左边固定右边自适应宽度的方案

上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题,当然,这个问题我也在百度中搜索过,基本搜索出来的答案都是这样描述的,我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局,是会损耗性能的,但是百度中却没有给出我所想表达出的解决方案,所以不得不在此将该方案具体的描述清楚. 首先,我需要介绍的是display:box这个属性,它是今天弹性布局的主角,虽然它有个更加强大的弟弟display

HTML左边和右边是固定的宽度但是中间是自动的布局方式

对于这个布局方式我们可以是用绝对定位的方式来实现这个效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

border尖角(转国外文章http://www.howtocreate.co.uk/tutorials/css/slopes)

Using borders to produce angled shapes This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial. These examples will not work in Netscape 4 or WebTV, because they do not allow you to define