WPF Questions

What are different types of binding modes in WPF?

There are 4 types of Binding Modes in WPF:
1. OneWay
2. TwoWay
3. OneWayToSource
4. OneTime

OneWay - updates the target property only when the source property changes.
TwoWay - updates the target property or the property whenever either the target property or the source property changes.

OneWayToSource - updates the source property when the target property changes.
Default - causes the default Mode value of target property to be used.
OneTime - updates the target property only when the application starts or when the DataContext undergoes a change.

There are three types of Triggers available.

1.       Event Trigger

2.       Property Trigger 

3.       Data Trigger

Property trigger

The most common trigger is the property trigger, which in markup is simply defined with a <Trigger> element. It watches a specific property on the owner control and when that property has a value that matches the specified value, properties can change. In theory this might sound a bit complicated, but it's actually quite simple once we turn theory into an example:

Download sample

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggersSample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="StyleTriggersSample" Height="100" Width="300">

    <Grid>

        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">

            <TextBlock.Style>

                <Style TargetType="TextBlock">

                    <Setter Property="Foreground" Value="Blue"></Setter>

                    <Style.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Foreground" Value="Red" />

                            <Setter Property="TextDecorations" Value="Underline" />

                        </Trigger>

                    </Style.Triggers>

                </Style>

            </TextBlock.Style>

        </TextBlock>

    </Grid>

</Window>

Event triggers

Event triggers, represented by the <EventTrigger> element, are mostly used to trigger an animation, in response to an event being called. We haven't discussed animations yet, but to demonstrate how an event trigger works, we'll use them anyway. Have a look on the chapter about animations for more details. Here's the example:

Download sample

<Window x:Class="WpfTutorialSamples.Styles.StyleEventTriggerSample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="StyleEventTriggerSample" Height="100" Width="300">

    <Grid>

        <TextBlock Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">

            <TextBlock.Style>

                <Style TargetType="TextBlock">

                    <Style.Triggers>

                        <EventTrigger RoutedEvent="MouseEnter">

                            <EventTrigger.Actions>

                                <BeginStoryboard>

                                    <Storyboard>

                                        <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />

                                    </Storyboard>

                                </BeginStoryboard>

                            </EventTrigger.Actions>

                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseLeave">

                            <EventTrigger.Actions>

                                <BeginStoryboard>

                                    <Storyboard>

                                        <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />

                                    </Storyboard>

                                </BeginStoryboard>

                            </EventTrigger.Actions>

                        </EventTrigger>

                    </Style.Triggers>

                </Style>

            </TextBlock.Style>

        </TextBlock>

    </Grid>

</Window>

Data triggers

Data triggers, represented by the <DataTrigger> element, are used for properties that are not necessarily dependency properties. They work by creating a binding to a regular property, which is then monitored for changes. This also opens up for binding your trigger to a property on a different control. For instance, consider the following example:

<Window x:Class="WpfTutorialSamples.Styles.StyleDataTriggerSample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="StyleDataTriggerSample" Height="200" Width="200">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

        <CheckBox Name="cbSample" Content="Hello, world?" />

        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">

            <TextBlock.Style>

                <Style TargetType="TextBlock">

                    <Setter Property="Text" Value="No" />

                    <Setter Property="Foreground" Value="Red" />

                    <Style.Triggers>

                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">

                            <Setter Property="Text" Value="Yes!" />

                            <Setter Property="Foreground" Value="Green" />

                        </DataTrigger>

                    </Style.Triggers>

                </Style>

            </TextBlock.Style>

        </TextBlock>

    </StackPanel>

</Window>