WPF DataGridTemplateColumn cell style not displaying value

Question

I am trying to create a style for datagridcell. But the text value is not displayed.Data grid was populated by the Observable collection of type Student. Please find my xaml code below.

StdCollection = new ObservableCollection<Student>()
            {
                new Student(){Name="Ram",StudID=01,Total=88},
                new Student(){Name="John",StudID=02,Total=55},
                new Student(){Name="Amar",StudID=03,Total=77},
                new Student(){Name="Azar",StudID=04,Total=98},
            };

<DataGrid Name="dgTest" CanUserAddRows="False" CanUserResizeColumns="True" CanUserSortColumns="True" IsReadOnly="False"
              HorizontalAlignment="Left" Height="194" Margin="37,36,0,0" VerticalAlignment="Top" Width="236"                  
              ItemsSource="{Binding StdCollection,UpdateSourceTrigger=PropertyChanged}"
              AutoGenerateColumns="False" 
              >
<DataGrid.Columns>
            <DataGridTemplateColumn  Header="StudID" >
                <DataGridTemplateColumn.CellStyle>
                    <Style TargetType="{x:Type DataGridCell}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type DataGridCell}">
                                    <Border x:Name="border"
                                    Background="WhiteSmoke"
                                    BorderBrush="Transparent"
                                    BorderThickness="2"
                                    SnapsToDevicePixels="True">
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                            <ContentPresenter.ContentTemplate>
                                                <DataTemplate>
                                                    <Border BorderBrush="Red" BorderThickness="1">
                                                        <TextBlock Foreground="Gray" FontSize="18" Text="{Binding StudID}"/>
                                                    </Border>
                                                </DataTemplate>
                                            </ContentPresenter.ContentTemplate>
                                        </ContentPresenter>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </DataGridTemplateColumn.CellStyle>
            </DataGridTemplateColumn>
            <DataGridTextColumn Header="Name" Binding="{Binding Name,UpdateSourceTrigger=PropertyChanged}" />
            <DataGridTextColumn Header="Total" Binding="{Binding Total,UpdateSourceTrigger=PropertyChanged}"/>               
        </DataGrid.Columns>

I am getting blank cell instead of value. Kindly let me know where am I doing it wrong.

Raviraj Palvankar · Accepted Answer · 2018-03-09T09:02:41.157

Your template column should be

<DataGridTemplateColumn Header="Id" >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Border x:Name="border"
                                            Background="WhiteSmoke"
                                            BorderBrush="Transparent"
                                            BorderThickness="2"
                                            SnapsToDevicePixels="True">
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                <ContentPresenter.ContentTemplate>
                                    <DataTemplate>
                                        <Border BorderBrush="Red" BorderThickness="1">
                                            <TextBlock Foreground="Gray" FontSize="18" Text="{Binding StudID}"/>
                                        </Border>
                                    </DataTemplate>
                                </ContentPresenter.ContentTemplate>
                            </ContentPresenter>
                        </Border>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

For resuing:

<Window.Resources>
    <DataTemplate x:Key="columnTemplate">
        <Border BorderBrush="Red" BorderThickness="1">
            <TextBlock Foreground="Gray" FontSize="18" Text="{Binding Id}"/>
        </Border>
    </DataTemplate>
</Window.Resources>
<Grid x:Name="MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <DataGrid Name="dgMainGrid" CanUserAddRows="False" CanUserResizeColumns="True" CanUserSortColumns="True" IsReadOnly="False"
              HorizontalAlignment="Left" Height="194" Margin="37,36,0,0" VerticalAlignment="Top" Width="236"                                
              AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Id" CellTemplate="{StaticResource columnTemplate}"/>
            <DataGridTextColumn Header="Name" Binding="{Binding Description, UpdateSourceTrigger=PropertyChanged}" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>

Yeah that will work fine. But I want to know why my style was not displaying the value. I am trying to make a generic style to apply for all cells in the data grid. — user3616471, Mar 09 '18 at 08:56
Make a generic DataTemplate, give it a key and then use it wherever necessary. Style is for styling the control, here it is appropriate to go for template instead of style. — Raviraj Palvankar, Mar 09 '18 at 09:00

score 0 · Answer 2 · answered Mar 09 '18 at 08:59

There are two ways to fix this.

(First one has already been taken care of by Raviraj I see)

Second one would be to actually separate the Cell Style and Content. Your current code doesn't work because the TextBlock is missing a DataContext (not available in the CellStyle itself):

<DataGridTemplateColumn Header="StudID">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Foreground="Gray" FontSize="18" Text="{Binding StudID}"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Border x:Name="border"
                            Background="WhiteSmoke"
                            BorderBrush="Transparent"
                            BorderThickness="2"
                            SnapsToDevicePixels="True">
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                <ContentPresenter.ContentTemplate>
                                    <DataTemplate>
                                        <Border BorderBrush="Red" BorderThickness="1">
                                            <ContentPresenter Content="{TemplateBinding Content}"/>
                                        </Border>
                                    </DataTemplate>
                                </ContentPresenter.ContentTemplate>
                            </ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>

You could of course simply use a TextColumn:

<DataGridTextColumn Binding="{Binding StudID}" Header="StudID" FontSize="18" Foreground="Gray">
    <DataGridTextColumn.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Border x:Name="border"
                            Background="WhiteSmoke"
                            BorderBrush="Transparent"
                            BorderThickness="2"
                            SnapsToDevicePixels="True">
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                <ContentPresenter.ContentTemplate>
                                    <DataTemplate>
                                        <Border BorderBrush="Red" BorderThickness="1">
                                            <ContentPresenter Content="{TemplateBinding Content}"/>
                                        </Border>
                                    </DataTemplate>
                                </ContentPresenter.ContentTemplate>
                            </ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

WPF DataGridTemplateColumn cell style not displaying value

2 Answers2

Linked