Silverlight text around an image - silverlight

Im am trying to wrap text around an image as one would use the html float property. Is there a way to acomplish this in silverlight 3?
Thanks

I tackled this issue a while back. There is not really a good way that I know of. This will work though it's just painful.
In order to simplify the explanation why don't we assume that the image is in the upper right corner of the page and the text needs to be to the left and below the image.
Start by placing the TextBlock and the Image side-by-side.
Calculate the bottom most point of the TextBlock and the bottom most point of the image. (Use their top margins and actual heights.
While the TextBlock is the larger you move a word at a time into a newly created TextBlock below the image. This creates the illusion of wrapping text.
leftText.Text = textToWrap;
bottomText.Text = string.Empty;
Stack<string> wordsToMove = new Stack<string>();
double imageBottomPoint = image1.ActualHeight + image1.Margin.Top;
while ((leftText.ActualHeight + leftText.Margin.Top) > (imageBottomPoint + 14))
{
int lastSpace = leftText.Text.LastIndexOf(' ');
string textToMove = leftText.Text.Substring(lastSpace).Trim();
BlockedText.Text = leftText.Text.Remove(lastSpace);
wordsToMove.Push(textToMove + ' ');
}
StringBuilder sb = new StringBuilder(bottomText.Text);
while (wordsToMove.Count > 0)
{
sb.Append(wordsToMove.Pop());
}
bottomText.Text = sb.ToString();

You need to look RichTextBox and FlowDocument if it is WPF and RichTextBox if Silverlight 4.0.
Silverlight 4.0 Solution
<RichTextBox TextWrapping="Wrap" IsReadOnly="False">
<Paragraph>
More text here ..
<InlineUIContainer>
<Image Source="abc.jpg"/>
</InlineUIContainer>
more and more text here;
<LineBreak />
</Paragraph>
</RichTextBox>
WPF Solution-
<RichTextBox>
<FlowDocument IsEnabled="true">
<Paragraph>
Text text ..
<Button Margin="10,0,10,0" Content="A Button Float"/>
More text..
</Paragraph>
<Paragraph TextAlignment="Center">
<Image Source="abc.jpg"/>
text text..
</Paragraph>
</FlowDocument>
</RichTextBox>

Related

Block text entry in a RichTexBox in Silverlight

I use a RichTextBox on my website. I just want to put inside it a description text for my home page. How block the text entry ?
This is my code :
<RichTextBox Name="RTBHome" TextWrapping="Wrap" Height="49" >
<Paragraph>
<Run Text="Welcome to FluxCatcher , want to get your tweet, the informations about our favourite website"/>
<LineBreak></LineBreak>
<Run Text="and so much more in the same page ? So let's subscribe now"/>
</Paragraph>
</RichTextBox>
RichTextBlock is what you're after:
http://msdn.microsoft.com/en-us/library/system.windows.controls.richtextblock(v=vs.95).aspx
Represents a control that displays read-only rich text.

Richtextbox: Embedd image and surround with text

I would like to embed an image in an Richtextbox in way that the image is sourrounded by text (should look like a newspaper article which contains some images).
That's what I have until now:
<RichTextBox>
<Paragraph>
<InlineUIContainer>
<Image Source="{Binding Image}" Width="200" Height="100" />
</InlineUIContainer>
<Run Text="{Binding Text}" />
</Paragraph>
</RichTextBox>
This code embedds the image in a way so that the first line of the run starts at the bottom right edge of the image.
But I would like to embedd it such a way:
http://i.stack.imgur.com/NVUNz.jpg
How can this be implemented for WP7.1?
Thanks.
I know this can be done, i believe you would be looking at either Margin or Padding around the image.....As the whole thing will look like an object because that's what it is.
so you want to put Padding or Margin around the image to push the text away from the object giving the appearance of space between the object. Also try Pushing the text to the right and the image to the left.
I hope this will help a little. :)
I don't think it can be done until FlowDocument will be available in Silverlight. Or somebody invents a similar control.

Change the text direction in WPF FlowDocument TableCell

I'm trying to create a simple table in a WPF FlowDocument that has rotated text in some of the cells. In Microsoft Word you can easily change the text direction of a table cell but I haven't been able to find a way in a WPF FlowDocument.
Any idea on how to rotate the text 90 degrees or change the text direction. I've tried a few things but the text doesn't wrap and size as desired.
Any help would be great. Thanks
Look into using the BlockUIContainer and RotateTransform
Example:
<TableCell>
<BlockUIContainer>
<TextBlock Text="Hello World">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90"></RotateTransform>
</TextBlock.LayoutTransform>
</TextBlock>
</BlockUIContainer>
</TableCell>

Flowdocument isnt using the full width/height

