Search code examples
wpfdatagrid

WPF DataGrid column headers squeezed before ItemSource is set


I currently have a datagrid in WPF with only two columns, and its item source is set within the .cs codes when attempting to bind it to its specific item source, but initially it is not referenced to any itemsource. The problem is, if there is no item source yet, the columns are squeezed up even though i have specified the width of the columns. (in attached picture)enter image description here

The columns are looking fine until i added the <datagrid.groupstyle> portion, may i ask if i am missing something or am i doing something wrong. Below is the codes inside my .xaml for this datagrid.

<DataGrid Visibility="Visible" 
                              x:Name="IFCInfoDataGrid" Width="auto" Height="auto" HeadersVisibility="Column"
                              AutoGenerateColumns="False" Margin="12" IsReadOnly="True" Grid.ColumnSpan="2" 
                              SelectionUnit="FullRow" IsSynchronizedWithCurrentItem="False" >

                        <DataGrid.CellStyle>
                            <Style TargetType="DataGridCell">
                                <Setter Property="BorderThickness" Value="0"/>
                                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                            </Style>
                        </DataGrid.CellStyle>

                        <DataGrid.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <DockPanel Background="LightBlue">
                                            <TextBlock Text="{Binding Path=Name}" Foreground="Blue" Margin="30,0,0,0" Width="100" />
                                        </DockPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>

                                <GroupStyle.ContainerStyle>
                                    <Style TargetType="{x:Type GroupItem}" >
                                        <Setter Property="Margin" Value="0,0,0,5" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                                    <Expander
                                                        BorderBrush="#FF002255"
                                                        IsExpanded="True"
                                                        Background="Tan"
                                                        BorderThickness="0,0,0,1">
                                                        <Expander.Header>
                                                            <StackPanel Orientation="Horizontal">
                                                                <TextBlock VerticalAlignment="Center" FontWeight="Bold" Text="{Binding Path=Name}" Width="200" />
                                                            </StackPanel>
                                                        </Expander.Header>
                                                        <Expander.Content>
                                                            <ItemsPresenter />
                                                        </Expander.Content>
                                                    </Expander>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </GroupStyle.ContainerStyle>
                            </GroupStyle>
                        </DataGrid.GroupStyle>

                        <DataGrid.Columns>
                            <DataGridTextColumn Binding="{Binding IFCParameter}" Header="IFC Parameter" Width="0.5*" 
                                                ElementStyle="{StaticResource DataGridRowStyle}" IsReadOnly="True" CanUserSort="False"/>
                            <DataGridTextColumn Binding="{Binding ParameterValue}" Header="Value" Width="0.5*" 
                                                ElementStyle="{StaticResource DataGridRowStyle}" IsReadOnly="True" CanUserSort="False"/>
                        </DataGrid.Columns>
                    </DataGrid>

Solution

  • Set the <GroupStyle.Panel> element to an ItemsPanelTemplate with a DataGridRowsPresenter:

    <DataGrid.GroupStyle>
        <GroupStyle>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <DataGridRowsPresenter/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
    
            <GroupStyle.HeaderTemplate>
                ...
            </GroupStyle.HeaderTemplate>
    
            <GroupStyle.ContainerStyle>
                ...
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </DataGrid.GroupStyle>