WPF 气泡提示框的简单实现

自己挖了一个大坑,,,然后苦逼的在码代码重写样式! 废物不多少

直接上代码

1 <TextBox Name="account" GotFocus="account_GotFocus" LostFocus="account_LostFocus" Style="{StaticResource LabelTextBox}" xl:ControlAttachProperty.Label="用户名:"  Foreground="Black" Margin="10,10,273,271" Width="Auto" />

先在前台创建一个TextBox,然后各种附加的属性加上去:如图所示 

1 <Popup Name="pop3" AllowsTransparency="True" StaysOpen="True" PopupAnimation="Fade" IsOpen="False"  PlacementTarget="{Binding ElementName=account}" Placement="Right" >
2       <Label Style="{StaticResource tipLable}">
3               <StackPanel Orientation="Horizontal">
4                    <Label Content="请输入用户名"/>
5               </StackPanel>
6         </Label>
7  </Popup>

效果图:

样式代码:

 1    <Style TargetType="Label" x:Key="tipLable">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="{x:Type Label}">
 5                     <Grid>
 6                         <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Margin="8.5,0,0,0" Background="Yellow" HorizontalAlignment="Left" Padding="5">
 7                             <ContentPresenter />
 8                         </Border>
 9                         <Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent">
10                             <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
11                                 <Path.Data>
12                                     <PathGeometry Figures="M 10,0 L 10,0,0,5  L 0,5,10,10"/>
13                                 </Path.Data>
14                             </Path>
15                         </Canvas>
16                     </Grid>
17                 </ControlTemplate>
18             </Setter.Value>
19         </Setter>
20     </Style>

本文原创出处:http://www.cnblogs.com/PettyHandSome/

欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利

时间: 2024-10-28 16:21:04

WPF 气泡提示框的简单实现的相关文章

纯CSS实现的气泡提示框

<!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"> <html> <head> <meta charset=&quo

Arc Engine 中添加气泡提示框

一.在ArcMap中的定位操作 已知若干点的经纬度坐标,要求在地图中进行定位: 1.通过Tool >Add X Y data 定位点,注意选择地理坐标系下的wgs 1984坐标系: 2.定位后的点不能执行查询.分析等操作,需要重新export data: 3.导出的数据最好转换成投影坐标,以便于计算.可首先把已知投影坐标的图层加载到地图中,然后加入第二步产生的点图层,然后将点图层export data,注意坐标系统选择“the data frame” 二.在ArcObject开发时定位的代码示例

可自定义配置箭头的CSS3气泡提示框

今天我们要来分享一款基于纯CSS的气泡提示框,和之前分享的一款jQuery消息提示框插件Tipso类似,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向.这款CSS气泡提示框由纯CSS完成,最大的特点就是可以自定义配置,包括文字颜色.背景颜色和箭头方向等.效果图如下: 在线预览   源码下载 实现的代码. css代码: .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5;

css 气泡提示框

知识点整理之css气泡框 1.气泡框构成——三角形箭头+容器 其中 三角形的实现:上下左右四个方向的三角形实现方式: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>上下左右三角形</title> 6 <sty

气泡提示框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus

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

原文:WPF 气泡尖角在左边.下面.右边.上面 由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow" HorizontalAlignment="Right"> <Path.Data> <PathGeometry Fig

利用 css 制作简单的提示框

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里 html代码: <div id="position"> <div class="position-relative"> <span>提示信息</span> &l

基于Jquery 简单实用的弹出提示框

引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

Android:Toast简单消息提示框

Toast是简单的消息提示框,一定时间后自动消失,没有焦点. 1.简单文本提示的方法: //参数1:当前的上下文环境.this或getApplicationContext() //参数2:提示内容 //参数3:显示的时间长短 Toast toast = Toast.makeText(this, "默认的toast", Toast.LENGTH_LONG); toast.show(); 2.自定义位置的方法: Toast toast = Toast.makeText(this, &quo