特定の位置にあるUI要素の上にフライアウトを表示

Question

私はgridViewを持っていて、アイテムはかなりシンプルです。それぞれのgridViewItemにボタンがあります。このボタンをクリックすると、gridViewItemと同じ内容のフライアウトを表示したいだけでなく、さらにいくつかのデータを表示します。これは簡単ですが、gridViewItemの上にフライアウトを配置して、gridViewItemアイテムと同じ位置に項目を表示させたいとします。

このテクニックは、Storeアプリfor Windows 10で使用されています。 moreをクリックするとそのポップアップが表示されます。あなたが使用することができます

Answer 1

Flyout.ShowAtがそれを示していますが、位置を与える必要があります。

DataTemplateでRightTapped="GridColection_OnRightTapped"を試してみてください。または、ボタンのクリックを使用します。

GridColection_OnRightTappedでは、e.GetPositionを使用して位置を取得できます。

あなたがUIElementから位置を取得したい場合は、画面のCOORDSを取得するためのコードを使用することができます：

 var t = UIElement.TransformToVisual(Window.Current.Content); 
     Point screenCoords = t.TransformPoint(new Point(0, 0)); 

のUIElementは、あなたのGridViewItemです。コードで

：

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)); 
} 

を参照してください：あなたは中国を読み取ることができる場合は、WebBlogとthisを参照してください。How to get the absolute position of an element?

。