Question

For a project I’m working on I want to create an on-screen keyboard. So I like to put a character on a button. But the problem with doing this is that I can’t manage to get the character in full size and centered on the button. Somehow it seems to have some space above and under the character which i don’t want in this case.

The code i use currently for a button is this:

<Button Grid.RowSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="40" Height="40" VerticalContentAlignment="Center">
        <Button.Background>
            <SolidColorBrush Color="Gray" Opacity="0.3" />
        </Button.Background>

        <Button.Content>
            <Viewbox>
                <TextBlock FontSize="40" FontFamily="Monotype Corsiva" Foreground="Red" Text="i" LineHeight="20px" LineStackingStrategy="BlockLineHeight" />
            </Viewbox>
        </Button.Content>
    </Button>

The result at the moment is this;

Click

Does anybody know how to show the character in full size and centered on the button?

Answer 1

This will resize the text automatically with the button.

<Viewbox>
    <TextBlock Margin="-2,0,0,0"
               Padding="0"
               FontFamily="Monotype Corsiva"
               Foreground="Red"
               Text="i"
               LineStackingStrategy="BlockLineHeight" />
</Viewbox>

I think the character looks like it is off-centre because of the font you’re using. I adjusted the position by setting the left value of the margin to a negative value (ie: Margin="-2,0,0,0").