Clickable TextBlock Inlines

[gebodal]

Hello all,

I'm porting a WPF application over to Avalonia (and have asked a couple of questions already, thank you for the help so far), and have hit another snag:

In WPF, I had a little class for styling a TextBlock Run with colour and underline (on mouse over), and could add delegates to the MouseLeftButtonDown event that is raised on the Run itself.

In Avalonia, the Inline types don't seem to support pointer interaction (I'm on 11.0.10), but the release notes say that hyperlinks are a new feature of the Inlines, so I would assume they do? Something similar has been asked before, but without a clear answer.

What is the best way of reproducing this behaviour in Avalonia? Should I use an InlineUIContainer and create a button? Can this be done with some events I'm not aware of? (How does one assign OnPointerEnter/Leave styling from code-behind??)

Any suggestions are greatly appreciated.

public class ClickableRun : Run {

	public ClickableRun() : base() { Initialize(); }
	public ClickableRun(string text) : base(text) { Initialize(); }
	public ClickableRun(string text, TextPointer insertionPosition) : base(text, insertionPosition) { Initialize(); }

	private void Initialize() {
		this.Foreground = MyStaticStyleManagerClass.HyperlinkColor;
	}

	protected override void OnIsMouseDirectlyOverChanged(DependencyPropertyChangedEventArgs e) {
		base.OnIsMouseDirectlyOverChanged(e);

		if (IsMouseDirectlyOver) {
			this.TextDecorations = System.Windows.TextDecorations.Underline;
			this.Cursor = Cursors.Arrow;
		}
		else {
			this.TextDecorations = null;
			this.Cursor = null;
		}
	}

}

[stevemonaco]

Run does not derive from InputElement, so it doesn't allow for pointer events. Until the Hyperlink inline is introduced in the future, you can use HyperlinkButton. Even so, the Fluent theme always has its content underlined unless you make some adjustments. ie.

<Window.Styles>
    <Style Selector="HyperlinkButton">
        <Setter Property="TextBlock.TextDecorations" Value="" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
    </Style>
    <Style Selector="HyperlinkButton:pointerover">
        <Setter Property="TextBlock.TextDecorations" Value="Underline" />
    </Style>
</Window.Styles>

<TextBlock>
    <Run Text="This has no underline," />
    <InlineUIContainer>
        <HyperlinkButton Content="but this does when hovered" />
    </InlineUIContainer>
    <Run Text="and back to not" />
</TextBlock>

If you're trying to dynamically highlight, then you need to parse text for URIs yourself and build inlines.

[gebodal]

Thanks for the help! An InlineUIContainer did indeed do the job. I went for a TextBlock, as it lines up quite well without sticking out too badly (and I did implement a PointerEnter/PointerExit event to change the styling myself - worked great!

[Pratham95VP]

I prefer using an InlineUIContainer and hosting a TextBlock or Button inside it. This will allow you to handle pointer events and apply styling as needed.

[gebodal]

Yes, a TextBlock worked great! I thought it wouldn’t format correctly inside the container, but it’s not noticeable, so it works great!