Datagrid cell coloring and Header Style Wrapping using XAML

Leave a reply

Sometime there is a need to change the Datagrid header text to wrap and change the width and the style. The below sample will discuss about the coloring and changing the header style

 

The full source is available here in the SkyDrive

 

Preview of the code

image

 

XAML:

First the Styles needed for the Cell

 

<Style x:Key="dataGridHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" TextWrapping="Wrap" TextAlignment="Center" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RAGCellBorderStyle" TargetType="Border">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="BorderThickness" Value="1,1,1,1"/>
            <Setter Property="BorderBrush" Value="Black"/>
        </Style>
        <Style x:Key="RAGCellLabelStyle" TargetType="sdk:Label">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>

 

Then apply the style to the DataGrid.

 

<sdk:DataGrid  MinHeight="200" VerticalAlignment="Stretch" AutoGenerateColumns="False" ItemsSource="{Binding}" Name="rAGDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="2,0,2,5">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTemplateColumn x:Name="empricalTypeColumn" Header="Emprical Type" Width="80">
            <sdk:DataGridTemplateColumn.HeaderStyle>
                <Style TargetType="dataprimitives:DataGridColumnHeader">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" TextWrapping="Wrap" TextAlignment="Center" />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </sdk:DataGridTemplateColumn.HeaderStyle>
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <sdk:DatePicker SelectedDate="{Binding Path=EmpricalType, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Background="DodgerBlue" Style="{StaticResource RAGCellBorderStyle}" >
                        <sdk:Label Content="{Binding Path=EmpricalType, StringFormat=\{0:d\}}" Style="{StaticResource RAGCellLabelStyle}"  />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Resourcing" Width="82" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Resourcing, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Resourcing, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Resourcing, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>

        <sdk:DataGridTemplateColumn Header="Approval" Width="70" HeaderStyle="{StaticResource dataGridHeaderStyle}" >
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Approval, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Approval, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Approval, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>

        <sdk:DataGridTemplateColumn Header="Project Plan" Width="60" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=ProjectPlan, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=ProjectPlan, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=ProjectPlan, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>

        <sdk:DataGridTemplateColumn Header="Milestone" Width="74" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Milestone, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Milestone, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Milestone, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Financial" Width="70" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Financial, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Financial, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Financial, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Business Case" Width="70" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Business, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Business, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Business, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Risks" Width="50" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Risks, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Risks, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Risks, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Methodology" Width="90" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Methodology, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Methodology, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Methodology, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Supply Service" Width="65" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=SupplyService, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=SupplyService, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=SupplyService, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn Header="Sponsor" Width="67" HeaderStyle="{StaticResource dataGridHeaderStyle}">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=Sponsor, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Sponsor, Converter={StaticResource colorConvert}}" >
                        <sdk:Label Content="{Binding Path=Sponsor, Mode= OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                    </Border>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
       
    </sdk:DataGrid.Columns>
    <sdk:DataGrid.RowHeight>35</sdk:DataGrid.RowHeight>
</sdk:DataGrid>

 

Converter class

 

public class StatusColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
            {
                return new SolidColorBrush(Colors.Gray);
            }
            double? health = (double?)value;

            Brush retColor = Utility.GetHealthColor(health);
            return retColor;

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

 

Supporting Class for converter

public static class Utility
    {
        public static Brush GetHealthColor(double? health)
        {
            Brush retColor;
            if (health == 4)
            {
                retColor = new SolidColorBrush(Colors.Blue);
            }
            else if (health <= 1.99 && health >= 0)
            {
                retColor = new SolidColorBrush(Colors.Red);
            }
            else if (health > 1.99 && health <= 2.99)
            {
                retColor = new SolidColorBrush(Colors.Orange);
            }
            else if (health > 2.99 && health <= 3.99)
            {
                retColor = new SolidColorBrush(Colors.Green);
            }
            else
            {
                retColor = new SolidColorBrush(Colors.Gray);
            }
            return retColor;
        }
    }

 

Datasource

 

