Rendering text in WPF so that it perfectly fits in a given rectangle

Question

I need to display words on a WPF Canvas in such a way that they perfectly fit in pre-defined boxes.

One box typically contains a single line of text, from one letter to a few words.

The text inside a box must be as large as possible, i.e: touching all borders of the box (except maybe where it would cause too much text distortion due to abnormal box witdh/height ratio).

I could not find a good way to calculate the appropriate font height, scaling and offset, based on the text content.

A first solution where the original text width/height ratio can't be changed would already be very nice !

I'd like to use TextBlock elements, but anything else that works should be ok.

Answer 1

As the answer by Robery Levy said, you can use a Viewbox to achieve this. The text itself won't stretch however so you'll still have some "margin" on zero or more sides depending on your text (as you noticed). To work around this you can create a custom control which builds a Geometry from a FormattedText and then draw this with DrawGeometry in OnRender. You'll notice how the quality of the text improves with a larger FontSize. A very small text (e.g. FontSize="10") won't look very sharp in a large Viewbox so you'll have to experiment a bit

Some sample Xaml

<Canvas Background="Black">
    <Viewbox Canvas.Left="10" Canvas.Top="10"
             Stretch="Fill" Width="200" Height="50">
        <Border Background="Red">
            <local:StretchText Text="Text" Foreground="Green" FontSize="100"/>
        </Border>
    </Viewbox>
    <Viewbox Canvas.Left="230" Canvas.Top="10"
             Stretch="Fill" Width="200" Height="50">
        <Border Background="Red">
            <local:StretchText Text="B" Foreground="Green" FontSize="500"/>
        </Border>
    </Viewbox>
</Canvas>

StretchText.cs

public class StretchText : Control
{
    protected override void OnRender(DrawingContext drawingContext)
    {
        FormattedText formattedText = new FormattedText(
            Text,
            CultureInfo.GetCultureInfo("en-us"),
            FlowDirection.LeftToRight,
            new Typeface(FontFamily, FontStyle, FontWeight, FontStretches.Normal),
            FontSize,
            Foreground);

        Geometry textGeometry = formattedText.BuildGeometry(new Point(0, 0));
        this.MinWidth = textGeometry.Bounds.Width;
        this.MinHeight = textGeometry.Bounds.Height;

        TranslateTransform translateTransform = new TranslateTransform();
        translateTransform.X = -textGeometry.Bounds.Left;
        translateTransform.Y = -textGeometry.Bounds.Top;
        drawingContext.PushTransform(translateTransform);
        drawingContext.DrawGeometry(Foreground, new Pen(Foreground, 1.0), textGeometry);
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text",
        typeof(string),
        typeof(StretchText),
        new FrameworkPropertyMetadata(string.Empty, FrameworkPropertyMetadataOptions.AffectsRender));
}

Answer 2

Put the TextBlock inside a Viewbox: http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx