How to resize DataGrid column width in WPF

Question

I've one data grid view which get the data directly from database. The problem is the sizes (height and width) of the header, column and row are very big and it doesn't look neat.

This is the current XAML and .cs code that I've done.

XAML

<WrapPanel Margin="20,0,20,20" HorizontalAlignment="Center">
    <DataGrid AutoGenerateColumns="True" Name="dataGridProgram" SelectionMode="Single" 
              FontSize="15" BorderThickness="1" IsReadOnly="true" Height="300" 
              Width="700"/>
</WrapPanel>

CS

Program_Controller _PController = new Program_Controller();
OleDbDataAdapter da = _PController.GetProgramList();
DataTable dt = new DataTable();
da.Fill(dt);
dataGridProgram.ItemsSource = dt.AsDataView();

This is the current look of my data grid view. I never custom change the rows and columns size. It's all auto/default value. I also try to manual set the column/row height and width of the data grid. But then, I cannot see the text. So how exactly I didn't get the simpler data grid? Or how to maybe set template for the data grid?

And I want it to be display more simpler and neat like this. I want it so that I don't need to scroll horizontally since the sizes is in normal size.

Answer 1

That's not the default style. It's the one you get by using the material design UI library.

You could switch back to the default style by removing the reference the following resource dictionary from your App.xaml file or wherever you've included it:

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

Is there anything I can do to override the material design styling for data grid view only?

Sure. Include these styles in your ResourceDictionary in App.config after the <ResourceDictionary.MergedDictionaries> element:

<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource {x:Type DataGrid}}" />
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}" />
<Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" />
<Style TargetType="{x:Type DataGridRow}" BasedOn="{StaticResource {x:Type DataGridRow}}" />
<Style TargetType="{x:Type DataGridRowHeader}" BasedOn="{StaticResource {x:Type DataGridRowHeader}}" />

Answer 2

To my thinking, if you don't understand how something works and it isn't doing what you want then you're best off not using it at all. Hence my recommendation to remove material design from your project.

You should read up on styling. Consider the following to be the start of that process.

Let's imagine for a moment that this is a simpler control than a datagrid. Styling has scope and this is the default style that material design is setting. That is associated with a uielement by type. For a default style it uses the type as a key. Style in wpf is a property so you set it and when you set it at a lower scope then that over-rides whatever is previously set.

You could set style to something has nothing in there or {x:Null}. That would over-ride the material design style. Similarly, template which it may well be using as well.

But I'm not recommending you do that.

Why?

Because a Datagrid isn't just one control.

Material Design will be templating and styling numerous pieces that make up a datagrid. DataGridRow, DataGridCell etc etc.

Since you're a beginner you don't know what they are and will likely miss some out and still get unexpected results.

You eventually get that working.

Phew.

Then maybe you notice other controls look weird and aren't behaving like you expect.

Material Design is great if you want everything it gives you.

If you don't then do not use it.