public class RAG
    {

        public RAG(Int32 ragId, DateTime empType,double res,double app,double prjPlan, double mile,double fin,double business
            , double risks, double method, double supply,double sponsor)
        {
            this.RAGID = ragId;
            this.EmpricalType = empType;
            this.Resourcing = res;
            this.Approval = app;
            this.ProjectPlan = prjPlan;
            this.Milestone = mile;
            this.Financial = fin;
            this.Business = business;
            this.Risks = risks;
            this.Methodology = method;
            this.SupplyService = supply;
            this.Sponsor = sponsor;
        }

        #region Primitive Properties

        public global::System.Int32 RAGID
        {
            get
            {
                return _RAGID;
            }
            set
            {
                if (_RAGID != value)
                {
                    _RAGID = value;
                }
            }
        }
        private global::System.Int32 _RAGID;
     
        public global::System.DateTime EmpricalType
        {
            get
            {
                return _EmpricalType;
            }
            set
            {
                _EmpricalType = value;
            }
        }
        private global::System.DateTime _EmpricalType;
      
        public global::System.Double Resourcing
        {
            get
            {
                return _Resourcing;
            }
            set
            {
                _Resourcing = value;
            }
        }
        private global::System.Double _Resourcing;
    
        public global::System.Double Approval
        {
            get
            {
                return _Approval;
            }
            set
            {
                _Approval = value;
            }
        }
        private global::System.Double _Approval;

        
        public global::System.Double ProjectPlan
        {
            get
            {
                return _ProjectPlan;
            }
            set
            {
                _ProjectPlan = value;
            }
        }
        private global::System.Double _ProjectPlan;

      
        public global::System.Double Milestone
        {
            get
            {
                return _Milestone;
            }
            set
            {
                _Milestone = value;
            }
        }
        private global::System.Double _Milestone;

         
        public global::System.Double Financial
        {
            get
            {
                return _Financial;
            }
            set
            {
                _Financial = value;
            }
        }
        private global::System.Double _Financial;

        
        public global::System.Double Business
        {
            get
            {
                return _Business;
            }
            set
            {
                _Business = value;
            }
        }
        private global::System.Double _Business;

        public global::System.Double Risks
        {
            get
            {
                return _Risks;
            }
            set
            {
                _Risks = value;
            }
        }
        private global::System.Double _Risks;
          
        public global::System.Double Methodology
        {
            get
            {
                return _Methodology;
            }
            set
            {
                _Methodology = value;
            }
        }
        private global::System.Double _Methodology;

        public global::System.Double SupplyService
        {
            get
            {
                return _SupplyService;
            }
            set
            {
                _SupplyService = value;
            }
        }
        private global::System.Double _SupplyService;

        public global::System.Double Sponsor
        {
            get
            {
                return _Sponsor;
            }
            set
            {
                _Sponsor = value;
            }
        }
        private global::System.Double _Sponsor;

        #endregion
    }

 

Collection Class

 

public class RAGCollection : ObservableCollection<RAG>
    {
        public RAGCollection()
            : base()
        {
            Add(new RAG(1,DateTime.Now,1.2,2.1,3.1,4.0,1,5,2.5,3.5,1.5,5));
            Add(new RAG(2, DateTime.Now.AddDays(2), 2.2, 1.1, 1.1, 3.0, 2, 4, 1.5, 2.5, 3.5, 2.5));
            Add(new RAG(3, DateTime.Now.AddMonths(-10), 1.2, 2.1, 3.1, 4.0, 1, 5, 2.5, 3.5, 1.5, 5));
            Add(new RAG(4, DateTime.Now.AddDays(-20), 1.2, 2.1, 3.1, 4.0, 1, 5, 2.5, 3.5, 1.5, 5));
        }
    }

 

The Full XAML with style and the converter and the header changes

