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="> "/>
<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>
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.
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.
TextBlock is not editable. Use TextBox instead. Save this answer. Show activity on this post.
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.
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)
<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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With