none
CheckBox Column In DataGrid - Row Styles

    Question

  • Hi  All,

    I am using WPF4.5  for my project.

    and I am developing a UserControl which is a DataGrid.

    I have created the styles for that grid in Resources Dictionary. 

    Problem:

    for all the selected checkboxs, I want the row color to be pink.

    But using this style i am not getting that behavior.

    Please tell me how to achieve this.

    I have googled it but not found the solution.

    Style:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="{x:Type DataGrid}"> <Setter Property="Background" Value="#FFF" /> <Setter Property="AlternationCount" Value="2" /> <Setter Property="CanUserAddRows" Value="False"/> <Setter Property="HeadersVisibility" Value="All"/> <Setter Property="VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="CanUserResizeRows" Value="False"/> <Setter Property="SelectionMode" Value="Extended"/> <Setter Property="SelectionUnit" Value="FullRow"/> </Style> <Style TargetType="{x:Type DataGridCell}"> <Style.Triggers> <!--<Trigger Property="IsMouseOver" Value="True"> <Setter Property="IsEditing" Value="True" /> </Trigger>--> </Style.Triggers> <Setter Property="Background" Value="Green" /> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridCell}"> <Border Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" SnapsToDevicePixels="True"> <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type DataGridRow}"> <Style.Triggers> <Trigger Property="ItemsControl.AlternationIndex" Value="0"> <Setter Property="Background" Value="#CCC"></Setter> </Trigger> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="#EEE"></Setter> </Trigger> <Trigger Property="IsSelected" Value="True" > <Setter Property="Background" Value="Pink" /> </Trigger> </Style.Triggers> </Style>

    </ResourceDictionary>

    UserControl XAML:

    <DataGrid  SelectionMode="Single"  AutoGenerateColumns="False"
                    VerticalAlignment="Stretch" x:Name="dgEmployees" ItemsSource="{Binding}" SelectionChanged="dgEmployees_SelectionChanged">
                <DataGrid.Columns>
                    <DataGridCheckBoxColumn Header="Selected" Width="50"
                                            IsThreeState="False"
                                            IsReadOnly="False">
                    </DataGridCheckBoxColumn>
                    
                    <DataGridTextColumn Header="Depatment Name" Width="150" IsReadOnly="True" Binding="{Binding DEPTNAME}"></DataGridTextColumn>
                    <DataGridTextColumn Header="Admin Department" IsReadOnly="True" Binding="{Binding ADMRDEPT}"></DataGridTextColumn>
                    <DataGridTextColumn Header="Location" IsReadOnly="True" Binding="{Binding LOCATION}"></DataGridTextColumn>
    
                </DataGrid.Columns>
      </DataGrid>



    Please Find the Code HereUI
    • Edited by VikasGupta Tuesday, January 29, 2013 2:34 PM Code & Picture
    Tuesday, January 29, 2013 2:10 PM

Answers

  • I think the easiest way to achieve this will be to add a boolean Checked property to your Employee view model and bind the CheckBoxColumn to it. Then you can use a DataTrigger on the DataGridColumn style to set the background color to pink.

    CheckBox column bound to new property:

    <DataGridCheckBoxColumn Header="Selected" Width="50"
                            Binding="{Binding Checked, UpdateSourceTrigger=PropertyChanged}"
                            IsThreeState="False"
                            IsReadOnly="False">
    </DataGridCheckBoxColumn>

    and the change to the style:

    <Style TargetType="{x:Type DataGridRow}">
    <Style.Triggers>                                        
        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
            <Setter Property="Background" Value="#CCC"></Setter>
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
            <Setter Property="Background" Value="#EEE"></Setter>
        </Trigger>
        <!--<Trigger Property="IsSelected" Value="True" >
            <Setter Property="Background" Value="Pink" />
        </Trigger>-->
        <DataTrigger Binding="{Binding Checked}" Value="True">
            <Setter Property="Background" Value="Pink" />
        </DataTrigger>
    </Style.Triggers>

    • Marked as answer by VikasGupta Tuesday, January 29, 2013 3:45 PM
    • Unmarked as answer by VikasGupta Tuesday, January 29, 2013 4:00 PM
    • Marked as answer by VikasGupta Wednesday, January 30, 2013 6:11 AM
    Tuesday, January 29, 2013 2:52 PM
  • It takes two clicks to with the DataGridCheckBoxColumn, one to enter the cell and one to check the Checkbox. Using a DataGridTemplateColumn with a Checkbox as the CellTemplate (not the CellEditingTemplate) will get round this.

    <DataGridTemplateColumn Header="Selected" Width="50">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding Checked, UpdateSourceTrigger=PropertyChanged}" />
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>

    • Marked as answer by VikasGupta Wednesday, January 30, 2013 6:11 AM
    Wednesday, January 30, 2013 2:33 AM

All replies

  • I think the easiest way to achieve this will be to add a boolean Checked property to your Employee view model and bind the CheckBoxColumn to it. Then you can use a DataTrigger on the DataGridColumn style to set the background color to pink.

    CheckBox column bound to new property:

    <DataGridCheckBoxColumn Header="Selected" Width="50"
                            Binding="{Binding Checked, UpdateSourceTrigger=PropertyChanged}"
                            IsThreeState="False"
                            IsReadOnly="False">
    </DataGridCheckBoxColumn>

    and the change to the style:

    <Style TargetType="{x:Type DataGridRow}">
    <Style.Triggers>                                        
        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
            <Setter Property="Background" Value="#CCC"></Setter>
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
            <Setter Property="Background" Value="#EEE"></Setter>
        </Trigger>
        <!--<Trigger Property="IsSelected" Value="True" >
            <Setter Property="Background" Value="Pink" />
        </Trigger>-->
        <DataTrigger Binding="{Binding Checked}" Value="True">
            <Setter Property="Background" Value="Pink" />
        </DataTrigger>
    </Style.Triggers>

    • Marked as answer by VikasGupta Tuesday, January 29, 2013 3:45 PM
    • Unmarked as answer by VikasGupta Tuesday, January 29, 2013 4:00 PM
    • Marked as answer by VikasGupta Wednesday, January 30, 2013 6:11 AM
    Tuesday, January 29, 2013 2:52 PM
  • Hi Chase,

    I am facing one issue while selecting the checkbox that

    CheckBox is not getting selected in one click so for selecting it i have to click twice.

    I am attaching the code sample. Please get the code from here

    Thanks 



    Vikas Gupta

    Tuesday, January 29, 2013 3:58 PM
  • It takes two clicks to with the DataGridCheckBoxColumn, one to enter the cell and one to check the Checkbox. Using a DataGridTemplateColumn with a Checkbox as the CellTemplate (not the CellEditingTemplate) will get round this.

    <DataGridTemplateColumn Header="Selected" Width="50">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding Checked, UpdateSourceTrigger=PropertyChanged}" />
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>

    • Marked as answer by VikasGupta Wednesday, January 30, 2013 6:11 AM
    Wednesday, January 30, 2013 2:33 AM