Odd TextBlock alignment in a ViewBox

Question

I'm trying to center a digit in a ViewBox, and I'm getting extremely frustrating results. I've tried centering it using TextAlignment, HorizontalAlignment, VerticalAlignment, etc... When I get one digit to center correctly (for example, 3) another is off center (for example, 4):

As you can see I use the following:

    <Border x:Name="bdrMain" Background="#FF0095E2">
        <Grid>
            <Viewbox Stretch="Uniform">
                <Ellipse x:Name="elpRing" Stroke="White" Margin="1" StrokeThickness="0.75" Width="12" Height="12"/>
            </Viewbox>

            <Viewbox Stretch="Uniform">
                <TextBlock x:Name="txtValue" FontFamily="Assets/Fonts/HelveticaNeueLTStd-Th.otf#HelveticaNeueLT Std Thin" Text="3" FontWeight="Thin"/>
            </Viewbox>
        </Grid>
    </Border>

Anyone know why the centering is so difficult ???

Answer 1

When using ViewBox for stuff like that, it's much easier to work with large elements and have the view box reduce the size. Also, having one view box that enlarges (or reduces) the size of one element is easier to compose (also, more efficient at run-time).

Try this:

<Border x:Name="bdrMain"
        Background="#FF0095E2">
    <Viewbox>
        <Grid>
            <Ellipse x:Name="elpRing"
                        Stroke="White"
                        StrokeThickness="2"
                        Width="32"
                        Height="32" />

            <TextBlock x:Name="txtValue"
                        Margin="1,2,0,0"
                        FontFamily="Assets/Fonts/HelveticaNeueLTStd-Th.otf#HelveticaNeueLT Std Thin"
                        Text="3"
                        FontSize="32"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />

        </Grid>
    </Viewbox>
</Border>

I don't have the font currently on my machine, so tweak margins on the text block to center it. You can go to 64x64 in the size of the ellipse - enlarge stroke thickness to 4 and font size on the text block to 64 or thereabout.