开发者

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/he开发者_StackOverflow社区ight 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.


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

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

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


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