When it comes to text handling in WPF, you have a massive range of tools available, some of which can offer you a level of granularity that was previously unachievable. I plan to write about some of these text tools, such as Spans, Runs and Glyphs in future blogs, but for today I want to look at something a little less deep.
Recently I needed to insert a carriage return in a block of text. The text was being created in the XAML markup, and I didn't particularly want to resort to code-behind for what is essentially a UI feature. So I had to do a bit of digging to find how I could create, for instance, this result:-
where, if I don't override it, the two words would be placed one after the other on one line because there is more than enough width for them both.
As you might expect, there are several ways of achieving this, but I think the easiest one is to use a LineBreak element. This snippet shows the key part of the code that creates and formats the Button's Content, which in this example is of course text only.
<Button Margin="12,45" >
<TextBlock> Click <LineBreak/> Me!</TextBlock>
</Button>
You might think it a bit strange when you see that XML type item stuck into the middle of a block of text, but this is perfectly valid syntax. Because the Content isn't a single block of text, it's necessary to use the TextBlock to house the text and the LineBreak instruction.
Actually, what I really wanted to do wasn't quite as plain as the above screenshot. It was more along these lines:-
The markup for this is still not particularly complex. It just requires more properties to be set specifically:
<Button Margin="12,45" Background="LightSkyBlue">
<Button.Content>
<TextBlock TextAlignment="Center" FontSize="16" FontFamily="Calibra"
FontWeight="Bold" Foreground="Navy" FontStyle="Italic" >
Click <LineBreak/> Me!</TextBlock>
</Button.Content>
</Button>
I did mention that there are several ways and these include using a StackPanel containing multiple TextBlocks or setting the Padding property on a single TextBlock. An alternative you might consider is to preserve the whitespace. This effectively means that however you enter the text layout in your XAML will be faithfully reproduced in the WPF display.
The following markup:
<Button Margin="12,40">
<TextBlock FontSize="14" VerticalAlignment="Center"
HorizontalAlignment="Center" xml:space="preserve">Click
Me!</TextBlock>
</Button>
will achieve a similar result:
However, I really don't think the way the Markup sits in the XAML markup window is particularly neat. If you're interested in experimenting, try moving the word "Me!" so that it is more neatly aligned. Or Start the word "Click" on a new line of its own, maybe aligned with the markup above it.
The results are unlikely to be what you wanted to achieve and this is because the preservation is absolute. A XAML twist on WYSIWYG!
However, I included it here because the space preserve approach will be very useful to you in those cases where you want more than a single space between words or characters. Simply type out the text with the exact spacing that you require, set the XML Space attribute to Preserve and your requirements will be honored.
<Button Margin="12,40">
<TextBlock FontSize="14" VerticalAlignment="Center"
HorizontalAlignment="Center"
xml:space="preserve">Name: Ged</TextBlock>
</Button>
