win10 uwp 右击浮出窗在点击位置

如果需要让 Flyout 显示在指定的位置,那么请看本文。 本文主要让 MenuFlyout 出现在我们右击位置。

我们一般使用的 MenuFlyout 写在前台,写在 Button 里面,但是可能我们的 MenuFlyout 显示的位置和我们想要的不一样。

也可能是为了使用 ToggleButton ,而他里面没有 FLyOut ,需要使用基类来写,所以这时就需要在其他控件写的 Flyout 放在指定控件的显示。如果需要获得控件的坐标,请看 win10 uwp 获得元素绝对坐标。本文使用的方法是在 后台代码使用 MenuFlyout ,然后在后台进行显示,需要知道的是,这个方法不能直接在前台完成。

通过使用后台写ShowAt的方法,我们可以通过 e.GetPosition 获得鼠标点击位置,需要对函数传入相对的元素,这个元素一般可以用我们点击使用的元素,也可以使用我们的最外层Grid,这样我们就可以获得了鼠标位置,也就可以显示我们的 MenuFlyout 在点击位置。

我们建一个ListView,然后绑定后台,在我们ListView要右击显示我们的浮出,要求我们的浮出在我们点击位置。

MenuFlyout可以在后台写,当然写在前台也可以,但是让他显示在指定位置的就必须在后台代码写。

我们下面的代码写在后台,我们可以选择 Placement 显示在我们元素的位置,但这不是我们鼠标点击的位置,要显示我们鼠标点击的位置,其实也很简单。我们可以从e.GetPosition(sender as UIElement)获得鼠标位置,把这个给MenuFlyout我们的浮出显示在我们鼠标点击位置。

<ListView ItemsSource="{x:Bind View.Str}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment"
                                    Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
        
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="#FFda2a5c" RightTapped="GridColection_OnRightTapped">
                    <TextBlock Text="{Binding}"></TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

后台写获取鼠标位置、把浮出窗放在鼠标位置

   private void GridColection_OnRightTapped(object sender, RightTappedRoutedEventArgs e)
    {
        MenuFlyout myFlyout = new MenuFlyout();
        MenuFlyoutItem firstItem = new MenuFlyoutItem { Text = "OneIt" };
        MenuFlyoutItem secondItem = new MenuFlyoutItem { Text = "TwoIt" };
        myFlyout.Items.Add(firstItem);
        myFlyout.Items.Add(secondItem);

        //if you only want to show in left or buttom 
        //myFlyout.Placement = FlyoutPlacementMode.Left;
        
        FrameworkElement senderElement = sender as FrameworkElement;
        //the code can show the flyout in your mouse click 
        myFlyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement)); 如果需要显示在某个控件,就拿到控件的坐标
    }

于是上面的代码就可以做出下面的这张图,点击的时候显示浮出,在点击的位置。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏yuezhongbao积累

移动端bug汇总(一)

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

40013
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

3224
来自专栏二次元

用CSS3绘制iPhone手机

本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《用CSS3绘制iPhone手机》

1340
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2896
来自专栏向治洪

React Native之常用第三方库

前言 React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有...

4339
来自专栏达摩兵的技术空间

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。

1304
来自专栏程序员的知识天地

移动web端常见bug

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

1243
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

2954
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

9966
来自专栏BestSDK

5分钟掌握8个常用交互组件,轻松进阶原型设计

一、弹出菜单 弹出菜单是原型设计中最常用的组件,许多组件的使用方法也与它类似,熟练使用弹出菜单将会给您带来莫大的帮助。接下来我们从实际案例来看一看如何使用弹出菜...

39610

扫码关注云+社区

领取腾讯云代金券