CODEWITHSUNDEEP
c#uwp
Nick
Nick

Reputation: 783

How to draw an eye catching horizontal line crossing the text in a textblock in UWP?

I want to do something like this.

enter image description here

The TextStyle attribute doesn't provide something similar. Are there any way to implement this easily?

Update:

Thanks for the answer about using the TextDecoration. However, it is a little too thin and could not be in different color. Is there any more flexible solution?

Upvotes: 0

Views: 202

Answers (2)

Nick
Nick

Reputation: 783

I ended up solved the problem myself. I use binding to draw a custom line over the TextBlock. Line end points are derived from TextBlock size and offset returned by the binding properties.

<TextBlock x:Name="textLabel" Text="HelloWOrld}" Foreground="WhiteSmoke" FontSize="12" FontFamily="Arial" VerticalAlignment="Center" RelativePanel.RightOf="visibleUI" DoubleTapped="OnEditNameBegin"  />
            
<Line Name="crossOutLine"  Stroke="Red" StrokeThickness="4" 
                  X1="{x:Bind LayerData.nameLabelX1, Mode=OneWay}" 
                  Y1="{x:Bind LayerData.nameLabelY1, Mode=OneWay}" 
                  X2="{x:Bind LayerData.nameLabelX2, Mode=OneWay}" 
                  Y2="{x:Bind LayerData.nameLabelY2, Mode=OneWay}"/>

binding part:

public float nameLabelX1 { get => 0; }
public float nameLabelY1 { get => (float)textLabel.DesiredSize.Height /2; }
public float nameLabelX2 { get => (float)textLabel.DesiredSize.Width;}
public float nameLabelY2 { get => nameLabelY1; }

Upvotes: 2

Stefan
Stefan

Reputation: 17658

Note 1: Although this is not what OP wants, I'll keep this for reference.

Note 2: I am also aware "this is not a line (object, red) crossing text". But since the intended graphical output is similar, I opted for this out-of-the-box-solution.

If you don't mind the color, you can use the strikethrough decoration:

<TextBlock TextDecorations="Strikethrough">Hellow World</TextBlock>

See: https://learn.microsoft.com/en-us/uwp/api/windows.ui.text.textdecorations?view=winrt-20348

Upvotes: 0

Related Questions