Posted by: Zeeshan Amjad | June 25, 2015

Datatemplate Triggers


Sometime we need to display different values on user element than what is stored in corresponding data bind element. Such as we may store the status code in the form of integer or enum representing different states, but display some user defined string. IValueConverter is the natural choice in this situation. You can see the usage of IValueConverter here.

Alternatively we can do the same thing in XAML only with the help of DataTemplate Trigger. Let’s see we have a product class that have its name, code and status. Code is stored in the form of integer, but we want to display some user define string.

Code Snippet
    public class Product
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public int Status { get; set; }
    }

 

We want to display this information in grid, but display 0 as approved, 1 as reject and 2 as a pending. Here is a DataTemplate trigger to do this.

Code Snippet
<DataTemplate>
    <TextBlock x:Name="textBlock"/>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Status}" Value="0">
            <Setter TargetName="textBlock" Property="Text" Value="Approved"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Status}" Value="1">
            <Setter TargetName="textBlock" Property="Text" Value="Reject"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Status}" Value="2">
            <Setter TargetName="textBlock" Property="Text" Value="Pending"/>
                                        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

 

Note that here we use the name of TextBlock, so we can refer it latter to set the appropriate value. Also note that we are not doing binding in TextBlock, but in DataTrigger.

Here is complete C# code of the program.

Code Snippet
using System.Collections.ObjectModel;
using System.Windows;

namespace WpfDataTemplateTrigger
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<Product> products = new ObservableCollection<Product>();
        public MainWindow()
        {
            InitializeComponent();

            products.Add(new Product() {Name = "Product 1", Code = "A101", Status = 0});
            products.Add(new Product() { Name = "Product 2", Code = "D510", Status = 1 });
            products.Add(new Product() { Name = "Product 3", Code = "E201", Status = 0 });
            products.Add(new Product() { Name = "Product 4", Code = "M325", Status = 2 });
            products.Add(new Product() { Name = "Product 5", Code = "V405", Status = 2 });

            DataContext = products;
        }
    }

    public class Product
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public int Status { get; set; }
    }
}

 

And here is complete XAML code of it.

Code Snippet
<Window x:Class="WpfDataTemplateTrigger.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="Datatemplate Trigger" Height="350" Width="525">
    <Grid>
        <DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False"
                  IsReadOnly="True" AlternatingRowBackground="Beige">
            <DataGrid.Columns>
                <DataGridTextColumn Width="*" Header="Name" Binding="{Binding Name}"/>
                <DataGridTextColumn Width="*" Header="Code" Binding="{Binding Code}"/>
                <DataGridTemplateColumn Width="*" Header="Status">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock x:Name="textBlock"/>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding Status}" Value="0">
                                    <Setter TargetName="textBlock" Property="Text" Value="Approved"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Status}" Value="1">
                                    <Setter TargetName="textBlock" Property="Text" Value="Reject"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Status}" Value="2">
                                    <Setter TargetName="textBlock" Property="Text" Value="Pending"/>
                                </DataTrigger>                                
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

 

This is an output of the program.

DataTemplateTrigger

Advertisements

Responses

  1. Reblogged this on SutoCom Solutions.


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: