Search code examples
wpfdatagrid

WPF DataGrid - Disable certain column selection


I would like to disable selection for Columns Field3 & Field4 (see image)

Field1&2 values are entered by the user, depending on it Field3&4 are calculated.

What I want -

  1. When using 'tab' to move through input cells, the selection should move from Row 1 Field 2 to Row 2 Field 1.
  2. When using 'arrows' to move, Field 3 & Field 4 cannot be selected.
  3. Rows can be deleted (mentioning this as I am not sure about behavior after implementing the the other points).

This is my XAML presently -

<Window x:Class="OrderCalculator.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:OrderCalculator"
    mc:Ignorable="d"
    Title="Order Estimate" Background="LightGray" Height="500" Width="800" Name="UI">
<Grid>
    <DataGrid x:Name="ItemGrid" CanUserAddRows ="True" ItemsSource="{Binding ElementName=UI, Path=Items, Mode=TwoWay}" AutoGenerateColumns="False" HorizontalAlignment="Left" 
              Height="410" Margin="10,10,10,10" VerticalAlignment="Top" Width="420" HeadersVisibility="Column">
        <DataGrid.Resources>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Background" Value="DarkGray"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="BorderThickness" Value="0,0,1,2"/>
                <Setter Property="BorderBrush" Value="Black"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Style>
        </DataGrid.Resources>
        <DataGrid.Columns>
            <DataGridTextColumn Header="Field1" Binding="{Binding Path=field1, UpdateSourceTrigger=PropertyChanged}" Width="70"/>
            <DataGridTextColumn Header="Field2" Binding="{Binding Path=field2, UpdateSourceTrigger=PropertyChanged}" Width="90"/>
            <DataGridTextColumn Header="Field3" Binding="{Binding Path=field3, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" Width="110"/>
            <DataGridTextColumn Header="Field4" Binding="{Binding Path=field4, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" Width="*"/>
        </DataGrid.Columns>
    </DataGrid>

</Grid>

UPDATE

After playing around I have been able to make sure that it doesn't get selected with mouse click. But its still possible with arrow keys and tab. So far I have this - Added the following in XAML under DataGrid.Resources-

<Style x:Key="DisableSelection" TargetType="DataGridCell">
    <Setter Property="IsHitTestVisible" Value="False"/>
</Style>

And then for the columns that I wanted to disable selection -

<DataGridTextColumn Header="Field3" CellStyle="{StaticResource DisableSelection}" Binding="{Binding Path=field3, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" Width="120"/>

But as mentioned this doesn't solve it completely.


Solution

  • Solved it! Modified the Style to -

    <Style x:Key="DisableSelection" TargetType="DataGridCell">
       <Setter Property="Focusable" Value="False"/> <!--  Disables all selection methods (including keyboard inputs)  -->
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
       <Setter Property="BorderBrush" Value="Transparent"/>
    </Style>
    

    Setting 'Focusable' property to false did the trick. The rest of the 3 lines of code ensure the cell looks un-selectable = no highlights nor selected thick borders while ensuring the text still appears.

    Added this style to the column I wanted to disable selection entirely -

    <DataGridTextColumn Header="Field1" CellStyle="{StaticResource DisableSelection}"...../>