How do I make an asterisk line up with surrounding text in WPF?

Question

I'm trying to make an asterisk line up vertically with surrounding text/graphics rather than above it.

I thought applying a negative BaselineOffset would be the solution, but it seems to have no effect.

Here's the documentation for the TextBlock.BaselineOffset property:

Property Value Type: System.Double

The amount by which each line of text is offset from the baseline, in device independent pixels. Double.NaN indicates that an optimal baseline offset is automatically calculated from the current font characteristics. The default is Double.NaN.

Remarks

The baseline is the imaginary horizontal line with which the base of each character in a > line of text is aligned.

Sample markup:

<TextBlock
    Name="ReadUnreadIndicator"
    Grid.Column="0"
    VerticalAlignment="Center"
    FontWeight="Bold"
    FontSize="24"
    BaselineOffset="-10"
    Text="*" />

No matter what I put for BaselineOffset, the asterisk always appears "superscript".

Questions:

1. Why isn't BaselineOffset working for me? Am I using it wrong or is it a bug in the framework?

2. How can I move the asterisk downward without using margin (which would create space above the TextBlock that I don't want)?

Answer 1

As far as I know the TextBlock.BaselineOffset only affects a TextBlock inside another TextBlock:

<TextBlock>Some text <TextBlock BaseLineOffset="10" Text="*"/></TextBlock>

Adjusting BaseLineOffset allows you to move the asterisk vertically in relation to "Some Text". Note that the default BaseLineOffset indicated by Double.NaN is different from 0 and you probably need a positive offset to avoid moving the asterisk too far down.

But as you have indicated in your comment using the BaseLineOffset isn't a good solution. The problem seems to be that the asterisk glyph isn't placed to your liking. I would suggest that you switch to your own glyph drawn in WPF with the proper placement and looks and than place that next to the text using something like a StackPanel to line them up.

Answer 2

This seems to align the asterisk properly:

<TextBlock
    Grid.Column="0">
    <TextBlock
        Name="ReadUnreadIndicator"
        BaselineOffset="30"
        FontFamily="Courier New"
        FontSize="24"
        FontWeight="Bold"
        Text="٭" />
</TextBlock>

The Text is actually an "Arabic Five Pointed Star" (U+066D) rather than an asterisk, but it looks very similar.

I have no idea why the BaselineOffset needs to be "30" to work properly. It clearly isn't moving the text up by 30 pixels--it moves it up maybe 2 or 3 pixels.

Answer 3

Here's what I ended up going with:

<TextBlock
    Name="ReadUnreadIndicator"
    Grid.Column="0"
    Margin="0,5,0,-5"
    FontSize="24"
    FontWeight="Bold"
    Text="*" />

Thanks to @Martin & @Gimalay for the help.