Disabled button when textbox is empty in silverlight mvvm? - asp.net

Question

i'm working on silverlight with MVVM pattern. in design page i have three textbox and one button. here my requirement is if the 3 textbox is empty or null means the button is disabled.
how to achieve this.. any help..?

Answer 1

Create a public property in your VM that checks the conditions you've stated above and returns a Boolean accordingly. Bind this property to your button IsEnabled property.
Make sure to fire PropertyChangedEvent once every condition status is changed (i.e in the textbox changed event).

Answer 2

Here i have attached my coding..
Xaml:
<Button Content="Add" Width="59" IsEnabled="{Binding ButtonIsEnabled}" Height="23" Margin="256,75,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" TabIndex="4" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<si:CallDataMethod Method="AddEmployee"/>
<si:SetProperty TargetName="LayoutRoot" PropertyName="Background" Value="LightBlue"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<TextBlock FontWeight="Bold" Height="26" HorizontalAlignment="Left" Margin="47,12,0,0" Name="textBlock1" Text="First Name:" VerticalAlignment="Top" Width="77" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="130,12,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Fname,Mode=TwoWay}" TabIndex="1" AcceptsReturn="False">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="ButtonIsEnabled"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBlock FontWeight="Bold" Height="25" HorizontalAlignment="Left" Margin="35,44,0,0" Name="textBlock2" Text="Second Name:" VerticalAlignment="Top" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="130,44,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Text="{Binding Sname,Mode=TwoWay}" TabIndex="2" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="ButtonIsEnabled"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBlock FontWeight="Bold" Height="23" HorizontalAlignment="Left" Margin="45,75,0,0" Name="textBlock3" Text="Department:" VerticalAlignment="Top" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="130,75,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" Text="{Binding Dept,Mode=TwoWay}" TabIndex="3" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="ButtonIsEnabled"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
ViewModel Code:
EmployeeListViewModel.cs
public bool ButtonIsEnabled
{
get
{
return !(((string.IsNullOrEmpty(this.Fname)) && (string.IsNullOrEmpty(this.Sname)) && (string.IsNullOrEmpty(this.Dept))));
}
}
private string _fname;
public string Fname
{
get
{
return _fname;
}
set
{
if (_fname != value)
{
_fname = value;
RaisePropertyChanged("Fname");
//RaisePropertyChanged("ButtonIsEnabled");
}
else
{
_fname = value;
RaisePropertyChanged("Fname");
}
}
}
private string _sname;
public string Sname
{
get
{
return _sname;
}
set
{
if (_sname != value)
{
_sname = value;
RaisePropertyChanged("Sname");
RaisePropertyChanged("ButtonIsEnabled");
}
else
{
_sname = value;
RaisePropertyChanged("Sname");
}
}
}
private string _dept;
public string Dept
{
get
{
return _dept;
}
set
{
if (_dept != value)
{
_dept = value;
RaisePropertyChanged("Dept");
RaisePropertyChanged("ButtonIsEnabled");
}
else
{
_dept = value;
RaisePropertyChanged("Dept");
}
}
}
My Problem is:
1) It is worked for the 1st textbox. while i entered anything in the 1st textbox the button is in disabled mode. But if i moved to the 2nd TextBox means the button is enabled.
2) I need all the textbox will Validated after that only Button is enabled. If any one of the Textbox is Empty means the button is again went to disabled mode..
Any Help..?

Answer 3

If you are using Silverlight 5 then there is a very nice solution of MultiBinding through custom markup extensions: MultiBinding in Silverlight 5.
There is also an IMultiValueConverter which allows you to convert collection of binded values to single value (in your case - bool). Using both extension and converter you can easily achieve desired functionality.