Hide checkbox until mouse over WPF

180 views Asked by At

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

There are 1 answers

3
thatguy On BEST ANSWER

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>