Why does TextBlock trims ending spaces from the text? - xaml

Here are my TextBlocks:
<StackPanel Orientation="Horizontal" Margin="0,3,0,0">
<TextBlock Text="6 or more characters, at least one letter and a number, " FontFamily="Segoe UI" Foreground="#000000" FontSize="13"/>
<TextBlock Text="no symbols" FontFamily="Segoe UI" Foreground="#000000" FontSize="13"/>
</StackPanel>
And here is the output (screen shot):
Why does TextBlock trim ending spaces? However, it works fine when there are leading spaces.

It looks like xml:space="preserve" should do the trick (see Preserving Whitespace in XAML) but that doesn't seem to be working in a Windows Store app (it does in WPF).
If you use the non-breaking space character   it does work
<TextBlock Text="6 or more characters, at least one letter and a number,       " ....
I suppose you could try building a converter on the Text property to check for trailing spaces and replace with non-breaking spaces - presuming the truncation that's happening doesn't occur too early.

Solved with <Run /> in a <TextBlock />..
<StackPanel Orientation="Horizontal" Margin="0,3,0,0">
<TextBlock FontFamily="Segoe UI" Foreground="#000000" FontSize="13">
<Run Text="6 or more characters, at least one letter and a number, " />
<Run Text="no symbols" />
</TextBlock>
</StackPanel>
And word wrapping still works
<StackPanel Orientation="Horizontal" Margin="0,3,0,0">
<TextBlock FontFamily="Segoe UI" Foreground="#000000" FontSize="13"
Width="200" TextWrapping="Wrap">
<Run Text="6 or more characters, at least one letter and a number, " />
<Run Text="no symbols" />
</TextBlock>
</StackPanel>
I would easily use Jim's solution (#160;) if wrapping was not an issue.
In your mind please think about how HTML handles and preserves spaces. This is also how XAML handles and preserves spaces. You would think, of course, that inside a TextBlock it would be more literally handled, huh? Well, it is what it is. At least there's a solution.

Try use xml:space="preserve":
<StackPanel Orientation="Horizontal" Margin="0,3,0,0">
<TextBlock xml:space="preserve" Text="6 or more characters, at least one letter and a number, " FontFamily="Segoe UI" Foreground="#000000" FontSize="13"/>
<TextBlock xml:space="preserve" Text="no symbols" FontFamily="Segoe UI" Foreground="#000000" FontSize="13"/>
</StackPanel>

I've found a different solution! The \u+A0 works when you ALSO set the IsTextSelectionEnabled.
I don't know why this would be, and it was a total surprise (I added the field because I just discovered it while also working on my 'Why does my text get trimmed in Universal Apps?' problem).
Also U+205F (medium mathematical space) also works in conjunction with IsTextSelectionEnabled.

RichTextBlock seems to preserve both leading and trailing whitespace (in WP 8.1 WinRT):
<RichTextBlock>
<RichTextBlock.Blocks>
<Paragraph >
<Paragraph.Inlines>
<Run Text="trailing " /><Run Text="bbb" /><Run Text=" leading" />
</Paragraph.Inlines>
</Paragraph>
</RichTextBlock.Blocks>
</RichTextBlock>
But it also seems to add an extra space between the runs in addition to the of the ones you specify.

Related

Wrap text nicely in horizontal stackpanel or wrappanel?

