How to customise style Hyperlink

Abstract

All Hyperlink are created as CHyperlink which can customise class your self. Markdown.Avalonia treat title as class.

[alt](imageurl "title")

PseudoClasses

CHyperlink support pseudoclasses. We can use ':hover', ':pointerover' and ':pressed'.

':hover' is same to ':pointerover'. According to official document, :pointerover may be replaced to :hover in the future.

Example

Style

<!--
    xmlns:ctxt="clr-namespace:ColorTextBlock.Avalonia;assembly=ColorTextBlock.Avalonia"
-->

<Style Selector="ctxt|CHyperlink">
    <Setter Property="IsUnderline" Value="True"/>
    <Setter Property="Foreground" Value="Blue"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="BorderBrush" Value="Blue"/>
    <Setter Property="BorderThickness" Value="2"/>
</Style>
<Style Selector="ctxt|CHyperlink:pointerover">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="BorderBrush" Value="Red"/>
</Style>
<Style Selector="ctxt|CHyperlink:pressed">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="BorderBrush" Value="DarkBlue"/>
</Style>

<Style Selector="ctxt|CHyperlink.green">
    <Setter Property="IsUnderline" Value="True"/>
    <Setter Property="Foreground" Value="Green"/>
    <Setter Property="BorderBrush" Value="Green"/>
</Style>
<Style Selector="ctxt|CHyperlink.green:hover">
    <Setter Property="Foreground" Value="Yellow"/>
    <Setter Property="BorderBrush" Value="Yellow"/>
</Style>

Markdown

[hyperlinki1](http://example.com)

[hyperlinki1](http://example.com "green")

View

Support Styles

Basic

• Foreground
• Background
• FontFamily
• FontWeight
• FontSize
• FontStyle
• BorderThickness
• BorderBrushProperty
• CornerRadiusProperty
• BoxShadowProperty
• PaddingProperty
• MarginProperty

Others

• IsUnderline

  If true is set, draw line under the text.

• IsStrikethrough

  If true is set, draw strikethrough in the text.

• HoverBackground

  Background color when mouse hover. If you set it, Background in ':pointerover' is ignored.

• HoverForeground

  Foreground color when mouse hover. If you set it, Foreground in ':pointerover' is ignored.