Customizing visibility using the MVVM template in silverlight

Question

I take one grid in silverlight. Initially textbox2 is invisible. When I click on textbox1, we see a visible text field2. I try this 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 great.

But I want to use the MVVM pattern. Therefore, I do not want to use eventHandler. So how to do this using the MVVM pattern?

Answer 1

edit: sorry, I thought you meant that the text box should be visible, when the other has focus, I changed my internal answer.

I cannot try it at the moment, but you are binding the Visibility property of your text field to the SelectionLength property of another, using valueconverter:

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

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

:

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

viewmodel

 public bool IsVisible
    {
        get
        {
            return _isVisible;
        }

        set
        {
            if (_isVisible == value)
            {
                return;
            }

            _isVisible = value;
            RaisePropertyChanged("IsVisible");
        }
    }

, BoolToVisibility Converter BoolToVisibilityConverter

  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (parameter == null)
        {
            return ((bool)value == true) ? Visibility.Visible : Visibility.Collapsed;
        }
        else if (parameter.ToString() == "Inverse")
        {
            return ((bool)value == true) ? Visibility.Collapsed : Visibility.Visible;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

TextBox

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

 <Textbox x:name="textbox2" Visibility={Binding IsVisible,
          Converter={StaticResource BoolToVisibilityConverter}}/>

.

Answer 3

, , - SelectionChanged, ViewModel. SL4 , TextBox SelectionChanged .

: EventToCommand Behavior

, ViewModel, Visibility ViewModel PropertyChanged.

Using my ViewModelSupport library , the virtual machine will 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;
  }
}    

}

Then you attached the SelectionChanged event to the SelectionChanged command in the VM and the Textbox2 visibility attribute to the ShowTextbox2 property in the virtual machine.

Good luck.

Answer 4

If you use MVVM Light, you can also do it like this:

using System.Windows; //place it at the top of your view model class.

private Visibility _isVisible = Visibility.Collapsed;

public Visibility IsVisible
{
    get
    { return _isVisible; }

    set
    {
        if (_isVisible == value) { return; }

        RaisePropertyChanging(() => IsVisible);

        _passwordMissing = value;

        RaisePropertyChanged(() => IsVisible);


    }
}