This project has moved and is read-only. For the latest updates, please go here.

Office 2010 Format Bar

Oct 29, 2010 at 9:06 PM
Edited Oct 29, 2010 at 10:03 PM

Ok your new Office 2010 Format Bar works.

Wether the changing location of the formatting bar is good or bad this must be tested thoroughly.

But I saw you already wrote a //todo refactor

comment ;-)

I just had a loading time of 18 RichTextBoxes in DAtaGrid of 3,5 seconds o_0 until I saw I have image-filenotfound exceptions :P

now its faster/better ^^ phew.... can`t wait for the alpha transitions :P


Can you still fix for a future update that the user has to click somewhere to close the toolbar please?

And I changed this i your code i FormatToolbarManager.cs:



void Selection_Changed(object sender, EventArgs e)
            TextRange selectedText = new TextRange(_richTextBox.Selection.Start, _richTextBox.Selection.End);


            // the code after the && is mine because there can be a Selection with one empty char it can even be formatted but its not visible
            // Does it make sense to you format whitespaces? Maybe there are cases I just do not know now...
            if (selectedText.Text.Length > 0 && !String.IsNullOrWhiteSpace(selectedText.Text)) 


I will let you know next days about any bugs if there are any ;-)

1.) Do you know why these Buttons pasted in your stackpanel_FormatToolbar.xaml never gets activated?

<Button Content="K" Command="EditingCommands.ToggleItalic"/>  

<Button Content="U" Command="EditingCommands.ToggleUnderline" />    

<Button Content="B" Command="EditingCommands.ToggleBold"/>  

Solution: Put this in the StackPanel holding the Buttons: FocusManager.IsFocusScope="True"

then it works :)

2.) Please make the DragThumb visible at top of the formattingbar and make it wide enough to easily click and drag it :) I would design it the same as the window thumb grip.

Oct 30, 2010 at 4:29 AM

Your !String.IsNullOrWhiteSpace(selectedText.Text suggestion is a good one.  It doesn't make sense to format white spaces. I noticed your screenshots didn't have the images for things like Bold, Italic, Underline?  Was there a problem or did you just remove them?  I have also dramatically changed the way you add the format bar.  I have made the format bar a seperate control that can be attached to a regular RichTextBox or my toolkit's RichTextBox.  I have also added the ability for you to create your own and use it instead of the pre-built one.  This is how you will now add it, no more AllowFormatting property.: 




<toolkit:RichTextBoxFormatBar />




You create your own format bar by creating a control that inherits from IRichTextBoxFormatBar.  I will work on styling the Drag Thumb.

Oct 30, 2010 at 10:32 AM

Again you came right before me... Just wanted ask about the features you have already changed :-)

nono the image surely works generally, I just did not copy them... and I will use my own images later.

I will test your new code next days and let you know.

Oct 30, 2010 at 6:48 PM
Edited Oct 30, 2010 at 7:05 PM

For the old first release of your control I have a feature reqeust:

When the user selects text the Format Bar is always visible and following the selection. I found it to be confusing/irritating. My suggestion would be to catch the moment when the user

releases the LeftMouseButton after the selection change then pop/fade in the formatbar. The visual experience is not so overloaded in that case what I would prefer.

What do you think?

Oct 30, 2010 at 7:29 PM

I will play around with that and see how it works out.

Oct 30, 2010 at 7:38 PM
Edited Oct 30, 2010 at 7:51 PM

Look at that Image please:

surely you see the format bar is cut off on the left side. When you try to implement my first feature request please consider this too:

When the user finished the selected change and released the left mouse button and you are about to show the format bar and calculate its position consider

the left/right side of the window too compared to the position of the selection end.

If the space between left windows side and selection end is wide enough for the format bar to fit in show the format bar on the left side like on the screenshot. 

if the space between right windows side and selection end is wide enough for the format bar to fit in show the format bar on the right side like it SHOULD have been on my screenshot.

else center ?? the format bar unter the selection end.

Would be cool if you could experiement a bit with that. If have just thought again, when the user is selecting text then to format it. But why must the format bar visible during selection? The user can`t anyway click any button on the format bar because he is changing the selection. So it would be much more logical to show the format bar when the user is done with selection because THEN he is also technically in the position to click a button.

