Develop Reference

Remove WPF FlowDocument left padding?

I'm attempting to align a flow document to the left with no padding, so that it matches exactly what you see in a TextBlock. I've recreated a simple example of what I'm basically trying to achieve. Here's what I have so far:
<Grid>
<TextBlock Foreground="Red" Height="Auto" TextWrapping="Wrap"
Margin="0" Padding="0" FontSize="50" FontFamily="Arial"
Text="Some text."/>
<RichTextBox BorderThickness="0" Background="Transparent" BorderBrush="Transparent" IsInactiveSelectionHighlightEnabled="False" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled"
Height="Auto"
Margin="0" Padding="0" FontSize="50" FontFamily="Arial" >
<FlowDocument PagePadding="0" LineStackingStrategy="BlockLineHeight">
<Paragraph Margin="0" Padding="0" TextIndent="0">Some text.</Paragraph>
</FlowDocument>
</RichTextBox>
</Grid>
Here's the result:
As you can see, the red is the TextBlock version and the black is the RichTextBox/FlowDocument version. The FlowDocument text is offset by about 5 pixels to the right. I've tried to remove all padding that I am aware of, but I still can't get rid of that offset. Any help is appreciated.
NOTE: This question is found as duplicate of WPF: How to make RichTextBox look like TextBlock?

This offset is related to the caret implementation in the RichTextBox control.
Look at .Net 4.8 source, in the RichTextBox.cs file:
// Allocates the initial render scope for this control.
internal override FrameworkElement CreateRenderScope()
{
FlowDocumentView renderScope = new FlowDocumentView();
renderScope.Document = this.Document;
// Set a margin so that the BiDi Or Italic caret has room to render at the edges of content.
// Otherwise, anti-aliasing or italic causes the caret to be partially clipped.
renderScope.Document.PagePadding = new Thickness(CaretElement.CaretPaddingWidth, 0, CaretElement.CaretPaddingWidth, 0);
// We want current style to ignore all properties from theme style for renderScope.
renderScope.OverridesDefaultStyle = true;
return renderScope;
}
And the CaretElement.CaretPaddingWidth definition in the CaretElement.cs file:
// Caret padding width to ensure the visible caret for Bidi and Italic.
// Control(TextBox/RichTextBox) must have the enough padding to display
// BiDi and Italic caret indicator.
internal const double CaretPaddingWidth = 5.0;
Therefore, the only option that you can check is set the RichTextBox margin to Margin="-5,0,0,0".

WP 8.1 text scaling

So say I have a textblock with a fontsize 32. The value of the text property is a variable amount of characters. If the text at a fontsize of 32 is cut off, how could i down scale the fontsize until the total width of the textblock is equal to the page width?
-I'd post a screenshot but not enough rep :/

The best solution is insert the TextBlock inside a fix width ViewBox:
<Viewbox Width="300" StretchDirection="Both" >
<TextBlock x:Name="testblock" Foreground="Magenta" FontSize="24" Text="This is a test"/>
</Viewbox>
And that will make the job without any effort. Change the parameters depending you need, and you can insert the textblock inside a border,etc.

How to change font size in TextBlock, when the text is in the second line

I'm looking for method to change font size in TextBlock if text goes to second line.
How can I know, when the text proceed to the second line?
Thanks for help.

What you could do is handle the TextChanged event and in the handler check the length of the text.
If the text is <= 20 you keep the original size. If it's > 20 but <= 25 you decrease the font size by say 3 points. An so on until you reach a limit of characters you want to support, say 50 or something.
You will probably need to disable Textbox text wrapping so that you only have a single line of text.

Wrapping with a Viewbox may give you the functionality you're after:
<Viewbox Stretch="Uniform" Width="50" Height="50">
<TextBlock Text="Test" />
</Viewbox>
source - https://stackoverflow.com/a/13268895/1202600

Is it possible to make first letter big and make the rest of the text align around it

Is it possible to make first letter big and make the rest of the text align around it like on this Picture?
If yes then how?

You can achieve this quite happily using FlowDocument elements.
<FlowDocumentScrollViewer Margin="0,0,204,0">
<FlowDocument>
<Paragraph>
<Figure HorizontalAnchor="ColumnLeft" Margin="0">
<Paragraph BreakColumnBefore="False" LineStackingStrategy="BlockLineHeight" LineHeight="55">
<Run FontSize="70">T</Run>
</Paragraph>
</Figure><Run>his is a paragraph of text are it should wrap the first letter. Wheren there is lots of text, multiple lines will appear besides our larger character.</Run>
</Paragraph>
<Paragraph>
<Run>This is the second paragraph in our body of text.</Run>
</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
You can read more about FlowDocument on MSDN

How do I get a ScrollViewer with a Rectangle inside to stop scrolling when it reaches the end of the rectangle?

I have created a Rectangle inside of a ScrollViewer like this
<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Center" Width="728" Canvas.Top="20" d:LayoutOverrides="HorizontalMargin" >
<Rectangle x:Name="musicBG" Fill="#FF0692FD"/>
</ScrollViewer>
During the use of the app, the size of MusicBg changes, sometimes to something around 3,000 pixels width.
musicBG.Width = _songLength*PixelsPerSecond
However, while scrolling the scrollViewer, it allows me to scroll the rectangle all the way off the screen.
For example this line of code gives me the following values when I have moved the rectangle as far as I want to move it.
if (songScrollViewer.HorizontalOffset > songScrollViewer.ScrollableWidth)
HorizontalOffset has a value of ~1200 and ScrollableWidth has a value of about ~2900.
How can I get this to be done properly so that the rectangle is not scrolled completely off the screen?
I would expect a HorizontalOffset of about 1200 to only push the rectangle about halfway through to it's destination, and not make it start going off screen.
ANSWER:
After much frustration, I was able to solve this problem by using Canvas instead of Border or Rectangle.
I'll award points if anyone can explain why this problem happened, and if there is a less processor intensive control that would work better than canvas.
Edit: Screen shots:
Bad Code:
<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left" >
<Border x:Name="musicBG" Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" />
</ScrollViewer>
Image of bad scroll with bad code:
Good working code:
<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left" >
<Canvas x:Name="musicBG" Background ="#FF0692FD" Height="270" >
<Border Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" />
</Canvas>
</ScrollViewer>
Good Scroll: Notice it says 170 seconds on the bottom right instead of the smaller number of 118 seconds in the bad scroll.

I believe your right, wp7 won't render shapes that are bigger then 2048 pixels. So the reason it's scrolling of the page is because it's treating it as if it were bigger then 2048 but you can only see up to a width of 2048px and its just scrolling over to the "ghost" part of the rectangle.
I'm not sure if you can override this but the best solution I could come up with (without overriding) is by splitting up your rectangle into chucks that are smaller then 2000 (just to be safe) and then displaying them seamlessly in a horizontal stack panel inside the scroll viewer. The problem with this is that depending on how you've coded it, this solution might be hard to implement; but you might just be able to split it in your ViewModel when displaying it and your logic would only see it as one big chunk.