I have a FlowDocument which I want to fill the entire width and height of my window. I have tried using the FlowDocumentPageViewer (no luck) and am now using a DocumentPageView. I still can't get it to dock/fill the entire space; it's just sitting in the middle, in the minimum size it can create (does it make sense?)
Here is my code:
public DocumentPageView GetPage()
{
FlowDocumentPageViewer viewer = new FlowDocumentPageViewer();
StreamReader reader = new StreamReader(location);
string data = reader.ReadToEnd();
reader.Close();
string xamlData = HtmlToXamlConverter.ConvertHtmlToXaml(data, true);
FlowDocument result = (FlowDocument)System.Windows.Markup.XamlReader.Load(new MemoryStream(System.Text.UnicodeEncoding.Default.GetBytes(xamlData)));
viewer.Document = result;
viewer.VerticalAlignment = VerticalAlignment.Center;
viewer.HorizontalAlignment = HorizontalAlignment.Center;
DocumentPageView pageView = new DocumentPageView();
pageView.VerticalAlignment = VerticalAlignment.Center;
pageView.HorizontalAlignment = HorizontalAlignment.Center;
pageView.Stretch = System.Windows.Media.Stretch.Uniform;
pageView.PageNumber = 0;
pageView.StretchDirection = StretchDirection.Both;
pageView.DocumentPaginator = ((IDocumentPaginatorSource)result).DocumentPaginator;
return pageView;
}
Please note that this code contains the combination of my two methods but only the DocumentPageView is currently used. This is the Xaml that is created from my HTML source:
<FlowDocument xml:space="preserve" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Paragraph TextAlignment="center" FontSize="22pt" FontFamily="arial">Test Paragraph</Paragraph>
<Paragraph TextAlignment="center" FontFamily="arial">Test second paragraph</Paragraph>
</FlowDocument>
If I resize the fonts the content is only resized vertically (please note that the stretch direction is set to both). Any ideas?
I had a similar problem with FlowDocumentScrollView, but this solution also seems to work with FlowDocumentPageView:
The FlowDocument is centered because it's PagePadding property is set to auto,auto,auto,auto. Setting PagePadding to 0 fixes this behavior.
<FlowDocumentScrollViewer VerticalScrollBarVisibility="Auto">
<FlowDocument PagePadding="0">
</FlowDocument>
</FlowDocumentScrollViewer>
The following lines are causing your elements to center themselves (which is not the same as stretch):
viewer.VerticalAlignment = VerticalAlignment.Center;
viewer.HorizontalAlignment = HorizontalAlignment.Center;
pageView.VerticalAlignment = VerticalAlignment.Center;
pageView.HorizontalAlignment = HorizontalAlignment.Center;
You can safely remove them, as the default alignment here is Stretch.
If you still want to center the viewer, explicitly define the page size (remember, there are 96 points in an inch, and the Margin and PageSize are set in points):
Width= 96 * 8.5
Height= 96 * 11
Could you specify where and how do you use the result of your GetPage() method? Is it xbap or desktop application?
I'm asking this, because the following document is displayed just perfectly right in Kaxaml:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<FlowDocumentPageViewer>
<FlowDocument >
<Paragraph TextAlignment="center" FontSize="22pt" FontFamily="arial">Test Paragraph</Paragraph>
<Paragraph TextAlignment="center" FontFamily="arial">Test second paragraph</Paragraph>
</FlowDocument>
</FlowDocumentPageViewer>
</Grid>
</Page>
PS: If it's a desktop application you can always find who causes problems by Snoop tool, form Pete Blois.
Update: Its a desktop application, the getpage() result is posted into a grid which docks/fills perfectly.
<Window x:Class="GreenWebPlayerWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="Auto" Width="Auto" WindowStyle="None" WindowState="Maximized" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded" Closing="Window_Closing">
<Grid Width="Auto" Height="Auto" Name="TransitionContainer" Background="White" Margin="0">
//here the result from GetPage() method is inserted
</Grid>
</Window>
(this comment is written from another account)
#Anvaka: What i mean by perfectly right is that the document should "dock in container" that is the fonts should resize, it should fill the container in height and width. Now that im thinking about it, that may not seem like a proper behaviour for a flowdocument.
When i put the flow document in the container it is centered in middle of parent container (so far so good). but the parent container is not filling out its parent container so when i zoom or change font size, i would like the documentPageView container to grow in width and height, but remain centered.

How do I change RichTextBox paragraph spacing?

I am using a RichTextBox in WPF, and am trying to set the default paragraph spacing to 0 (so that there is no paragraph spacing). While I could do this in XAML, I would like to achieve it programmatically if possible. Any ideas?
I did it with style (pun indented)
<RichTextBox Margin="0,51,0,0" Name="mainTextBox" >
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
Using Line Height
RichTextBox rtb = new RichTextBox();
Paragraph p = rtb.Document.Blocks.FirstBlock as Paragraph;
p.LineHeight = 10;
Close, so you got the points. Actually it turned out to be setting the margin,
p.Margin = new Thickness(0);
For me on VS2017 in WPF works this:
<RichTextBox HorizontalAlignment="Left" Height="126" Margin="10,280,0,0" VerticalAlignment="Top" Width="343" FontSize="14" Block.LineHeight="2"/>
The key is Block.LineHeight="2"
You can found this also in Properties view but you can't change below 6px from there.
RichTextBox rtb = new RichTextBox();
rtb.SetValue(Paragraph.LineHeightProperty, 1.0);
In C# 2008 WAP
richtextbox1.SelectionCharOffset =
-1 * ( Convert.ToInt32(R223.Txt_Space_Before.Text) * 100);
or
richtextbox1.SelectionCharOffset =
Convert.ToInt32(R223.Txt_Space_Before.Text) * 100;
can be used for Line Spacing.
This is the only way you can have line height spacing.
<RichTextBox Height="250" Width="500" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" IsReadOnly="True" >
<Paragraph>
XYZ
<LineBreak />
</Paragraph>
</RichTextBox>
I know this question was posted before I even started coding but I found that simply setting ShowSelectedMargin to true did the trick

Resources