How to show a flyout in where the text in a TextBlock is selected

Question

I want to add a flyout to my TextBlock , and when I select the text in the TextBlock, the flyout will show up at the selected (kind of like Reading Mode in Microsoft Edge, when you select the text in reading mode, there will be a flyout show the word's definition). But I don't know how. I've tried using the SelectionChanged , but the parameters that this event passes don't have an position that I can use to set the flyout . So how can I do that? Besides, I'm wondering what SelectionFlyout is for? I thought it could help me. Here was my code:

<TextBlock x:Name="webviewtest" Grid.Row="1" Text="This is a select-flyout test." FontSize="300" IsTextSelectionEnabled="true" >
    <TextBlock.SelectionFlyout>
        <Flyout>
            <TextBlock Text="this is the flyout"></TextBlock>
        </Flyout>
    </TextBlock.SelectionFlyout>
</TextBlock>

And when I selected text, the flyout never showed up. It's obviously that I have been using it wrong. So I checked the Microsoft Docs and it said

Gets or sets the flyout that is shown when text is selected, or null if no flyout is shown.

And I can't find any samples about this online.

Answer 1

This is achievable by setting the TextBlock IsTextSelectionEnabled to True and by using a MenuFlyout to display the selected text.

XAML

    <TextBlock x:Name="webviewtest" Text="This is a select-flyout test." FontSize="100"  IsTextSelectionEnabled="True" RightTapped="webviewtest_RightTapped">
        <FlyoutBase.AttachedFlyout>
            <MenuFlyout x:Name="Flyout">
                <MenuFlyout.Items>
                    <MenuFlyoutItem x:Name="FlyItem" Text="">
                    </MenuFlyoutItem>
                </MenuFlyout.Items>
            </MenuFlyout>
        </FlyoutBase.AttachedFlyout>
    </TextBlock>

C#

    private void webviewtest_RightTapped(object sender, RightTappedRoutedEventArgs e)
    {
        TextBlock tb = sender as TextBlock;

        if (tb.SelectedText.Length > 0)
        {
            Item.Text = tb.SelectedText;
        }
        // Show at cursor position
        Flyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));
    }

Answer 2

You need to use RichTextBlock to replace TextBlock and the platform is 17134 and laster.

    <RichTextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   IsTextSelectionEnabled="True">
        <RichTextBlock.ContextFlyout>
            <Flyout>
                <TextBlock Text="flyout" />
            </Flyout>
        </RichTextBlock.ContextFlyout>
        <RichTextBlock.SelectionFlyout>
            <Flyout>
                <TextBlock Text="this is the flyout" />
            </Flyout>
        </RichTextBlock.SelectionFlyout>
        <Paragraph>
            welcome to blog.lindexi.com that has many blogs
        </Paragraph>
    </RichTextBlock>

The SelectionFlyout is work in touch. TextBlock.SelectionFlyout doesn't work · Issue #452 · Microsoft/microsoft-ui-xaml

All the code in github