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)); 如果需要显示在某个控件，就拿到控件的坐标
    }

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