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
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.
精彩评论