Setting Visibility using MVVM pattern in silverlight

Question

I take one grid in silverlight. Initially textbox2 is invisible. When I click on textbox1 we have to visible textbox2. I try it as belows:

<TextBox x:Name="textbox1" SelectionChanged="txt1_SelectionChanged"/>
<TextBox x:Name="textbox2 "  Visibility="Collapsed"/>

private void txt1_SelectionChanged(object sender, RoutedEventArgs e)
{            
    textbox2 .Visibility = Visibility.Visible;
}

It works fine.

But I want to use MVVM pattern. So there I don't want to use eventHandler. So how to do that using MVVM pattern?

Answer 1

edit: sorry, i thought you meant the textbox to be visible when the other one has focus, I changed my inital answer.

I can not try it at the moment, but you bind the Visibility property of your textbox to the SelectionLength property of the other, using a valueconverter:

<UserControl.Resources>
    <local:IntToVisibilityConverter x:Key="IntToVisibilityConverter" />
</UserControl.Resources>

<Textbox 
  x:name="textbox2" 
  Visibility={Binding SelectionLength, 
              ElementName="textbox1" 
              Converter={StaticResource IntToVisibilityConverter}}
/>

implement the value converter like this:

public class IntToVisibilityConverter : IValueConverter 
{
  public Object Convert(Object value, Type targetType, Object parameter, CultureInfo culture)
  {
    return (int)value > 0 ? Visibility.Visible : Visibility.Hidden;
  }

  public Object ConvertBack(Object value, Type targetType, Object parameter, CultureInfo culture) 
  {
    throw new InvalidOperationException("Converter cannot convert back.");
  }
}

Answer 2

The biggest problem you will have is getting the SelectionChanged event sent to the ViewModel. Commands in SL4 only work on button clicks, so TextBox SelectionChanged events can't fire commands by default.

There are a few solutions out there for you: Binding Commands to ANY event EventToCommand Behavior

Once you have done that, you can have a command in your ViewModel that sets a Visibility property in your ViewModel and fires the PropertyChanged event.

Using my ViewModelSupport library, the VM would look like this:

public class MyViewModel : ViewModelBase
{
  public Visibility ShowTextbox2
  {
    get { return Get(() => ShowTextbox2, Visibility.Collapsed); }
    set { Set(() => ShowTextbox2, value); }
  }

  public void Execute_SelectionChanged()
  {
    ShowTextbox2 = Visibility.Visible;
  }
}    

}

You would then bind the SelectionChanged event to the SelectionChanged command in the VM and the Textbox2 visibility attribute to the ShowTextbox2 property in the VM.

Good luck.