wpfxamlcheckboxtriggersismouseover

Hide checkbox until mouse over WPF


I am new to XAML, but I would like the CheckBox option to be hidden on my application until the user mouses over the row and can check the box from there. Here is what I currently have and I'm not sure why it doesn't work.

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

Solution

  • If you want to display the CheckBox only if a user hovers the row, meaning any cell of a row, you can use a RelativeSource binding to the IsMouseOver property the parent row.

    <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>
    

    If you want it to be dislayed only if a user hovers over the CheckBox column, your style will not work as you do not receive the mouse events on a hidden control. You can work around this with a Border that is visible.

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