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.

[TextBlock.SelectionFlyout doesn't work · Issue #452 · Microsoft/microsoft-ui-xaml](https://github.com/Microsoft/microsoft-ui-xaml/issues/452 ) — lindexi, Mar 23 '19 at 01:24

Adam McMahon · Answer 1 · 2019-03-13T16:50:39.833

0

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

edited Mar 13 '19 at 16:50

answered Mar 13 '19 at 11:07

Adam McMahon

765
3
24

Sorry, I had mistakenly deleted the `IsTextSelectionEnabled` property in the question, I had that Property in my code. And this is not the solution. I've try your method. First, the flyout showed up at the TextBlock, but not at the selected text . It might sounds confusing, I should say I would want it to show up at where my cursor is. Second, the flyout showed up after the text was highlighted, because the `SelectionChanged` fired before the highlighting. I've tried to use 'Tapped' events. but since my TextBlock is selectable, no 'Tapped' event fired except the `RightTapped` event. – Hongjia Mar 13 '19 at 15:50
1

Ah I see your issue now. What is wrong with using `RightTapped` event? You can certainly get the cursor position from that. There needs to be a user action (i.e. tapped, double tapped, right tapped) after the text is selected for this to work the way you want it to. I'll update my answer based on this just in case it may help you or somebody in the future. – Adam McMahon Mar 13 '19 at 16:47
Because `RightTapped` requires right tapping, which is not the way I want to show the flyout. What I want to achieve is showing up a flyout after the some text selected and mouse (or finger) released, – Hongjia Mar 14 '19 at 00:53
@Hongjia you can use TextBlock.SelectionChanged – lindexi Mar 23 '19 at 01:48

score 0 · Answer 2 · answered Mar 23 '19 at 02:36

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

But the `flyout` shows up when I do a right-click or a Long-Press touch, is there anyway that the `flyout` show up right after I select the text and highlighted, or just do a simple touch using touchscreen? — Hongjia, Mar 27 '19 at 03:18
https://blog.lindexi.com/post/win10-uwp-%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89-richtextblock-%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95 — lindexi, Mar 27 '19 at 03:23

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

2 Answers2

Linked