Some Important WPF Concepts

What is a Trigger?

A Trigger is typically used in a Style or ControlTemplate. It triggers on the properties of whatever is being templated, and sets other properties of the control (or of specific template elements). For example, you would use a Trigger on IsMouseOver to respond to the mouse being over the control, and the setters might update a brush to show a "hot" effect.

Why do we use Trigger?

Triggers are used in styles to perform actions on a change of any property value or event fires. Triggers create visual effects on controls. By using Triggers we can change the appearance of Framework Elements.

How many types of triggers are in WPF?

There are five types of triggers supported by WPF; they are,

1. Property Trigger
2. Data Trigger
3. MultiTrigger
4. MultiDataTrigger
5. Event Trigger

Property Trigger

The simplest form of a trigger is a property trigger that watches for a dependency property to have a certain value.

For example, if we wanted to light up a button in yellow as the user moves the mouse over it, we can do that by watching for the IsMouseOver property to have a value of "True".

This trigger gets active when UI elements property value changes. The below Trigger is created on a Button. It will set Opacity to 0.5; when the button is pressed the property changes.

Data Trigger

DataTriggers are Triggers that watch a bound value instead of a Dependency Property. They allow you to watch a bound expression, and will react when that binding evaluates equal to your value.

For example, you could set a DataTrigger on "{Binding Value}" or "{Binding ElementName=MyTextBox, Path=IsChecked}". You can even use Converters with DataTriggers, such as,

<DataTrigger Binding="{Binding SomeInt, Converter={StaticResource IsGreaterThanZero}}" Value="True">

This trigger gets active when Binding Data matches specified conditions. Below, DataTrigger is created on Picture property of binding data.

Setter objects of the DataTrigger describe property values to apply when binding data matches the condition. Picture is Byte[] property of the class.

If Picture is null then DataTrigger applies on the image to set the image source to noImage.png, otherwise it will set  the image source from the picture.

It's the same as if picture is null, it applies TextBlock value to "No Image Availalbe" and foreground color to red, otherwise it sets default value from data.

MultiTrigger

A MultiTrigger is used to set an action on multiple property changes. It will execute when all conditions are satisfied.

For example, suppose we want to change the background color of a TextBox when the mouse moves, and focus and lose focus, for that you can use a MultiTrigger.

<Window x:Class
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MultiTRiggerDEmo" Height="300" Width="300" Loaded="Window_Loaded">
  <Window.Resources>
    <Style x:Key="MultTrigg" TargetType="{x:Type TextBox}" ="">
      <Style.Triggers>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsFocused" Value="True">
              </Condition>
              <Condition Property="IsMouseOver" Value="True">
                </Condition>
              </MultiTrigger.Conditions>
          <MultiTrigger.Setters>
            <Setter Property="Background" Value="yellow" >
              </Setter>
            </MultiTrigger.Setters>
        </MultiTrigger>
      </Style.Triggers>
      </Style>
    </Window.Resources>
  <StackPanel>
    <TextBox Style="{StaticResource MultTrigg}"></TextBox>
  </StackPanel>
  </Window>

MultiDataTrigger

MultiTrigger and MultiDataTrigger are the same, except they allow you to specify multiple conditions (properties or bindings respectively) and take effect only when all conditions are satisfied.

Event Trigger

EventTrigger is used to trigger actions in response to events.

For example

Suppose there is a need to fire a command on the click of button or on the select event of a Combobox when selecting a row of a grid view in WPF. You can then use an EventTrigger.

This trigger gets active when RoutedEvent of FrameworkElement is raised. Event Trigger is generally used to perform some animation on control such as colorAnimation or doubleAnumation using KeyFrame etc.

Code Example

In the illustration I have used an event trigger on the item selection of a list box.

<ListBox Name="employeeListBox" ItemsSource="{Binding empList}" Grid.Row="0" SelectedItem="{Binding SelectedIndex}">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
          <i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding ElementName=employeeListBox, Path=SelectedValue}"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </ListBox>

Similarly you can use it in the button, combobox GridView, and so on.

Different Containers in WPF

In WPF, a window cannot have multiple controls. WPF window must have only one control which is called container and container has multiple controls.

There are different containers in WPF. Those are Grid, Stack Panel, Wrap Panel, Dock Panel and Canvas.

Grid Container

Grid container is the default container where we can arrange the elements in our own fashion. We can arrange the elements in table format by using Grid container in WPF.

Stack Panel

By using Stack Panel in WPF we can arrange the elements in a Vertical or Horizontal format.

Wrap Panel

With the help of Wrap Panel we can arrange the elements in WPF Vertical and Horizontal format. Wrap Panel is the same as Stack Panel but it wraps according to sizes of the form. That is, the control in Wrap Panel is shifted to the next line automatically if the form size is getting changed.

Dock Panel

The container allows the user to place the control in the exact location whereever we want like Top, Bottom, Left, Right or Fill the entire container.

If we specify the location as left control it will be located at the left position, or if Top is specified it places it  in Top position. If we do not specify any position then control will occupy the entire space on the container.

Canvas

This container is used to place the control by specifying the position in pixel format. That means if you want to specify the control as 50 pixels from the top just provide the value as 50 for Canvas.Top attribute. We can use Canvas.Left, Canvas.Right, Canavas.Bottom attributes also.