CODEWITHSUNDEEP
c#wpf.net-3.5
Jem
Jem

Reputation: 2275

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

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.

Upvotes: 5

Views: 5531

Answers (3)

Fredrik Hedblad
Fredrik Hedblad

Reputation: 84657

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

enter image description here

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));
}

Upvotes: 5

Alex Zhevzhik
Alex Zhevzhik

Reputation: 3397

You could check out Charles Petzold's article "Render Text on a Path with WPF". Unfortunately I can't refresh my knowledges about subject at present moment due to something goes wrong with MSDN site, but he described how to scale text within path.

Upvotes: 0

Robert Levy
Robert Levy

Reputation: 29073

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

Upvotes: 4

Related Questions