13 Replies - 24107 Views - Last Post: 07 June 2012 - 04:38 PM Rate Topic: -----

#1 keitheweber  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-September 08

How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 08:51 AM

I am new to WPF and xaml. I'm trying to figure out how to create placeholder text inside a textbox that is visible when the textbox does not have focus and doesn't have a value set (the Text is null).

I've been able to create a custom class that extends TextBox, but I am pretty sure that this can be done through xaml.
Is This A Good Question/Topic? 0
  • +

Replies To: How to create "placeholder" text in a textbox in xaml

#2 Ryano121  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1362
  • View blog
  • Posts: 3,002
  • Joined: 30-January 11

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 08:55 AM

There is probably a better way of doing this without extending TextBox but its a solution -

http://c-sharp-snipp...older-text.html
Was This Post Helpful? 0
  • +
  • -

#3 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 3577
  • View blog
  • Posts: 11,130
  • Joined: 05-May 12

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 09:14 AM

The technique I'd seen in the past was having two TextBoxes occupying the same space, and a trigger that flips the visibility of the one with the placeholder. I can't seem to find a link to it anymore, but I remember thinking to myself that extending Textbox was more straightforward and involved less lines of "code" if you could call XAML code.
Was This Post Helpful? 0
  • +
  • -

#4 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5529
  • View blog
  • Posts: 11,843
  • Joined: 02-June 10

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 11:01 AM

I would never do the two textbox thing: That's just a hack.

Bind the textbox to a property, then set the default text of the property.

later when someone enters new text - that becomes the value of the property.
Was This Post Helpful? 1
  • +
  • -

#5 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,676
  • Joined: 24-August 11

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 12:17 PM

Check out the msdn page on textboxes. You might consider using events to clear the default textbox content when the textbox is clicked or gets focus. There are plenty of options, but as tlhIn`toq stated, swapping two textboxes is dirty, and honestly will require more work than doing it the right way.

EDIT: Fixed the MSDN link

This post has been edited by h4nnib4l: 07 June 2012 - 01:41 PM

Was This Post Helpful? 0
  • +
  • -

#6 Curtis Rutland  Icon User is online

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4490
  • View blog
  • Posts: 7,822
  • Joined: 08-June 10

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 12:30 PM

Wrong TextBox, h4nnib4l. This is about WPF.

It sounds like you are describing a Watermarked Text Box. If that's the case, I suggest the second answer on this thread:

http://stackoverflow...-textbox-in-wpf

Not the accepted one, but the one with many more votes.
Was This Post Helpful? 0
  • +
  • -

#7 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 3577
  • View blog
  • Posts: 11,130
  • Joined: 05-May 12

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 12:44 PM

View PostCurtis Rutland, on 07 June 2012 - 12:30 PM, said:

It sounds like you are describing a Watermarked Text Box. If that's the case, I suggest the second answer on this thread:

http://stackoverflow...-textbox-in-wpf

Not the accepted one, but the one with many more votes.

I like that one too, but it doesn't answer the OP's question where he wants to implement it fully in XAML. The WatermarkService there is XAML + code. If he was going to do XAML + code, then there is the extended Textbox that he already has.
Was This Post Helpful? 0
  • +
  • -

#8 Curtis Rutland  Icon User is online

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4490
  • View blog
  • Posts: 7,822
  • Joined: 08-June 10

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 12:49 PM

Hmm, I didn't even notice that part of the question. I'm not sure it can be done entirely with XAML. But by creating an Attached Property, you're at least gaining re-usability for other types.
Was This Post Helpful? 0
  • +
  • -

#9 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5529
  • View blog
  • Posts: 11,843
  • Joined: 02-June 10

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 01:00 PM

So you want this in pure XAML with no code behind to bind the text to?

OK. CHEAT.

Tell the XAML you are binding to a property that doesn't exist, then set your placekeeper text in the FallbackValue of the property

<TextBox Height="154" HorizontalAlignment="Left" Margin="44,40,0,0" Name="textBox1" VerticalAlignment="Top" Width="317" 
                 Text="{Binding Path=dummyproperty, FallbackValue='THis is a bunch of placekeeper text'}"/>


Attached Image
Was This Post Helpful? 0
  • +
  • -

#10 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 3577
  • View blog
  • Posts: 11,130
  • Joined: 05-May 12

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 01:02 PM

View PosttlhIn`toq, on 07 June 2012 - 11:01 AM, said:

I would never do the two textbox thing: That's just a hack.

Bind the textbox to a property, then set the default text of the property.

later when someone enters new text - that becomes the value of the property.


I think I went down this route before. I liked the simplicity and elegance of it because I needed to bind the input from the text box anyway.

It had issues though:
- It doesn't have the stylized faded text or whatever other style I wanted to use to denote that it was just a prompt.
- It makes handling required field difficult.
- Mismatching types

