does anybody have an idea whether it is possible to define "soft hyphens" or "soft linebreaks" in e.g. a TextBlock's text? Background: I would like to use TextWrapping="Wrap" on a TextBlock, but normally that won't do anything if the text contained in the TextBlock does not contain white space.
E.g.
<TextBlock TextWrapping="Wrap" Text="OneVeryLongWordThatDoesNotContainAnyWhiteSpaceAtAll" />
won't wrap if there is insufficient space. So I thought maybe there is a way to tell TextWrapping where the text may be wrapped.
I tried using the HTML (soft hyphen) entity, but this is not allowed in XAML apparently (won't compile).
Cheers,
Alex
Alex,
what do you mean by "won't wrap if there is insufficient space"? I tried your example code and it actually does wrap (it will break on every single character if necessary) when adding Width="100" or limiting by it's margins etc.
Setting width to 100 i get the following result:
OneVeryLongWor
dThatDoesNotCon
tainAnyWhiteSpa
ceAtAll
When you limit the height (like Height="20"), it won't actually break of course, but you can add TextTrimming="WordEllipsis" to get a result like this:
OneVeryLongW...
But oh well, it doesn't answer your question about Soft Hyphens, they obviously don't work.
Best regards =)
Related
I'm trying to auto scale the font and wrap text in a TextBlock in WPF and I can't figure it out.
I've Googled it and looked at stackoverflow loads of times and the main suggestion is to place a TextBlock inside a ViewBox. I've tried that, and all it does is scale the whole text down to one line instead of wrapping it.
If I just use a TextBlock without a ViewBox it wraps, but doesn't scale to fit. It's driving me mad, as I am literally trying to move from WinForms to WPF to make better looking UIs.
I've tried StackPanel and DockPanel and they still don't have the desired effect.
All I want is a TextBlock to take a string of text of unknown size and display it scaled and wrapped. I don't understand why it's so difficult
It is helpful to include code of what you have tried.
When I do this:
<Grid>
<TextBox VerticalAlignment="Center" TextWrapping="Wrap" Width="100"/>
</Grid>
I get this:
Is that what you are looking for?
You could also check out the RichTextBox if you need more features.
I need to write text in the orientation specified for the image below. The fact is that I saw some examples around here by using a textblock and rotating the angle of the control using "RenderTransform", but this is not what I really need. I tried to do it using an image but it doesn't fit very well... so I really don't know how to solve it. If you look at the image beside you can see that the text is written from bottom to top and the line below the text is in the right of the screen.
This is the screen that I need to develop:
I tried by rotating the textblock, but the only way that it works for me was wrapping the text, but this is just the "closest" solution that I found. Also, as you can see, I need to set a border for the textblock.
Anyway, I hope you can help me because any example around fits with my problem.
In order to rotate your text at 90 degrees, I believe that you will need to use the LayoutTransform instead of the RenderTransform:
<TextBlock Text="FootRoller" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
The difference is when the transform will be applied. Using the LayoutTransform, the text will be rotated before the layout pass and this will be important in your case. I imagine that using the RenderTransform will rotate your TextBlock, but as it does that after the layout pass, it would not show it all... this is because it was measured for size before it was rotated.
You can find out full details from the Transforms Overview page on MSDN. From the linked page:
LayoutTransform – A transform that is applied before the layout pass. After the transform is applied, the layout system processes the transformed size and position of the element.
RenderTransform – A transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits.
They're all right. RenderTransform should be all you need. Like;
<TextBlock Text="FootRoller" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-90"/>
</TextBlock.RenderTransform>
</TextBlock>
P.S. - You can literally just change RenderTransform to LayoutTransform which Sheridan has provided an explanation for in his answer.
If RenderTransform didn't work, take a look at LayoutTransform. You didn't tell us why RenderTransform didn't work but it's usually a safe bet that LayoutTransform will solve whatever problem it gave you.
This is a relatively simple question:
I can trim a text with ellipsis using this:
<TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"/>
it would give me something along the lines of:
"This sentence is too long"
=>
"This sentence i..."
That's all great and dandy, but what I actually want is this:
"This sentence ...:" / "This sentence...:"
What I'm looking for is a colon after the ellipses. Is there a simple way to achieve this?
EDIT:
sorry for the confusion.
I want to change the default ellipsis string from '...' to '...:'. As well, I'm going to include a colon in the text string itself. This way, I'll always have the colon displayed. As well, everything should be on one line in every situation.
here are a couple of results that are acceptable:
short enough:
way too l...:
This works, but I needed to add some padding so that the colon always remains visible:
<TextBlock Padding="0,0,5,0" >
<TextBlock TextTrimming="CharacterEllipsis">Lorem ipsum dolor sit amet, consectetur adipisicing </TextBlock>
<TextBlock>:</TextBlock>
</TextBlock>
Use two TextBlocks with the ellipses example in the first and the colon in the second.
Update:
It looks like this is a relatively simple question with plenty of complications.
One may be tempted to have some TextBlocks, the first with the target text and another two displaying ":" and "...:" and switch between with a Visibility value converter them based on whether the first TextBlock had enough space to display all of its text. This has possibilities but has the potential for unstable layouts.
Having just implemented a custom panel I can imagine a possible solution involving one designed to hold three children which would be the three TextBlocks described abovel
A custom panel inherited from Panel should override two key methods: Measure and Arrange.
In the measure method all of the children should be measured.
In the arrange method check whether there is enough room to display the first two children and if so put them side by side. If there is not enough room display the first child sized to allow the third child room to display and set the third child right aligned.
Update:
I tried the custom panel and it worked except the the first TextBox is clips partial characters.
The ultimate solution for clean formatting would be a method which adjust the display string until fits within the allotted space with the appropriate suffix applied.
If you do not include the colon in your strings, you can use Binding.StringFormat:
<TextBlock Text="{Binding, StringFormat={}{0}:}" TextTrimming="CharacterEllipsis"/>
(I realize this is a very old question, but I happened to stumble on it, so I thought I'd throw this in for anyone else who follows.)
sorry, I did not find something useful when searching google. Very basic question, mainly "Am I stupid". I know StackPanel gives its child elements full space, but why does the "Auto" property relate to the PARENT element in case of a border. I mean perhaps I am doing something wrong, but this behaviour is definitly not what I intended:
Pic1 http://img6.imageshack.us/img6/171/20090805002723.jpg
Ok, after some thinking I found a way, which looks like this:
Seriously http://img18.imageshack.us/img18/3173/20090805003045.jpg
But really, this way? I mean a "minimal sized control" with a textbox (which width I want to define) and a border around it, and I need this kind of tree? If anyone has a better way, please tell me...
Chris
PS: And that while I am writing about the nice UI composition for Silverlight, and wanted to give a simple example.. I just say: Legendary!
Definitely not stupid. This can be very confusing. I find it helps when thinking about layout in WPF/Silverlight to think top down from the root of the control hierarchy instead of bottom up.
It becomes obvious when you think about the stack panel's job. It stacks up its child elements and sets their widths to its width. It is therefore overriding your border's width of Auto. The Canvas you later wrapped around it does not try to rearrange its children at all, and it does not override their widths, so while its width is the width of the stack panel, the Auto on your border is now working (sized to its content, the TextBox).
Clear as mud?
Here is an article with more detail:
http://msdn.microsoft.com/en-us/library/ms745058.aspx
And I highly recommend the WPF book by Chris Sells & Ian Griffiths to get up to speed on the intricacies of WPF/Silverlight layout.
Canvas sould be avoided unless it really makes sense for what you're trying to do. For example, Canvas normally makes sense for a game, or something where you want to drag elements around. Here it's just getting in your way.
Reasons not to use Canvas:
http://blogs.msdn.com/devdave/archive/2008/05/21/why-i-don-t-like-canvas.aspx
An easy way is to get rid of the Stackpanel and just use the VerticalAlignment and HorizontalAlignment to keep it at the top left. Then just set the Border Width and leave the Height alone.
<Grid x:Name="LayoutRoot">
<Border Width="150" BorderBrush="Blue" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBox Text="I'm Serious" Background="LightBlue" />
</Border>
</Grid>
I just received a requirement to display a length of text in a control. The control is of a particular width and will be up to 2 lines in height. If it renders longer than two lines it will just display "..." at the end of the string.
Is this possible with any of the stock standard WPF controls?
Thanks,
D.
Set the Height of the TextBlock to be high enough to fit two lines. Set the TextWrapping to Wrap and the TextTrimming to CharacterEllipsis or WordEllipsis.
For the default Segoe UI 12Pt font, I find this does it
<TextBlock TextWrapping="Wrap" Height="40" TextTrimming="CharacterEllipsis" />
You could probably do some code behind to work out the height it should be be for a particular font if you want.
That's not standard behavior that I've ever found, but again I've not looked for it.
One possibility is to use a monospace font in a TextArea control, and then if the string is greater than however many characters fit in the area, only display the right N characters with the ellipses