[英]How to show a flyout in where the text in a TextBlock is selected
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). 我想在我的
TextBlock
添加弹出按钮,当我在TextBlock中选择文本时,弹出按钮将显示在选定的位置(有点像Microsoft Edge中的“阅读模式”,当您在阅读模式下选择文本时,弹出按钮显示单词的定义)。 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
. 我曾尝试使用
SelectionChanged
,但是此事件传递的参数没有可用于设置flyout
。 So how can I do that? 那我该怎么办呢? Besides, I'm wondering what
SelectionFlyout
is for? 此外,我想知道
SelectionFlyout
的用途是什么? 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
所以我检查了Microsoft Docs ,它说
Gets or sets the flyout that is shown when text is selected, or null if no flyout is shown.
获取或设置在选择文本时显示的弹出窗口;如果没有显示弹出窗口,则为null。
And I can't find any samples about this online. 而且我在网上找不到有关此的任何样本。
This is achievable by setting the TextBlock IsTextSelectionEnabled
to True
and by using a MenuFlyout
to display the selected text. 这可以通过将
TextBlock IsTextSelectionEnabled
设置为True
并使用MenuFlyout
显示所选文本来实现。
XAML 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# 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));
}
You need to use RichTextBlock to replace TextBlock and the platform is 17134 and laster. 您需要使用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>
The SelectionFlyout is work in touch. SelectionFlyout与您保持联系。 TextBlock.SelectionFlyout doesn't work · Issue #452 · Microsoft/microsoft-ui-xaml
TextBlock.SelectionFlyout不起作用·问题#452·Microsoft / microsoft-ui-xaml
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.