<UserControl x:Class="Forum_2011.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Forum_2011.Converter"
             xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="1024" d:DesignWidth="768" xmlns:my="clr-namespace:Forum_2011.DataSource" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <CollectionViewSource x:Key="rAGViewSource" d:DesignSource="{d:DesignInstance my:RAG, CreateList=True}" />
        <local:StatusColorConverter x:Key="colorConvert"/>
        <Style x:Key="dataGridHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" TextWrapping="Wrap" TextAlignment="Center" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RAGCellBorderStyle" TargetType="Border">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="BorderThickness" Value="1,1,1,1"/>
            <Setter Property="BorderBrush" Value="Black"/>
        </Style>
        <Style x:Key="RAGCellLabelStyle" TargetType="sdk:Label">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel DataContext="{StaticResource rAGViewSource}">
            <Border BorderBrush="Gray" BorderThickness="2,2,2,2" Background="Black" Height="40" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <TextBlock Text="Red Amber Green (RAG)" Foreground="White" FontSize="20"/>
            </Border>
            <sdk:DataGrid  MinHeight="200" VerticalAlignment="Stretch" AutoGenerateColumns="False" ItemsSource="{Binding}" Name="rAGDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="2,0,2,5">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTemplateColumn x:Name="empricalTypeColumn" Header="Emprical Type" Width="80">
                        <sdk:DataGridTemplateColumn.HeaderStyle>
                            <Style TargetType="dataprimitives:DataGridColumnHeader">
                                <Setter Property="ContentTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding}" TextWrapping="Wrap" TextAlignment="Center" />
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </sdk:DataGridTemplateColumn.HeaderStyle>
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <sdk:DatePicker SelectedDate="{Binding Path=EmpricalType, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Background="DodgerBlue" Style="{StaticResource RAGCellBorderStyle}" >
                                    <sdk:Label Content="{Binding Path=EmpricalType, StringFormat=\{0:d\}}" Style="{StaticResource RAGCellLabelStyle}"  />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Resourcing" Width="82" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Resourcing, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Resourcing, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Resourcing, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>

                    <sdk:DataGridTemplateColumn Header="Approval" Width="70" HeaderStyle="{StaticResource dataGridHeaderStyle}" >
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Approval, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Approval, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Approval, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>

                    <sdk:DataGridTemplateColumn Header="Project Plan" Width="60" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=ProjectPlan, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=ProjectPlan, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=ProjectPlan, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>

                    <sdk:DataGridTemplateColumn Header="Milestone" Width="74" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Milestone, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Milestone, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Milestone, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Financial" Width="70" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Financial, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Financial, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Financial, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Business Case" Width="70" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Business, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Business, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Business, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Risks" Width="50" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Risks, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Risks, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Risks, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Methodology" Width="90" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Methodology, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Methodology, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Methodology, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Supply Service" Width="65" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=SupplyService, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=SupplyService, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=SupplyService, Mode=OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn Header="Sponsor" Width="67" HeaderStyle="{StaticResource dataGridHeaderStyle}">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Sponsor, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Style="{StaticResource RAGCellBorderStyle}" Background="{Binding Path=Sponsor, Converter={StaticResource colorConvert}}" >
                                    <sdk:Label Content="{Binding Path=Sponsor, Mode= OneWay, StringFormat=0.0}" Style="{StaticResource RAGCellLabelStyle}" />
                                </Border>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                   
                </sdk:DataGrid.Columns>
                <sdk:DataGrid.RowHeight>35</sdk:DataGrid.RowHeight>
            </sdk:DataGrid>
        </StackPanel>
    </Grid>
   
</UserControl>

 

The Code behind for the mainpage.cs

public partial class MainPage : UserControl
    {
        private DataSource.RAGCollection ragColData;
        public MainPage()
        {
            InitializeComponent();
            ragColData = new DataSource.RAGCollection();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {

            // Do not load your data at design time.
             if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
             {
                 //Load your data here and assign the result to the CollectionViewSource.
                 System.Windows.Data.CollectionViewSource myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["rAGViewSource"];
                myCollectionViewSource.Source = ragColData;
             }
        }
    }

 

 

 

Leave a Reply

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

Gravatar
WordPress.com Logo

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

Facebook photo

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

Cancel

Connecting to %s