Learning how to communicate again

As we tend not to handle UI events directly, when using MVVM, we need alternative ways to implement the same functionality that they provide. Different methods are required to reproduce the functionality of different events. For example, the functionality of the SelectionChanged event of a collection control is typically reproduced by data binding a View Model property to the SelectedItem property of the collection control:

<ListBox ItemsSource="{Binding Items}" 
  SelectedItem="{Binding CurrentItem}" /> 

In this example, the setter of the CurrentItem property will get called by the WPF Framework each time a new item is selected from the ListBox. Therefore, instead of handling the SelectionChanged event in the code behind, we can call any method directly from the property setter in the View Model:

public TypeOfObject CurrentItem 
{ 
  get { return currentItem; } 
  set 
  { 
    currentItem = value; 
    DoSomethingWithTheNewlySelectedItem(currentItem); 
  } 
} 

Note that we need to keep any methods that we call from data bound property setters from doing too much, as the time that it takes to execute them could negatively affect the performance when entering data. However, in this example, we would typically use this method to start an asynchronous data access function using a value from the current item or alter the value of another property in the View Model.

Many other UI events can be replaced with some form of Trigger in the XAML markup directly. For example, imagine that we had an Image element that was set as the Content property value of a Button control and that we wanted the Image element to be semi-transparent when the Button was disabled. Instead of handling the UIElement.IsEnabledChanged event in the code behind file, we could write a DataTrigger in a Style that we could apply to the Image element:

<Style x:Key="ImageInButtonStyle" TargetType="{x:Type Image}"> 
  <Setter Property="Opacity" Value="1.0" /> 
  <Style.Triggers> 
    <DataTrigger Binding="{Binding IsEnabled,       
      RelativeSource={RelativeSource FindAncestor, 
      AncestorType={x:Type Button}}, FallbackValue=False}" 
      Value="False"> 
      <Setter Property="Opacity" Value="0.5" /> 
    </DataTrigger> 
  </Style.Triggers> 
</Style> 

Binding syntax will be covered in detail in Chapter 4, Becoming Proficient With Data Binding, but in short, the binding in this DataTrigger is specifying the target as the IsEnabled property of the ancestor (or parent) of the Image element with a type of Button. When this binding target has a value of False, the Opacity property of the Image will be set to 0.5 and set back to its original value when the target property value is True. Therefore, the Image element in our Button will become semi-transparent when the Button is disabled.