2019-9-2-win10-uwp-右击浮出窗在点击位置

title	author	date	CreateTime	categories
win10 uwp 右击浮出窗在点击位置	lindexi	2019-09-02 12:57:38 +0800	2018-2-13 17:23:3 +0800	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)); 如果需要显示在某个控件，就拿到控件的坐标
    }

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