如何在選擇TextBlock中的文本的位置顯示彈出按鈕

Question

我想在我的TextBlock添加彈出按鈕，當我在TextBlock中選擇文本時，彈出按鈕將顯示在選定的位置（有點像Microsoft Edge中的“閱讀模式”，當您在閱讀模式下選擇文本時，彈出按鈕顯示單詞的定義）。 但是我不知道如何。 我曾嘗試使用SelectionChanged ，但是此事件傳遞的參數沒有可用於設置flyout 。 那我該怎么辦呢？ 此外，我想知道SelectionFlyout的用途是什么？ 我認為這可以幫助我。 這是我的代碼：

<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>

當我選擇文本時，彈出按鈕永遠不會出現。 顯然我一直在用錯它。 所以我檢查了Microsoft Docs ，它說

獲取或設置在選擇文本時顯示的彈出窗口；如果沒有顯示彈出窗口，則為null。

而且我在網上找不到有關此的任何樣本。

Answer 1

這可以通過將TextBlock IsTextSelectionEnabled設置為True並使用MenuFlyout顯示所選文本來實現。

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

您需要使用RichTextBlock替換TextBlock，並且平台為17134和更舊。

    <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>

SelectionFlyout與您保持聯系。 TextBlock.SelectionFlyout不起作用·問題＃452·Microsoft / microsoft-ui-xaml

github中的所有代碼