• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2379
  • Last Modified:

Setting Triggers for a Custom Control in a Data Grid using WPF

I am new to WPF and am trying to achieve the following:

Display a DataGrid that has 'Round Buttons' as cells
Each button will have a different color based on its value
If 0 then button is  Black
If 1 then button is  Blue
If 2 then button is  Yellow
If 3 then button is  Pink

I've been able to get the DataGrid with the Round buttons
What I'm struggling to do is change the background color based on the value

Have inserted the project code below. Let me know if I have missed something or am doing it wrong

//////////////////////////////// XAML ////////////////////////////////////////////////////
<Window x:Class="ProgressGridTest.Window1"
    Title="Window1" Height="300" Width="300">
    <Style x:Key="CustomRoundedButton" TargetType="Button" >
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type Button}" >
                    <Border x:Name="bdr"
                        <ContentPresenter x:Name="cp"
                                          Content="{TemplateBinding Content}"
                            <Trigger SourceName="cp" Property="Content" Value="0">
                                <Setter TargetName="bdr" Property="Background" Value="Black"/>
                            <Trigger SourceName="cp" Property="Content" Value="1">
                                <Setter TargetName="bdr" Property="Background" Value="Blue"/>
                            <Trigger SourceName="cp" Property="Content" Value="2">
                                <Setter TargetName="bdr" Property="Background" Value="Yellow"/>
                            <Trigger SourceName="cp" Property="Content" Value="3">
                                <Setter TargetName="bdr" Property="Background" Value="Pink"/>
        <dg:DataGrid x:Name="dgItemList" AutoGenerateColumns="False"
                     CanUserAddRows="False" CanUserDeleteRows="False" 
                     CanUserReorderColumns="False" CanUserResizeColumns="False"
                     CanUserSortColumns="False" SelectionUnit="Cell"
                     SelectionMode="Extended" HeadersVisibility="All"
                     RowHeaderWidth="30" RowHeight="30"
                <dg:DataGridTemplateColumn Header="Ch1">
                        <Button Content="{Binding Path = Ch1}"                                
                                Style="{StaticResource CustomRoundedButton}"/>
                <dg:DataGridTemplateColumn Header="Ch2">
                            <Button Content="{Binding Path = Ch2}"                                
                                Style="{StaticResource CustomRoundedButton}"/>
                <dg:DataGridTemplateColumn Header="Ch3">
                            <Button Content="{Binding Path = Ch3}"
                                Style="{StaticResource CustomRoundedButton}"/>
                <dg:DataGridTemplateColumn Header="Ch4">
                            <Button Content="{Binding Path = Ch4}"
                                Style="{StaticResource CustomRoundedButton}"/>
//////////////////////////////// XAML ////////////////////////////////////////////////////
//////////////////////////////// XAML.cs ////////////////////////////////////////////////////
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.Data;
using Microsoft.Windows.Controls;
namespace ProgressGridTest {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            DataTable objDataTable = new DataTable("Progress");
            objDataTable.Columns.Add("Ch1", typeof(int));
            objDataTable.Columns.Add("Ch2", typeof(int));
            objDataTable.Columns.Add("Ch3", typeof(int));
            objDataTable.Columns.Add("Ch4", typeof(int));
            for (int nCount = 0; nCount < 10; nCount++) {
                DataRow objDataRow = objDataTable.NewRow();
                int nRowNumber = nCount + 1;
                objDataRow[0] = Convert.ToInt32(0 % nRowNumber);
                objDataRow[1] = Convert.ToInt32(1 % nRowNumber);
                objDataRow[2] = Convert.ToInt32(2 % nRowNumber);
                objDataRow[3] = Convert.ToInt32(3 % nRowNumber);
            dgItemList.ItemsSource = objDataTable.DefaultView;
//////////////////////////////// XAML.cs ////////////////////////////////////////////////////

Open in new window

1 Solution
well, the type of your columns are integer and in trigger you are comparing with text. so this is just type incompatibility. u should use valueconverters while binding to convert integer to text.
you can verify  what i said above as,
change the type of your columns as "string" and use Convert.ToString instead of Convert.ToInt32. (this is just to verify, you can still use integer columns and use value converters while binding.)
davidjjosephAuthor Commented:
Thanks so much. That worked!!

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now