DataGrid without cell border after selection in MaterialDesign

Question

I am using a datagrid in my WPF GUI where the user can make a double click on a row to see a page with details (this is working good):

Unfortunately, the border of a single cell would be visible after clicking (once) in a row, although I am already using selection unit FullRow. I was trying different options, colors etc. but everytime the border is showing. I was trying the steps from How to suppress DataGrid cell selection but it just changes the datagrid style.

<DataGrid x:Name="DataGridMeasuringTasks" SelectionUnit="FullRow" Margin="20,145,0,44" 
   RowDetailsVisibilityMode="VisibleWhenSelected" CanUserAddRows="False"
   CanUserDeleteRows="False" HorizontalAlignment="Left" Width="1612" 
   SelectionMode="Single" IsReadOnly="True">
            
     <DataGrid.RowStyle>
         <Style TargetType="DataGridRow">
             <Setter Property="Background" Value="#FFF0F0F0" />
         </Style>
     </DataGrid.RowStyle>

     <DataGrid.Background>
         <SolidColorBrush Color="#FFF0F0F0"/>
     </DataGrid.Background>
</DataGrid>

How can I remove the border?

I am using WPF MaterialDesignXaml [link](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit) — krambambuli, Feb 10 '22 at 08:15

thatguy · Accepted Answer · 2022-02-17T15:31:31.130

The MaterialDesign style for data grid cells is defined here. You have to copy and adapt the style, because the trigger for the border brush will take precedence over local values. Remove this part.

<Trigger Property="IsKeyboardFocusWithin" Value="True">
    <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextBoxBorder}" />
</Trigger>

Then, assign the style as CellStyle to your specific DataGrid or move it to a resource dictionary in scope or even the application resources to automatically apply the style to all cells in scope.

<DataGrid x:Name="DataGridMeasuringTasks" SelectionUnit="FullRow" Margin="20,145,0,44" 
   RowDetailsVisibilityMode="VisibleWhenSelected" CanUserAddRows="False"
   CanUserDeleteRows="False" HorizontalAlignment="Left" Width="1612" 
   SelectionMode="Single" IsReadOnly="True">
   
     <DataGrid.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Padding" Value="{Binding RelativeSource={RelativeSource Self}, Path=(materialDesign:DataGridAssist.CellPadding)}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
            <Setter Property="Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource AncestorType=DataGridRow}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid>
                            <Border
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="True" />
                            <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
               <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True" />
                        <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="False" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="{DynamicResource MaterialDesignSelection}" />
                </MultiDataTrigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value=".56" />
                </Trigger>
            </Style.Triggers>
        </Style>
     </DataGrid.CellStyle>
            
     <DataGrid.RowStyle>
         <Style TargetType="DataGridRow">
             <Setter Property="Background" Value="#FFF0F0F0" />
         </Style>
     </DataGrid.RowStyle>

     <DataGrid.Background>
         <SolidColorBrush Color="#FFF0F0F0"/>
     </DataGrid.Background>
</DataGrid>

I am not sure, what do you mean with "remove this part" ` ` ? I am just using that style as imported library in my project. — krambambuli, Feb 17 '22 at 09:00
@krambambuli In order to apply the changes you want, you have to copy the corresponding style from the linked source into your project, so that it overrides the default style. In this copied (original) style this trigger shows the cell border, so you have to remove it in your copy of the style and the border is gone. — thatguy, Feb 17 '22 at 09:04
@thatgui Ah okay, I've implemented it. Unfortunately, now an error orrcurs ("_The items collection must be empty before using ""ItemsSource"_). But I have not changed anything in the data source... ? — krambambuli, Feb 17 '22 at 14:41
@krambambuli This error usually occurs if you both set or bind an `ItemsSource` and add items manually to an items control. Are there any items or elements accidentially placed in the `DataGrid`? — thatguy, Feb 17 '22 at 14:48
Yes I am setting/updating the datasource at runtime with new data. But I did not change anything in that code, so because I was just changing your graphical adaptations, it shouldn't change anything here? — krambambuli, Feb 17 '22 at 15:17
@krambambuli Sorry, the `Style` must of course be put in either `DataGrid.CellStyle` or in the resources, otherwise the `DataGrid` will interpret it as item. I have corrected the code in the answer. — thatguy, Feb 17 '22 at 15:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242120/discussion-between-thatguy-and-krambambuli). — thatguy, Feb 17 '22 at 17:18

score 0 · Answer 2 · answered Apr 01 '22 at 08:51

0

There is a simpler answer: set the MaterialDesignTextBoxBorder to transparent for your datagrid.

<DataGrid.Resources>
    <SolidColorBrush x:Key="MaterialDesignTextBoxBorder" Color="Transparent"/>
</DataGrid.Resources>

Note that this only works for readonly datagrids. If your cells are editable the line below the material design textbox will not show (but when you are editing a specific cell the border is in my opinion not an issue).

answered Apr 01 '22 at 08:51

Nils

59
6

This is indeed a simpler solution, _but it has side-effects_. Brushes are often shared across multiple controls. Overriding a brush in the local resources of the `DataGrid` affects all controls within that use this brush, like `TextBox` and that is why an editable text cell looks different. This implies that the appearance of other column types, especially a `DataGridTemplateColumn`, may and most likely will change. If this is not a concern, then this solution is applicable, too. – thatguy Apr 01 '22 at 09:38

score 0 · Answer 3 · answered Feb 04 '23 at 13:53

There is a way to override only the border style with everything else kept. What I did was to create a style by setting the BasedOn to MaterialDesignDataGridCell, so I still have all the other styles from MUI, and then I customised the BorderBrush and the BorderThickness in my style:

<DataGrid.CellStyle>
    <Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MaterialDesignDataGridCell}">
        <Style.Triggers>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="BorderBrush" Value="Transparent" />
            </Trigger>
        </Style.Triggers>
        <Setter Property="BorderThickness" Value="0"/>
    </Style>
</DataGrid.CellStyle>

DataGrid without cell border after selection in MaterialDesign

3 Answers3