I've seen a few other posts about this but haven't seen anything that solves my problem. Basically, I need to have some text (bold and unbold) wrap within a Stackpanel or Wrappanel nicely. Here is a visual:
I need a combination of the two TextBlocks that you see. I've got the first bold TextBlock which contains "Title: " and then on the same line I need the next TextBlock which may or may not wrap. If it does wrap, I need the top line to stay on the top line and then wrap, as if it were all one TextBlock. Here's a made-in-Paint visual of what I need:
Here's my code that I've got so far:
<toolkit:WrapPanel Orientation="Horizontal">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here " />
</toolkit:WrapPanel>
<toolkit:WrapPanel Orientation="Horizontal">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</toolkit:WrapPanel>
Now, I'm not opposed to this being done in one TextBlock either (if possible). I know that with TextBlock.Inlines I can add a Run of bold text and then another of regular text. The problem with that is Inlines cannot be bound using MVVM (which I'm not using in this demonstration, but will be using in the final code).
So whatever the solution is, I need to be able to set the values of the TextBlocks from the code-behind so that I know it can be done with MVVM.
Does anyone know of a way to achieve this?
Use the RichTextBox control with a different run for every font style.
<RichTextBox>
<Paragraph>
<Run FontWeight="Bold">Title:</Run>
<Run>More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :(</Run>
</Paragraph>
</RichTextBox>
You can bind the Text property of the Run elements to your data context, ex.:
<RichTextBox>
<Paragraph>
<Run FontWeight="Bold"
Text="{Binding Header}"></Run>
<Run Text="{Binding Text}"></Run>
</Paragraph>
</RichTextBox>
Fix Width Property of both StackPanel. this may help you. Problem is if you don't set Width Property it consider as Auto width.
<StackPanel Orientation="Horizontal" Width="400">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here " />
</StackPanel >
<StackPanel Orientation="Horizontal" Width="400">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</StackPanel >
This would helpful for you:
<toolkit:WrapPanel Orientation="Horizontal">
<TextBlock>
<Run FontWeight="Bold" Text="{Binding Header}"></Run>
<Run Text="{Binding Text}"></Run>
</TextBlock>
</toolkit:WrapPanel>
Have you tried using construction like this?
<TextBlock>
<TextBlock.Inlines>
<Bold>
<Bold.Inlines>
<Run Text="Title: "/>
</Bold.Inlines>
</Bold>
<Run Text="{Binding Text}"/>
</TextBlock.Inlines>
</TextBlock>
It works like a charm if text-block should be bound to just one block of text.

Long text in scrollable textblock is cropped

I want place long text into a textblock i´m using:
<ScrollViewer Height="auto" VerticalAlignment="Top" Width="auto">
<TextBlock TextWrapping="Wrap">
<Run Text=""/>
<LineBreak/><LineBreak/>
<Run Text=""/>
<LineBreak/><LineBreak/>
<Run Text=""/>
<LineBreak/><LineBreak/>
<Run Text=""/>
<LineBreak/><LineBreak/>
</TextBlock>
</scrollviewer>
When text is really long it is cropped, what can i do to see all text
sorry, but my english is not good
The reason for this behavior is that any element that must be displayed beyond the area which is larger than 2048x2048 pixels would be clipped by the platform.
Look at this solution.

Border Control in Windows Phone 7, Auto Height & Width not right

I have a ListBox with this template in it.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<StackPanel Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000" Width="460" MinHeight="76">
<StackPanel Margin="4,4,-4,-153">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
<TextBlock " Text="{Binding Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Yet I have to force set a Width and Height on the Border otherwise it makes like Width and Height of "2".
It is like it does not understand I have 2 TextBlock inside it and won't expand to fill both of them.
This leaves me with having to put a fixed height and width in what I don't like as if the text is too big it gets cutoff.
You can toss out your StackPanel's because you don't need them, they're also what's keeping your wrapping from working, you need a panel like a Grid for that. The negative Margin's also isn't something you'd normally see in a DataTemplate for a ListBox so I'd guess you have some other funky layout stuff going on from that sort of practice elsewhere up the tree.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<Grid Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000"/>
<TextBlock TextWrapping="Wrap"
HorizontalAlignment="Center" Margin="4,4,-4,-153">
<Run Text="{Binding }"/><LineBreak/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
So unless I'm missing something somewhere this should fix you up as the Grid will handle the sizes of its children for you and consume the space necessary in its parent. However if there's something else in your structure pushing stuff around and won't let it consume that space it should invoke your Wrapping.
Hope this helps :)

winrt textblock run binding designtime

my datacontext in designtime
d:DataContext="{d:DesignInstance Type=viewmodel:MainViewModel, IsDesignTimeCreatable=True}"
....
<TextBlock Text="{Binding Path=Driver}">
work fine. Only in:
<TextBlock/>
<Run Text="{Binding Path=Jahr}" />
</TextBlock>
dont work in designtime, why?
NOTE: It IS possible to bind to a <Run /> but it won't render at Design-Time, only Run-time.
This works a treat for binding.
<TextBlock>
<Run Text="{Binding Results.Count}" />
<Run Text=" results for '" />
<Run Text="{Binding SearchTerm}" />
<Run Text="'"/>
</TextBlock>
You can't set the TextBlock Text AND a Run Binding though. It's either one or the other, this works fine, but doesn't render at design time as you say.
Runs do support binding in Windows Runtime but it seems that those Run Controls do not support design time data... :-(

Silverlight Datagrid Column header Text Break Line

I am Using Silverlght 4.I have a datagrid Header whose text="StudentDetailOfAplication".Since It Occupies more length in I need to have a break line near "Application".Please send me some usefull links how to do this
<Grid x:Name="LayoutRoot" Background="White">
<sdk:DataGrid AutoGenerateColumns="False" Height="227" HorizontalAlignment="Left" Margin="39,37,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="316" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="StudenDetailsOFApplication" Width="100" Binding="{Binding id}"></sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="Name" Width="100" Binding="{Binding productName}"></sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="NumberOfAplication" Width="114" Binding="{Binding qty}"></sdk:DataGridTextColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid></Grid>
Header="Student Details
Of Application" or Header="Student Details
Of Application" will also work. Or if you're not inserting into a string you can also do something like.
<TextBlock>
Line<LineBreak/>Break
</TextBlock>
but personally I just use the codes shown in the first two examples. Also keep in mind the xml will retain whitespace, so you can do like Header=" Details of
Student Application" for alignment purposes if TextAlignment property isnt available. Hope this helps.