I can live without the pretty UI that I listed as the first issue, but the second issue was kind of a pain. It was relatively easy to distinguish the default text "Phone Number" from a valid entered phone number. I had to do some trickery with my Validator as I recall including breaking some encapsulation: my Validator ended up knowing what the default text was. "Weight" was kind of fun because I wanted to bind my text field to a numeric property, but now I needed to support text. I think with judicious use of TypeConverters I could have made things bind with a Decimal, but I figured since the ViewModel was supposed to mediate between the View and Model, it may as well mediate and return invalid or missing weight as the default text. Things got harder to distinguish when it came to "Address" (as well as other more free form fields like "Comments"). Yes, it is a really low probability that somebody's address will be "Address", but what if their address really is "Address"?

This post has been edited by Skydiver: 07 June 2012 - 01:02 PM

Was This Post Helpful? 0
  • +
  • -

#11 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,676
  • Joined: 24-August 11

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 01:40 PM

Sorry, this is what I should have linked to. But I guess it's a moot point, because like Curtis Rutland I missed the XAML-only contraint in the question.
Was This Post Helpful? 0
  • +
  • -

#12 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 3577
  • View blog
  • Posts: 11,130
  • Joined: 05-May 12

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 02:26 PM

View PosttlhIn`toq, on 07 June 2012 - 01:00 PM, said:

So you want this in pure XAML with no code behind to bind the text to?

OK. CHEAT.

Tell the XAML you are binding to a property that doesn't exist, then set your placekeeper text in the FallbackValue of the property

<TextBox Height="154" HorizontalAlignment="Left" Margin="44,40,0,0" Name="textBox1" VerticalAlignment="Top" Width="317" 
                 Text="{Binding Path=dummyproperty, FallbackValue='THis is a bunch of placekeeper text'}"/>

Is there a simple trick to getting it to bind to the real property when the user enters data? (And revert back to the dummy property when the user deletes all the data or fails validation?)
Was This Post Helpful? 0
  • +
  • -

#13 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5529
  • View blog
  • Posts: 11,843
  • Joined: 02-June 10

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 02:52 PM

View PostSkydiver, on 07 June 2012 - 03:26 PM, said:

Is there a simple trick to getting it to bind to the real property when the user enters data? (And revert back to the dummy property when the user deletes all the data or fails validation?)


Why? Just use the real property with the fallback value: That's what is for, to provide a value in the event there isn't one.

Beyond that its getting fairly complex. I'd do a lot of stuff in C# in the code behind, but that seems to not be acceptable.
Was This Post Helpful? 0
  • +
  • -

#14 Skydiver  Icon User is offline

  • Code herder
  • member icon

Reputation: 3577
  • View blog
  • Posts: 11,130
  • Joined: 05-May 12

Re: How to create "placeholder" text in a textbox in xaml

Posted 07 June 2012 - 04:38 PM

View PosttlhIn`toq, on 07 June 2012 - 02:52 PM, said:

View PostSkydiver, on 07 June 2012 - 03:26 PM, said:

Is there a simple trick to getting it to bind to the real property when the user enters data? (And revert back to the dummy property when the user deletes all the data or fails validation?)


Why? Just use the real property with the fallback value: That's what is for, to provide a value in the event there isn't one.


Running the app shows the real value rather than the fallback value.
    <StackPanel>
        <TextBox Height="154" HorizontalAlignment="Left" Name="textBox1" VerticalAlignment="Top" Width="317" 
                 Text="{Binding Path=Age, FallbackValue='THis is a bunch of placekeeper text'}"/>
        <TextBox Height="154" HorizontalAlignment="Left" Name="textBox2" VerticalAlignment="Top" Width="317" 
                 Text="{Binding Path=Nickname, FallbackValue='THis is a bunch of placekeeper text'}"/>
    </StackPanel>

    class ViewModel
    {
        public int Age { get; set; }
        public string Nickname { get; set; }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel() { Age = -1 };
        }
    }


Output is:
Attached Image

I also tried:
    class ViewModel
    {
        public int? Age { get; set; }
        public string Nickname { get; set; }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }


This just results in two empty TextBoxes.

View PosttlhIn`toq, on 07 June 2012 - 02:52 PM, said:

Beyond that its getting fairly complex. I'd do a lot of stuff in C# in the code behind, but that seems to not be acceptable.

Yeah, for the MVVM Zealots it is unacceptable. They barely accept that the pattern they espouse is actually MVVM+C where sometimes there is no getting around having a controller unless you want to pollute the Model, or the View, or the View Model with concepts that don't really belong there. Just like in the quick and dirty code above, the MainWindow constructor should not have known to instantiate a ViewModel. It should be whatever constructed the MainWindow that should tell it what view model to use. Purist say that a DI framework would take care of this. In that case, isn't the DI framework playing the part of a controller? :lol:

This post has been edited by Skydiver: 07 June 2012 - 04:48 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1