Search code examples
wpfxamlcheckboxdatagrid

How to change the text color for an unchecked row in xaml


I would like to gray out the text associated to an unchecked row in my application using xaml. I tried the following, but it is getting overwritten:

<DataGridTemplateColumn.CellTemplate>
   <DataTemplate>
      <CheckBox Name="cbkSelect" 
                IsChecked="{Binding Path=IsSelectedForOrder, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
         <CheckBox.Style>
            <Style TargetType="{x:Type CheckBox}">
               <Setter Property="Visibility" Value="Hidden"/>
               <Style.Triggers>
                  <Trigger Property="IsChecked" Value="False">
                     <Setter Property="Foreground" Value="Gray"/>
                  </Trigger>
                  <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
                     <Setter Property="Visibility" Value="Visible"/>
                  </DataTrigger>
               </Style.Triggers>
            </Style>
         </CheckBox.Style>
      </CheckBox>
   </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

Solution

  • As the Foreground color should be applied to all cells of a given row, you can remove the trigger. The trigger inside the CellTemplate will only apply to to the CheckBox that the style is applied to.

    <DataGridTemplateColumn.CellTemplate>
       <DataTemplate>
          <CheckBox Name="cbkSelect" 
                    IsChecked="{Binding Path=IsSelectedForOrder, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
             <CheckBox.Style>
                <Style TargetType="{x:Type CheckBox}">
                   <Setter Property="Visibility" Value="Hidden"/>
                   <Style.Triggers>
                      <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
                         <Setter Property="Visibility" Value="Visible"/>
                      </DataTrigger>
                   </Style.Triggers>
                </Style>
             </CheckBox.Style>
          </CheckBox>
       </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    

    If you want to apply the foreground color in normal state, but not in selected state, add this RowStyle.

    <DataGrid.RowStyle>
       <Style TargetType="{x:Type DataGridRow}" BasedOn="{StaticResource {x:Type DataGridRow}}">
          <Style.Triggers>
             <DataTrigger Binding="{Binding IsSelectedForOrder}" Value="True">
                <Setter Property="Foreground" Value="Gray"/>
             </DataTrigger>
          </Style.Triggers>
       </Style>
    </DataGrid.RowStyle>
    

    If you want to apply the style in selected state, too, add this CellStyle. In this case a RelativeSource binding is used to access the data context of the row which contains IsSelectedForOrder.

    <DataGrid.CellStyle>
       <Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}">
          <Style.Triggers>
             <DataTrigger Binding="{Binding DataContext.IsSelectedForOrder, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
                <Setter Property="Foreground" Value="Gray"/>
             </DataTrigger>
          </Style.Triggers>
       </Style>
    </DataGrid.CellStyle>