Hope you don`t mind that I talk all day blah blah at you ;-) I just want that his tool really gets good with a great user experience as I will use it often ;-)

Oct 31, 2010 at 5:29 AM

I agree I need to work on positioning the format bar.  I will experiment with different algorithms.  I implemented your suggestion of only showing the format bar when at the end of a mouse selection, and not during a selection, or on keyboard selection.  As for your issue, you could try shortening your format bar as it looks longer than the RichTextBox, and the current positioning does not expect that; at least until I can improve it.  The current positioning tries to keep it inside the RichTextBox area for now.

Oct 31, 2010 at 8:59 PM
Edited Oct 31, 2010 at 9:18 PM

I would not use the Selection Rectangle as the limiting area where you can show the Format Bar. Then you are self-limiting your control. The user must be able to show long/tall format bars without being cut off.

Take the parent Window and its  width/left/top etc. values as information where to position the format bar. Code form code project to find the first object typeof(Window)

// walk up the visual tree to find object of type T, starting from initial object
public static T FindUpVisualTree<T>(DependencyObject initial) where T : DependencyObject
DependencyObject current = initial;

while (current != null)
current = VisualTreeHelper.GetParent(current);
if (current as T != null) break;
return current as T;


Oct 31, 2010 at 9:17 PM

It isn't as simple as you describe.  The problem is that the control resides inside the adoner layer of the RichTextBox contol.  Then you have to deal with the current mouse position as releated to the RichTextBox NOT the parent Window, or unexpected and unwanted positioning will occur.

Also, there is a much easier way to get the Window by using the Window.GetWindow method.

I have modified the positioning in the latest source.  Give it a try.

Oct 31, 2010 at 9:21 PM

Hehe of course its not as simple as I describe it. I talk non-tech things and only YOU know how to really implement it ;-)


Window.GetWindow   :X   nice...

what a pain... HAHA ;P I test it tomorrow and let you know.

Nov 1, 2010 at 1:31 PM
Edited Nov 1, 2010 at 3:15 PM

Hello Brian,

have just integrated your new code in my project everything works just the FormatBar is not shown. Then I have read again the posts:

This I have made:



 <toolkit:RichTextBoxFormatBar />



 This I have made not:

You create your own format bar by creating a control that inherits from IRichTextBoxFormatBar.  I will work on styling the Drag Thumb.

I am a bit confused about the above statement. Ok create a class and implement IRechTextBoxFormatBar. And then... I do not really get it.

Actually You already do that via: public partial class RichTextBoxFormatBar : UserControl, IRichTextBoxFormatBar ???

I just want to use your FormatBar + Thumb. The content will vary strongly on every users requirements.


EDIT: ups sorry I implement it in the weekly view but started always the daily view which has still old code... :P laters then...


Nov 1, 2010 at 3:11 PM

Sorry for the confusion.  You have the option of using the default RichTextBoxFormatBar control, or creating your own by implementing the IRichTextBoxFormatBar interface.

Nov 1, 2010 at 3:22 PM

ah no biggy Brian, its odd that I answered/edited here 3:15 pm and you answered 3:11 I could swear I did a refresh and did not see your answer, anyway...

Now it works was just the wrong view...

Ok there is one Bug to the default behavior of the MS RichTextBox or Office Word. When you select text and format it then the visibility of the selection is gone. I extra said "visibility" because somehow the selection is still here because when I

press again a format button like "Bold" the former selected text still gets boldly formatted.

Feature improvement => Make the drag thumb horizontally stretched because the user CAN drag the whole "Bar" but its not visible marked via a thumb. So the user will see inconsistency getting a tooltip "click to drag" when he is on the "Bar" where no grip is visible but still he can drag the whole Format bar.

More later...




Nov 1, 2010 at 3:37 PM
Edited Nov 1, 2010 at 3:39 PM

I am aware of the issue you described.  This is a known issue that I cannot control.  I tried reselecting it, but because of the code to update the visual state of the format bar it will go into an infinite loop and crash.  So this is just an annoyance that we will have to deal with for now.

EDIT: Also, I did not like the way it looked when the grip was the entire size of the bar, so I am going to leave it the way it is, but you are welcome to modify it for your needs ;0)

Nov 1, 2010 at 5:31 PM

quote:"This is a known issue that I cannot control." 

ouch... Brian out of control what can we except in future from our one man control vendor XD.


Another bug =>

I have just clicked somewhere did not select anything but still the selection.Text.Length is == 3 chars


yes I did not like either the look of  a stretched grip but I found it somehow inconsistent. Anyway that just came quickly to my mind and I just tell it here prolly I will use your  tiny grip :P



Nov 1, 2010 at 5:42 PM

Yes, once again I have experience the "no text selected but Microsoft RichTextBox says there is text selected" issue.  Frankly, I can't do anything about that.  If the RichTextBox says something is selected, then we show the format bar.  This may be a bug with the RichTextBox itself.  So far I know of only the two already stated annoyances, the "Selection is not showing, but it is still selected" and the "no text selected but Microsoft RichTextBox says there is text selected" issues.  I believe these are minor issues and the benefits of the format bar outweigh the drawbacks.

Nov 1, 2010 at 5:53 PM
Edited Nov 1, 2010 at 6:50 PM

Yes, once again I have experience the...


ah have I already told that to you? sorry then I forgot...

I send you a private pm with a question...

and it would be cool if you post the new FormatBar on the HOME site of your project because I think its out of alpha now ;-)


Nov 1, 2010 at 6:14 PM

No you didn't tell me yet, I just have seen it for myself and thought, "that is annoying!".  I will try to put it on the Home site tonight.  I am at work now :0)  Thanks for all of your feedback.  Without your involvement the format bar would not turn out as good as it has.

Nov 1, 2010 at 6:52 PM

ah no problem it was pretty much in my own interest ;-)


Nov 2, 2010 at 4:35 AM

Good news, I solved the "Selection is not showing, but it is still selected" problem. I implemented a work around that seems to work.  Now the text will remain highlighted when applying text transformations.  GIve it a try.

Nov 2, 2010 at 4:42 AM
Edited Nov 2, 2010 at 4:43 AM

I just found the problem causing the "no text selected but the RichTextBox says there is" issue.  I am handling the PreviewMouseLeftButtonUp event to show and hide the format bar.  So when you have something selected and then click once this event occurs before the text selection is changed.  So it appears I am handling the event too early, the text selection hasn't reset yet.  But I can't use the bubbling MouseLeftButtonUp event because I run into other issues.  I will have to think about this one.

Nov 2, 2010 at 5:01 AM

More good news.  I fixed the "no text selected but the format bar is still showing" issue.  Now when you select text and format it, then click off of the text, the format bar will hide.

Nov 3, 2010 at 9:46 PM
Edited Nov 3, 2010 at 9:47 PM

I can`t test it now but at the weekend ok? am so busy with my grouped DataGrid inside a combobox :P

ok  I will spy the code now :D

Nov 6, 2010 at 9:41 AM
Edited Nov 6, 2010 at 11:56 AM

hey cool stuff about the format bar! Should we not write that in the issue tracker?

Nov 6, 2010 at 4:46 PM

@BastienPascal - Yes, you are right, normally this type of stuff would go in the issue tracker, but the control was still in development and LisaTatum was helping me out.  Sometimes it is just easier to carry on a conversation, and honestly I didn't even think about it ;0).

Nov 6, 2010 at 10:45 PM
Edited Nov 6, 2010 at 10:55 PM

edit removed to brevity rofl...

Bad Lisa... you always step in the same trap... images and FileNotFoundException... :P


ok works cool Brian so far.

Nov 6, 2010 at 11:13 PM

...except I have something odd never seen before:


looks like my DataGrid WAS scrolled automatically. That happened NEVER before your new code, I will observe that.

Nov 7, 2010 at 9:36 PM

... I will observe that yes but maybe I never observed that behavior before in my code maybe its normal ;-)

I have a FEATURE REQUEST for the RichTextFormatBar:

Integrate your ColorPicker as TextForegroundColorPicker and TextBackgroundColorPicker, what do you think?

Nov 7, 2010 at 9:39 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.