Posted by: Zeeshan Amjad | June 23, 2010

Triggers in Data template


We just saw how to hide control conditionally using data trigger here. We can do the same thing by defining the data trigger in data template. Let’s take look at the class diagram of template.

Template_02

It is important that trigger property is defined only in control template and data template, but not in items panel template. Because hierarchical data template is inherited by data template, therefore this will also have trigger property. Here is a class diagram of DataTemplate class.

DataTemplate

We will define the data trigger inside the data template trigger property. We also define the binding for trigger to check the appropriate value and to hide specific text block use the TargetName property of setter. Here is a class hierarchy of Setter.

SetterBase

TargetName property is defined in Setter class. Here is a class diagram of Setter.

Setter

Now lets make the same program with data template trigger. Here is a XAML code to define triggers for data template.

<DataTemplate>
	<StackPanel Orientation="Horizontal">
		<TextBlock Text="{Binding Path=Reason}" Width="55"/>
		<TextBlock Name="txtDebug" Text="{Binding Path=Explanation}"/>                        
	</StackPanel>
	<DataTemplate.Triggers>
		<DataTrigger Binding="{Binding Path=Explanation}" Value="Hidden">
			<Setter TargetName="txtDebug" Property="Visibility" Value="Hidden"/>
		</DataTrigger>
	</DataTemplate.Triggers>
</DataTemplate>

Here is complete XAML code of the program.

<Window x:Class="WpfDataTemplate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Data Template" Height="300" Width="300">
    <Grid>
        <ListBox ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Reason}" Width="55"/>
                        <TextBlock Name="txtDebug" Text="{Binding Path=Explanation}"/>                        
                    </StackPanel>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding Path=Explanation}" Value="Hidden">
                            <Setter TargetName="txtDebug" Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
                
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

Here is complete C# code of the program.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace WpfDataTemplate
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        ObservableCollection<ReasonInfo> reasons = new ObservableCollection<ReasonInfo>();

        public Window1()
        {
            InitializeComponent();

            reasons.Add(new ReasonInfo("Reason 1", "Explanation of reason 1"));
            reasons.Add(new ReasonInfo("Reason 2", "Explanation of reason 2"));
            reasons.Add(new ReasonInfo("Reason 3", "Hidden"));
            reasons.Add(new ReasonInfo("Reason 4", "Explanation of reason 4"));

            DataContext = reasons;
        }
    }

    public class ReasonInfo
    {
        public ReasonInfo(String reason, String explanation)
        {
            Reason = reason;
            Explanation = explanation;
        }

        public String Reason
        { get; set; }

        public String Explanation
        { get; set; }
    }
}

Here is the output of the program.

DataTriggerDataTemplate

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: