Is it possible to do in XAML something like ffloat:left for an image in CSS. I need to create something like this:
with variable image dimensions and text length.
Edit: The text warp around the image is not static in my case, it is create in C# code that returns a list of TextBlock elements (with Runs)
With Silverlight 4 you would achieve this using a RichTextBox:
<RichTextBox TextWrapping="Wrap" IsReadOnly="False">
<Paragraph>
More text here ..
<InlineUIContainer>
<Image Source="abc.jpg"/>
</InlineUIContainer>
more and more text here;
<LineBreak />
</Paragraph>
</RichTextBox>
It looks like Win8 Metro has a RichTextBox, and also has an InlineUIContainer, so something like the above should work!
The solution seems to be using RichTextBlockOverflow and OverflowContentTarget described in this presentation: http://video.ch9.ms/build/2011/slides/APP-914T_Street.pptx
This question seems to be asking for something similar to what you want. The answer here should prove a solution to what you desire.
A summary of the answer is, use a FlowDocument like the following example:
<FlowDocument>
<Paragraph>
<Floater HorizontalAlignment="Left">
<BlockUIContainer>
<Image Source="/FlowDocumentTest;component/dog.png" Width="100" />
</BlockUIContainer>
</Floater>
Here is where the text goes to wrap around the image.
</Paragraph>
</FlowDocument>
Update
As your question states, you are now using some C# code to generate TextBlock/Run Elements, both can be children of a Paragraph object. So simply name your Paragraph like so:
<FlowDocument>
<Paragraph x:Name="textPara">
<Floater HorizontalAlignment="Left">
<BlockUIContainer>
<Image Source="/FlowDocumentTest;component/dog.png" Width="100" />
</BlockUIContainer>
</Floater>
</Paragraph>
</FlowDocument>
Then in C#, add your generated TextBlocks or Runs to the Inlines property of textPara, i.e.
var runToInsert = new Run("Some text to display");
textPara.Inlines.InsertAfter(textPara.Inlines.FirstInline, runToInsert);
Related
I want to add a flyout to my TextBlock, and when I select the text in the TextBlock, the flyout will show up at the selected (kind of like Reading Mode in Microsoft Edge, when you select the text in reading mode, there will be a flyout show the word's definition). But I don't know how. I've tried using the SelectionChanged, but the parameters that this event passes don't have an position that I can use to set the flyout. So how can I do that?
Besides, I'm wondering what SelectionFlyout is for? I thought it could help me.
Here was my code:
<TextBlock x:Name="webviewtest" Grid.Row="1" Text="This is a select-flyout test." FontSize="300" IsTextSelectionEnabled="true" >
<TextBlock.SelectionFlyout>
<Flyout>
<TextBlock Text="this is the flyout"></TextBlock>
</Flyout>
</TextBlock.SelectionFlyout>
</TextBlock>
And when I selected text, the flyout never showed up. It's obviously that I have been using it wrong. So I checked the Microsoft Docs and it said
Gets or sets the flyout that is shown when text is selected, or null if no flyout is shown.
And I can't find any samples about this online.
This is achievable by setting the TextBlock IsTextSelectionEnabled to True and by using a MenuFlyout to display the selected text.
XAML
<TextBlock x:Name="webviewtest" Text="This is a select-flyout test." FontSize="100" IsTextSelectionEnabled="True" RightTapped="webviewtest_RightTapped">
<FlyoutBase.AttachedFlyout>
<MenuFlyout x:Name="Flyout">
<MenuFlyout.Items>
<MenuFlyoutItem x:Name="FlyItem" Text="">
</MenuFlyoutItem>
</MenuFlyout.Items>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
C#
private void webviewtest_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
TextBlock tb = sender as TextBlock;
if (tb.SelectedText.Length > 0)
{
Item.Text = tb.SelectedText;
}
// Show at cursor position
Flyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));
}
You need to use RichTextBlock to replace TextBlock and the platform is 17134 and laster.
<RichTextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
IsTextSelectionEnabled="True">
<RichTextBlock.ContextFlyout>
<Flyout>
<TextBlock Text="flyout" />
</Flyout>
</RichTextBlock.ContextFlyout>
<RichTextBlock.SelectionFlyout>
<Flyout>
<TextBlock Text="this is the flyout" />
</Flyout>
</RichTextBlock.SelectionFlyout>
<Paragraph>
welcome to blog.lindexi.com that has many blogs
</Paragraph>
</RichTextBlock>
The SelectionFlyout is work in touch. TextBlock.SelectionFlyout doesn't work · Issue #452 · Microsoft/microsoft-ui-xaml
All the code in github
Hello I am new to Windows Phone app development. I am right now developing an app that shows a paragraph of text. I used a scroll viewer in order to show the text. I have put the entire paragraph in to a single text block. the problem is when I run the app the emulator displays only half of the text and the remaining half is not visible how to make all the text inside the paragraph visible??. Thank you
Try setting
TextWrapping="Wrap" on TextBlock
Also make sure scrollviewer size is not set to Auto as it will keep expanding to accommodate the text. Try to give screen width size.
Use:
<ScrollViewer>
<TextBlock Text="Your paragraph here" TextWrapping="Wrap" />
</ScrollViewer>
Hi you can use RichTextBox for it like:
<RichTextBox FontSize="25" Background="Transparent">
<Paragraph>
your text goes here.
</Paragraph>
</RichTextBox>
Just add below code.
XAML Code :
<ScrollViewer Grid.Row="1">
<StackPanel>
<RichTextBox x:Name="richTxtBox" VerticalAlignment="Top" Style="{StaticResource NormalRichTextBoxStyle}"/>
</StackPanel>
</ScrollViewer>
Class Code :-
string str = "***** Your String *****";
Paragraph p = new Paragraph();
Run myRun = new Run();
myRun.Text = str;
p.Inlines.Add(myRun);
richTxtBox.Blocks.Add(p);
I need a specific font/style for each line in a RichTextBox, the problem is that I am using System.Windows.Controls.RichTextBox instead of System.Windows.Forms.RichTextBox and it doesn't have the .Select() and .SelectionFont() methods as the Forms one have.
So my question is: How do I add a line in a System.Windows.Controls.RichTextBox with a specific font/style?
If you are using WPF rich text box in WPF accept FlowDocument. with FlowDocument you simply can set style for each line or world and ....
simple example:
<RichTextBox >
<FlowDocument>
<Paragraph>
<Span FontSize="20">first line</Span>
<LineBreak></LineBreak>
<Span Foreground="Red" FontSize="20">sec line</Span>
</Paragraph>
</FlowDocument>
</RichTextBox>
I have an application and created a RichTextBox in my page1 for my Windows Phone Application. The UI displays the way I want in the design box but when I try to run the application I get an error "EventHandler 'PhoneApplicationPage_Loaded' not found on class 'PhoneApp1.Page1'"
I don't understand what's going on at all and I thought maybe I was suppose to handle the actual display of the richtextbox in the coding cs section where I handled the button click to get to that page. When I look online all I see is how to use the richtextbox Like I have did on my xaml file. Any ideas what does that error mean?
Here is the code from my xaml and cs file:
namespace PhoneApp1
{
public partial class Page1 : PhoneApplicationPage
{
public Page1()
{
InitializeComponent();
}
}
}
and the xaml corresponding to the cs is:
Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<RichTextBox VerticalAlignment="Top">
<Paragraph>
<Bold FontSize="32">Great Stuff</Bold>
</Paragraph>
<Paragraph>
Great Stuff
<LineBreak></LineBreak>
</Paragraph>
<Paragraph>
<Bold FontSize="32">More Stuff</Bold>
</Paragraph>
<Paragraph>
More Stuff
<LineBreak></LineBreak>
</Paragraph>
<Paragraph>
<Bold FontSize="32">Some Stuff</Bold>
</Paragraph>
<Paragraph>
Some Stuff
</Paragraph>
</RichTextBox>
</Grid>
there is no problem with your code .
search your solution , does a event "PhoneApplicationPage_Loaded" exist?
This is my first day to design UI using WPF. I have looked up MSDN official document of Flow Document and found that I can place an UI control inside a RichTextBox. I did put a button in but found it's not interactable - I cannot click on it as it's grey. And I also tried other controls and they all displayed fine but just don't support interaction. Even a hyperlink doesn't work.
I have searched over internet, the closest question ever asked is about how to make an inside hyperlink click-able: The similar question: C# WPF Text with links
I did the same thing but it didn't work! All component displayed well but just are not able to be clicked.
Here is my XAML code:
<RichTextBox Grid.Row="1" Margin="14.007,31.067,22.011,46.305" Name="rtxtRslt" BorderBrush="White" >
<FlowDocument>
<Section FontSize="15">
<Paragraph>
<Bold>Click on this:</Bold>
<Italic><Hyperlink NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink></Italic>
</Paragraph>
<BlockUIContainer>
<Button Click="Button_Click">Also Click On This</Button>
</BlockUIContainer>
</Section>
</FlowDocument>
</RichTextBox>
Can anyone give me some suggestion:
1. is it possible to make it click-able
2. if yes, if I forgot to set any/what attribution of the RichTextBox control?
First off your direct question: how to make the content of the RichTextBox "active". Set the IsDocumentEnabled property to True on the RichTextBox like shown here:
<RichTextBox Grid.Row="1" Margin="14.007,31.067,22.011,46.305" Name="rtxtRslt" BorderBrush="White"
IsDocumentEnabled="True">
<FlowDocument>
<Section FontSize="15">
<Paragraph>
<Bold>Click on this:</Bold>
<Italic>
<Hyperlink NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink>
</Italic>
</Paragraph>
<BlockUIContainer>
<Button Click="Button_Click" >Also Click On This</Button>
</BlockUIContainer>
</Section>
</FlowDocument>
</RichTextBox>
Now to the unspoken question: do you have to be in a RichTextBox at all? The fact that there is a special property on the RichTextBox to make embedded UI elements active kinda indicates that is not the normal usage for this control. It is meant to host editable FlowDocument content. So the user of the RichTextBox would typically be creating the document that hosts the button that a consumer of the document could click, if that helps make the distinction clear I don't know.
However, all that being said, your FlowDocument hosted instead in a simple FlowDocumentPageViewer is active by default.
<FlowDocumentPageViewer>
<FlowDocument>
<Section FontSize="15">
<Paragraph>
<Bold>Click on this:</Bold>
<Italic>
<Hyperlink NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink>
</Italic>
</Paragraph>
<BlockUIContainer>
<Button Click="Button_Click" >Also Click On This</Button>
</BlockUIContainer>
</Section>
</FlowDocument>
</FlowDocumentPageViewer>
Now to the other unspoken question (unspeakable?) do you have to be in FlowDocument content at all? FlowDocument content is similar to, but not derived from UIElement. As such, many of the out-of-the-box features of UIElements are not available. If you need document functionality in the UI FlowDocuments can provide a great start but bring with them a pretty big learning curve in their own right.
The title of your question, if taken literally, makes me think you might just want a WPF UI that allows you to embed Buttons and Hyperlinks and have them work (gasp). That is certainly the default behavior. If you do not need the document look and feel that FlowDocument provides nor the real time document editing that RichTextBox provides you might consider a more "traditional" WPF layout.
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch"
Margin="20">
<TextBlock>
<Bold>Click on this:</Bold>
<Italic>
<Hyperlink NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink>
</Italic>
</TextBlock>
<Button Click="Button_Click"
Margin="0,20,0,0">Also Click On This</Button>
</StackPanel>