locked
Formatting Text using Run RRS feed

  • General discussion

  • hi everybody

    I want to programmatically (javascript) add formatted text to a textblock. can I use the run object to have some parts of the text bold and how would that javascript code look like?

    thanks

    michael

    Friday, August 3, 2007 11:21 AM

All replies

  • Hi Michael...

    This is taken directly from the chm file delivered in the SDK... I searched for "run":

    <TextBlock
      FontFamily="Arial" Width="400" Text="Sample text formatting runs">
      <LineBreak/>
      <Run Foreground="Maroon" FontFamily="Courier New" FontSize="24">Courier New 24</Run>
      <LineBreak/>
      <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18" FontStyle="Italic">Times New Roman Italic 18</Run>
      <LineBreak/>
      <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14" FontWeight="Bold">Verdana Bold 14</Run>
    </TextBlock>

    Note they did linebreaks between each run, but if you go to the chm file, the next example shows how it looks without the linebreaks, so it looks like you can just merge it together.

    -Dave

    Friday, August 3, 2007 11:42 AM
  •  HI WynApse!

    I guess you missed the point of qustion of delusion1978.

    I've got the same Problem. In Silverlight i only can use the Textblock. But i need to format longer text parts than just "hello world", and i dont want have to format them by editing the xaml directly. I need to reference a textblock and feed the textblock out of javascript(i have a dynamic source).

    So, how do i feed longer text wit linebreaks and formattet parts into a textblock? ...i could not find any solution so far.

    please don't post us some xaml parts, we need javascript code here ;)

     
    thx

    Mathias 

    Monday, August 6, 2007 2:49 AM
  • 1) Create The String block Well formated with <run> block inside the <textblock>

    2) Create Element From that XAML  string

    3) Add Children.

     

            var objSlControl = document.getElementById(vSilverlightControlId);
            var can = objSlControl.content.findName("MyCanvas");

             var e =  objSlControl.content.createFromXaml(stringBarXAML);  

             can.children.Add(e);


     

    Monday, August 6, 2007 7:41 AM
  • I thought the original question had to do with changing fonts inside a displayed line of text, but maybe it was two parts.

    I've created huge blocks of animation code using createFromXaml, so I see no reason why you couldn't do what you're looking for.

    Obviously from the example in the SDK, you're not going to be able to do it by using a Name.Text= scheme because of the line breaks.

    I think you're going to have to createFromXaml the entire TextBlock to get it all out there the way you want. But that's not a big deal either. Just put a named Canvas in as a placeholder, and then Add the TextBlock you're creating to the Canvas.

    If this isn't clear, let me know and I'll bang together some code.

    -Dave

    Monday, August 6, 2007 9:14 AM
  •  Thanks guys!

    I got to the same solution as you suposed by myself Smile

    I created a canvas on wich  i did some storyboard lines.  then i used the createFromXaml  example on: http://msdn2.microsoft.com/en-us/library/bb412361.aspx

    the only problem i still have is that i cant update or reload the xamlFragment var, so my temporary solution is that i remove the textblock in the canvas an add it again when the xamlFragment var has updatet.

    so i got my xaml TextBlock Tags with the formattet text now nice stored in a array and can click trough my formattet text Big Smile

    First i thought the Text attribute would know some simple html tags, but that would probably need an other attribute than the common Text attribute then...

    I think it is a bit complicatet (at least for me or other designers) of work to get some nice formattet dynamic text in silverlight...

    but if you guys got some better Idea please post Smile 

    Thanks

    Mathias 

     

    Tuesday, August 7, 2007 3:09 AM
  •                                             string myString = "<TextBlock Canvas.ZIndex=\"3485\" Foreground=\"#000000\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">Test <Run Foreground=\"#FF0000\">Test</Run> Test</TextBlock>";
                                                myString.Replace('\"', '"');
                                                TextBlock myText = XamlReader.Load(myString, false) as TextBlock;
                                                _myContainer.Children.Add(myText);

    Here goes an example, note that you need to change _myContainer to the XAML element that you wish to be the parent for the TextBlock element that we're generating here. Everything else I can see has pretty much been talked about in previous posts. If this was helpful please click Mark As Answer for my post, so I can receive some credit for helping you guys. Thanks, and hope this helped.
     

    Tuesday, October 2, 2007 11:12 AM
  • is your example above using javascript or 1.1 .net code?

    Friday, January 18, 2008 10:24 AM
  • I got it working using this method

    function textBox();

    {

    var s = document.getElementById('silverlightPlugIn');

     

    var q = Main.findName("MainCanvas");

     

    var String = '<TextBlock x:Name="t_3_11" FontSize="12" Width="320" Canvas.Top="5" Canvas.Left="5" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">';

    String += '<Run>This is Text</Run>';

    String += '<LineBreak></LineBreak>';String += '<Run> 1. Test</Run><TextBlock>';

     

    var e = s.content.createFromXaml(String);

     

    q.children.Add(e);

    }

     

    YEA!!!

     

     

    Friday, January 18, 2008 10:55 AM
  • I'm looking for a solution to change the FontSize of the part of a text in the same TextBlock but by C# code.
    I see there's the Run class but I don't know how to make it work with an existing TextBlock in C#

     

    Thursday, October 9, 2008 7:52 PM
  • GearWorld: I could probably answer your question but you really should re-ask, in a different thread on the .NET forum. This thread is already pretty scattered.

    As far as the initial ask of applying run-time formatting to an existing TextBlock, there are really a number of options.

    1) Take the old text string, totally remake the XAML including the tagging, call CreateFromXAML and insert it over the old one. That is basically the approach previously recommended in the thread. If you don't already have the contents of a TextBlock isolated into separate Run / LineBreak tagging it is probably your best option. Plus if you need to do string manipulation or searches to even find the text you are going to change, you may as well do the work on the string as code, apply the necessary XAML formatting around the string, then reload it.

    2) If you DO have the TextBlock items isolated into individual Run's, then all you would really need to do is to make sure that the Run where you want to change to Bold or whatever has an x:Name. You can then findName("thatRun") and set value of FontWeight on it.

    3) If you are inserting at end, you COULD write out a XAML string only for the individual Run (with the FontWeight set in the XAML) and then insert that object into the existing TextBlock eg myTextBlock.Inlines.Add(newRun);

    4) You could call myTextBlock.Inlines.Insert(position,newRun) instead, to insert at a position other than the end. BUT: I tried this myself, and the TextBlock won't rerender in this case. I think that is a Silverlight bug. You can work around the bug by doing this first, and THEN inserting a blank Run at the end with Add. It seems to be only Add and not Insert that triggers the render layer under JS into thinking the collection content has changed and therefore it's time to redraw that TextBlock. This smells like a hack, but it does work ...

    Thursday, October 16, 2008 5:01 PM
  • GearWorld: I could probably answer your question but you really should re-ask, in a different thread on the .NET forum. This thread is already pretty scattered.

    As far as the initial ask of applying run-time formatting to an existing TextBlock, there are really a number of options.

    1) Take the old text string, totally remake the XAML including the tagging, call CreateFromXAML and insert it over the old one. That is basically the approach previously recommended in the thread. If you don't already have the contents of a TextBlock isolated into separate Run / LineBreak tagging it is probably your best option. Plus if you need to do string manipulation or searches to even find the text you are going to change, you may as well do the work on the string as code, apply the necessary XAML formatting around the string, then reload it.

    2) If you DO have the TextBlock items isolated into individual Run's, then all you would really need to do is to make sure that the Run where you want to change to Bold or whatever has an x:Name. You can then findName("thatRun") and set value of FontWeight on it.

    3) If you are inserting at end, you COULD write out a XAML string only for the individual Run (with the FontWeight set in the XAML) and then insert that object into the existing TextBlock eg myTextBlock.Inlines.Add(newRun);

    4) You could call myTextBlock.Inlines.Insert(position,newRun) instead, to insert at a position other than the end. BUT: I tried this myself, and the TextBlock won't rerender in this case. I think that is a Silverlight bug. You can work around the bug by doing this first, and THEN inserting a blank Run at the end with Add. It seems to be only Add and not Insert that triggers the render layer under JS into thinking the collection content has changed and therefore it's time to redraw that TextBlock. This smells like a hack, but it does work ...

    Ok I see your point.  Very interesting information and I take this out of the forum and put it in a word document for further reference.  Thank you.

    Friday, October 17, 2008 7:37 PM