Make Button enabled/disabled depending on the TextBox Text property in WPF?

14
votes

I was looking for code through google that enables and disables a button based on the text property from a textbox. If the textbox has some text then the button should be enabled or otherwise button should be disabled.

I got some code but code in xaml but no c#. I am not being able to understand how it works.

Please help me to understand the behaviour of the following code:

<TextBox Name="txtName" Width="100" Height="30"></TextBox>

<Button Content="Add Name " Width="100" Height="30" 
  IsEnabled="{Binding ElementName=txtName, Path=Text.Length, Mode=OneWay}"/>

How is the IsEnabled button property working? How is true and false set to the IsEnabled property? What is Path? How does it work?

5
wpfxamldata-binding

5 Answers

8
votes

This article and article explain WPF data bindings and how paths work.

But the binding above will watch the Text property on the TextBox for changes. It will then watch the Length property on the value returned from the Text property, which is a string. The value of the Length property is passed to the IsEnbled property.

The value must also be converted, as you are assigning an Int32 (the Length property) to a Boolean (the IsEnabled property). This is generally done via type converters, which is why the above works (which surprises me).

UPDATE:

The first link above no longer works, as MSDN Magazine articles older than 2008 are no longer available online. They are available as CHM files though. The CHM link for the associated article, titled "Data Points: Data Binding in WPF", is:

http://download.microsoft.com/download/3/a/7/3a7fa450-1f33-41f7-9e6d-3aa95b5a6aea/MSDNMagazine2007_12en-us.chm

From MSDN:

2008 and older issues are only available as .chm files. On most versions of windows you must first save these files to your local machine, and then unblock the file in order to read it. To unblock a file, right click on it, and select properties, and then select the ‘unblock’ button. The content will then be available to read.

3
votes

See this post for an example of how to disable a Button based on TextBox content.

Whilst this approach will work, it is better practice to use an ICommand.

In response to comments

ElementName = the name of the control in the XAML to which we are binding. The example below would therefore be {Binding ElementName=aName}

<TextBox x:Name="aName" />

Path = the property path of the value that you want on that element. For example, if you wanted to get the value of the Text property, you would use {Binding Path=Text}. If you wanted to get the length of the Text property, you use {Binding Path.Text.Length} and so on.

Mode=OneWay = the direction in which the binding is evaluated. This is explained here

1
votes

Add a property to your view model that calculates the value for IsEnabled and bind to that.

In the setter for the property that you have bound the TextBox.Text value to you also trigger the changed event for the IsEnabled property.

1
votes

If you do not want to use MVVM/databinding you could:

  1. You could add a DataTrigger to the style of the TextBox and disable/enable the button there.

  2. Or bind the IsEnabled property of the Button to the Text property of the TextBox and use a value converter to turn a string length into a boolean.

1
votes

this is the new Binding syntax in WPF (xaml).

  1. You are binding to txtName TextBox control/element
  2. You use Path to specify to what property of the element u r trying to bind to. in this case you are binding to TextBox's Text property and then Text's Length property.

So, when textbox is empty. TextBox.Text.Length = 0 which means it will be disabled.

as soon as you enter any value, it becames >= 0 which gets translated to true.

i would stronly recommend reading about Binding in WPF before trying to code. It is quite different in WPF compoared to WinForm