TextBlock text underline with different color when mouse over

Question

I would like to color a Textblock text with a different color than the font color when the mouse is over text.

How to do that other than creating a custom control?

<TextBlock Text="5000.00" FontSize="20" >
            <!--<TextBlock.TextDecorations>
                <TextDecoration Location="Underline">
                    <TextDecoration.Pen>
                        <Pen Brush="Green"></Pen>
                    </TextDecoration.Pen>
                </TextDecoration>
            </TextBlock.TextDecorations>-->
       <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <Trigger Property ="IsMouseOver" Value="True">
                        <Setter Property= "Foreground" Value="Black"/>
                        <Setter Property="TextDecorations" Value="Underline" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>

What have you tried? Someone will be more likely to help you if you show that you have made an effort. You can edit your question to add the code you have tried and the results when you run that code, including any errors. — Theresa, Dec 15 '17 at 19:53

score 0 · Accepted Answer · answered Dec 15 '17 at 22:33

<TextBlock Text="5000.00" FontSize="20" >
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <Trigger Property ="IsMouseOver" Value="True">
                    <Setter Property="TextDecorations">
                        <Setter.Value>
                            <TextDecorationCollection>
                                <TextDecoration Location="Underline">
                                    <TextDecoration.Pen>
                                        <Pen Brush="Red"/>
                                    </TextDecoration.Pen>
                                </TextDecoration>
                            </TextDecorationCollection>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property ="IsMouseOver" Value="False">
                    <Setter Property="TextDecorations">
                        <Setter.Value>
                            <TextDecorationCollection>
                                <TextDecoration Location="Underline">
                                    <TextDecoration.Pen>
                                        <Pen Brush="LimeGreen"/>
                                    </TextDecoration.Pen>
                                </TextDecoration>
                            </TextDecorationCollection>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

Thank You. This works. I missed "TextDecorationCollection" element when I tried. — Dhan, Dec 18 '17 at 15:51

TextBlock text underline with different color when mouse over

1 Answers1