WPF Popup弹出框箭头自动定位效果

在WPF中如何做到,点击按钮,弹出一个带箭头的消息框,箭头对准按钮,效果如图所示。

XAML代码

        <Button Grid.Row="1" Grid.Column="1" x:Name="button" Content="..." HorizontalAlignment="Right" Margin="0,0,100,0" VerticalAlignment="Top" Click="button_Click" Width="10"/>
        <Popup x:Name="Popup1" IsOpen="False" StaysOpen="True" PlacementTarget="{Binding ElementName=button}" AllowsTransparency="True" Placement="Center" HorizontalOffset="0" VerticalOffset="36">
            <Grid Width="200" Background="Transparent" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"></RowDefinition>
                    <RowDefinition Height="50"></RowDefinition>
                </Grid.RowDefinitions>
                <Border Grid.Row="0" Background="Transparent">
                    <Canvas Background="Transparent">
                        <TextBlock x:Name="TextBlock1" Background="Transparent" Canvas.Left="0" Canvas.Top="0" Padding="0 1.1 0 0" FontSize="20" Foreground="Blue">^</TextBlock>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Background="BurlyWood" BorderThickness="1" BorderBrush="#ccc">
                    <TextBlock>123456789abcdefghijklmnopqrstuvw</TextBlock>
                </Border>
            </Grid>
        </Popup>

  CS代码

        public MainWindow()
        {
            InitializeComponent();
            Popup1.Opened += Popup1_Opened;
            Popup1.Closed += Popup1_Closed;
        }

        private void Popup1_Closed(object sender, EventArgs e)
        {
            TextBlock1.SetValue(Canvas.LeftProperty, (double)0);
        }

        private void Popup1_Opened(object sender, EventArgs e)
        {
            Point point = button.TranslatePoint(new Point(0, 0), this);
            Point point2 = TextBlock1.TranslatePoint(new Point(0, 0), this);
            TextBlock1.SetValue(Canvas.LeftProperty, point.X - point2.X);
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            Popup1.IsOpen = true;
        }

  看代码其实很简单,只是没想到办法,突然想到了就写一个简单的例子做演示。

原文地址:https://www.cnblogs.com/chengNet/p/11632675.html

时间: 2024-11-12 12:25:56

WPF Popup弹出框箭头自动定位效果的相关文章

jquery实战——弹出框拖拽效果

今天主要记录一下弹出框拖拽效果: 一.移动弹出窗口的步骤是:按下鼠标左键——移动鼠标——松开鼠标左键停止移动 二.主要思想: 按下鼠标左键:$('div').mousedown(function(e){}) 移动鼠标,获取鼠标当前坐标值:$(document).mousemove(function(e){}) 松开鼠标左键停止移动:$('div').mouseup(function(e){ $(document).unbind('mousemove');  //即当鼠标左键被释放时解除mouse

自定义popup弹出框

ys_popup.css .ys-popup{     position:fixed;     top:0;     bottom:0;     left:0;     right:0;     display:none;     z-index: 99999;     background-color: rgba(0,0,0,0.4); } .ys-popup .ys-popup-content{     position:absolute;     left:30px;     right:

实现网页弹出框后背景不能滑动的效果

我们经常写遮罩层弹出框之类的效果,但是小编最近发现弹出框出现后,它覆盖的背景内容信息却可以滑动,体验很不好,那么如何禁止背景滑动 很简单的属性 弹出框出现后将body设为hidden document.body.style.overflow = "hidden"; 当关闭弹出框的时候body设为auto document.body.style.overflow = "hidden"; 这样就可以实现效果了,一般都是动态添加根据你的事件需求设置body的overflo

BootStrap学习笔记JS插件(一)--模态弹出框

一.弹出框基础 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss=&quo

可消失的弹出框

通过使用 focus 触发器可以在用户点击弹出框是让其消失. 实现"点击并让弹出框消失"的效果需要一些额外的代码 为了更好的跨浏览器和跨平台效果,你必须使用 <a> 标签,不能使用 <button> 标签,并且,还必须包含 tabindex 属性. <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle=&qu

bootstrap 弹出框点击其他区域时弹出框不消失选项设置

默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可能会带来很不好的体验效果,所以,我们会希望不会发生这种情况,事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果.如下所示: <div class="modal fade" id="myModal" tabindex=&quo

安卓开发笔记——PopupWindow,做出如弹出框效果

先看一个效果图 点击按钮后出现一个这么的效果,这个弹出框实现的答题代码如下 先来一个弹出框的布局xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent"

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户

Axure 动态面板实现弹出框效果

今天在画原型图的时候遇到了个弹出框效果的实现,感觉挺有意思的,拿出来share下~ 如图:当我点击删除按钮后,如果用户选择删除,则要求要弹出一个对话框来让用户输入处理备注,如果不要删除,则点击取消: 首先描述下大致思路,我在页面上加上一个动态面板,然后为这个动态面板加上两个状态,一个是显示弹出框,另一个是隐藏弹窗口. 下面是弹出对话框的两个状态的设计: 隐藏状态的动态面板设置为空白,这样当切换到这个状态时就看不到任何东西. 然后为删除按钮添加用例: 注意,这里是当发生单击事件的时候弹出动态面板,