locked
Rich Text Box question RRS feed

  • Question

  • Hi,

    I have text in Rich Text box that says, "Write a comment..."

    When someone clicks in this box on the prototype, I would like for the "Write a comment..." text to automatically disappear as soon as the person clicks in the box. 

    Is that possible?  If so, how?

    Thanks,

    Jeff

    Tuesday, May 29, 2012 4:21 PM

All replies

  • Hello Jmbtexas.  Have to ask … is that "Jim Beam Texas"?  That's what I always think of when I see your name.

    Anyways, when you think of a RichTextBox, you have to think of it in terms of a FlowDocument.  Getting to the content isn't always so easy or direct.

    Here is a working sample that removes the "Write A Comment..." when the RichTextBox gets focus...

    using System.Windows;
    using System.Windows.Documents;
    namespace WpfApplication3
    {
    	public partial class MainWindow : Window
    	{
    		public MainWindow()
    		{
    			this.InitializeComponent();
    		}
    		private void myRTB_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    		{
    			Paragraph p = myRTB.Document.Blocks.FirstBlock as Paragraph;
    			TextRange tr = new TextRange(p.ContentStart, p.ContentEnd);
    			if(tr.Text.Contains("Write A Comment..."))
    				tr.Text = "";
    		}
    	}
    }

    And the xaml...

    	<Grid x:Name="LayoutRoot">
    		<RichTextBox x:Name="myRTB" HorizontalAlignment="Left" Width="100" GotFocus="myRTB_GotFocus" Margin="8,8,0,0" Height="100" VerticalAlignment="Top">
    			<FlowDocument>
    				<Paragraph><Run Text="Write A Comment..."/></Paragraph>
    			</FlowDocument>
    		</RichTextBox>
    	</Grid>

    ~Christine

    My Gallery

    Tuesday, May 29, 2012 5:27 PM
  • Hi Christine!

    No, JMB are my initials but working with Sketchflow sometimes makes me wish I was drinking Jim Beam.  :-)

    Ok, I don't really know how to do anything with flow documents and xaml, so let me ask you this...

    I figured out how to make an identical rich text box "visible" (without the text) when you click on the first box (with the text), but how do I get the cursor to automatically appear in the new rich text box when it becomes "visible"?

    I'm using the Change Property Action behavior with a Property Name of "cursor", but I can't get it to work.  I still have to click in the new rich text box after it becomes "visible" to get the cursor to appear.

    And by the way, I appreciate the code from above.  I will work with a developer here to see if I can make it work, but I am curious to know if I can just make the cursor appear automatically in the new box when it becomes "visible". 

    Thanks,

    Jeff



    • Edited by jmbtexas Tuesday, May 29, 2012 6:33 PM
    Tuesday, May 29, 2012 6:16 PM
  • Is it a WPF Sketchflow or Silverlight?

    Are we trying to stay away from code?

    If not the most simple solution would be to use FocusManager.

    Add... "using System.Windows.Input;" to your cs file using statements.

    Then... say I wanted to focus it on Window Load...

    		private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			FocusManager.SetFocusedElement(this, myRTB);
    		}

    myRTB is the name I gave the RichTextBox.

    Since it is Sketchflow, just a mock up... then if you didn't want to go into code, you could always call a Storyboard.  Well that wouldn't focus the RTB. 

    So...Let me know if we can't use code.  If we can't I'll play with it a bit.

    ~Christine


    My Gallery

    Tuesday, May 29, 2012 6:28 PM
  • Christine,

    When I open a new project,  I always choose the "Silverlight Sketchflow Application" option.

    Yes, I want to stay away from code since I don't know how to write or apply any of it.

    I will ask someone later today if they can help with the code.

    In the meantime, can you help me do what I want to do without code?

    I just want to the cursor to automatically appear in the RTB when it becomes "visible" and/or "gets focus".

    What is the "cursor" Property Name for if it's not for something like what I am trying to do?

    Thanks,

    Jeff

    Tuesday, May 29, 2012 7:03 PM
  • Hmmm... with the tools available in Sketchflow (which I'm not all that familiar with) I can't find an easy way to do this.  The solution I first presented you with, works for WPF and not Silverlight.

    But!  Let me walk you through very simply doing the code which Blend makes SOOOO easy.

    1.  Get rid of your second RichTextBox and any Behaviors associate with it.

    2.  Highlight your first RichTextBox in the "Objects and Timeline".  (The one that says "Write a comment..."  Make sure it is enabled and not marked ReadOnly.) 

    3.  With that highlighted, click the event box in the properties panel.

           The one that looks like that.  Very top right of the screen.

      

    4.  Once you click it the events list will show up.  Go to the one that says "GotFocus".

        

    5.  Double-Click in the box.  Your GotFocus will be automatically started for you in the cs or code-behind file, which should now be open in Blend.  It will look like this, but with the name of your RichTextBox...

    		private void myFirstRTB_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    		{
    			// TODO: Add event handler implementation here.
    		}

    6.  Highlight and delete the line that starts "//TODO:  Add..."  (It's just a comment and we don't need it.)

      

    7.  Replace that line with the following 4 lines of code (for Silverlight).  Simply copy and paste this exactly as it is...

    			RichTextBox rtb = sender as RichTextBox;
    			rtb.SelectAll();
    			if (rtb.Selection.Text.ToString().Trim() == "Write A Comment...")
    				rtb.Selection.Text = "";
    8.  Change the part that says "Write A Comment..." to whatever your textbox says.

    9.  Then Build and run your project.

    What the code does...

    Line 1 says whatever RichTextBox is calling this method, I'm naming it rtb for now.

    Line 2 selects all the text inside the RichTextBox that we are calling rtb.

    Line 3 simply checks to see if the selected text is equal to the starter text or "Write A Comment...".   We're trimming all the spaces that the RichTextBox might have added to the end of that line with the Trim().

    Line 4 says that if line 3 was true and it really did say "Write A Comment..." then delete it and make it nothing.

    It really isn't my place to question how you are doing this at all, so forgive me if I've stepped out of bounds here.  But I think the above would take you all of a couple of minutes and be so much easier than trying to figure out how to make the ChangePropertyAction work for this particular/unique situation.

    Besides, your coding guys might be right impressed with you. :)

    ~Christine


    My Gallery



    Tuesday, May 29, 2012 8:28 PM
  • Bam!

    Works like a charm.  Thank you!  I don't really mind using code if someone else writes it and tells me where to put it.  ;-p

    I appreciate all the help Christine!  You are magnificent!

    Jeff "Jim Beam" Baylis

    Tuesday, May 29, 2012 9:20 PM
  • "And it ain't for choir boys!"

    Sweet!  Ya gotta love it when it when a project comes together.

    Have a great night!

    ~Christine


    My Gallery

    Tuesday, May 29, 2012 9:52 PM