Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change the distance between text and underline in a WPF TextBlock?

I have a style guide from a designer for a button that looks like a hyperlink and I am trying to get as close to it as I can with WPF styles.

But I haven't been able to change the distance between the text and the underline. I wanted to add images for comparision but unfortunately I haven't earned enough points to do so far.

Is there a way to change the distance between text and underline?

Here is the XAML code I have so far:

<Style x:Key="LinkButton" TargetType="ButtonBase">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="&gt; "/>
                    <TextBlock TextDecorations="Underline">
                        <ContentPresenter/>                        
                    </TextBlock>
                </StackPanel>                 
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="{StaticResource LxGrayBrush}"/>
    <Setter Property="FontSize" Value="12"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="{StaticResource LxGreenBrush}"/>
        </Trigger>
    </Style.Triggers>
</Style>
like image 560
Andy B. Avatar asked Sep 28 '12 11:09

Andy B.


People also ask

How do you underline TextBlock in WPF?

You can break the text with <Run> tag and then surround only the text part that you want underlined with <Underline>. Example: <Run Text="This is a "/> <Underline><Run Text="good "/></Underline> <Run Text="solution.

How do I create a line break in TextBlock WPF?

Adding Line Breaks You can do this with a LineBreak inline, added as an XAML element within the text. A new line will be started at the position of this element. If you have configured the text to be justified, the final line before the line break will not be expanded to fill the available width.

Is TextBlock editable?

TextBlock is not editable. Use TextBox instead. Save this answer. Show activity on this post.

What is text block in WPF?

The TextBlock control provides flexible text support for UI scenarios that do not require more than one paragraph of text. It supports a number of properties that enable precise control of presentation, such as FontFamily, FontSize, FontWeight, TextEffects, and TextWrapping.


2 Answers

Use element syntax to add an instance of TextDecoration to the TextBlock.TextDecorations, then you can adjust the Location or PenOffset.

<TextBlock>
    <TextBlock.TextDecorations>
        <TextDecoration Pen="..." Location="..."/>
    </TextBlock.TextDecorations>
</TextBlock>

(You may need to set the Pen via element syntax as well)

like image 195
H.B. Avatar answered Oct 18 '22 19:10

H.B.


<TextBlock >
    Here is my text to be displayed 
    <TextBlock.TextDecorations>
        <TextDecoration PenOffset="3" PenOffsetUnit="Pixel"/> 
    </TextBlock.TextDecorations>
</TextBlock>

Adjusting PenOffset would increase/decrease the gap between text and the line.

like image 1
Shrikant S Avatar answered Oct 18 '22 19:10

Shrikant S