christophechichmanian
christophechichmanian

Reputation: 129

Solved - Setting DataGridColumnHeader template with predefined columns adds too much columns

I have the following DataGrid:

<DataGrid Grid.Row="2" ItemsSource="{Binding Rejects}" AutoGenerateColumns="False" Style="{StaticResource DataGridStyle}" ColumnHeaderStyle="{StaticResource DataGridHeaderStyle}">
   <DataGrid.Columns>
       <DataGridTextColumn Header="First column" Binding="{Binding Id}"/>
   </DataGrid.Columns>
</DataGrid>

The ItemsSource is bound to a property of my ViewModel called Rejects, which is an ObservableCollection of Dummy objects.

Here is the style called DataGridHeaderStyle:

    <Style x:Key="DataGridHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="Background" Value="{StaticResource EasternBlueBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource DarkGreyBrush}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="10 0"/>

        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">

                    <ControlTemplate.Resources>
                        <converters:DebugConverter x:Key="DebugConverter"/>
                    </ControlTemplate.Resources>

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Border Background="{TemplateBinding Background}" Padding="5">
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                                <TextBlock x:Name="SortArrow" Margin="0 0 5 0"/>
                                <ContentPresenter Content="{Binding}"/>
                            </StackPanel>
                        </Border>

                        <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1"
                               HorizontalAlignment="Right"
                               Width="2"
                               BorderThickness="1"
                               BorderBrush="{StaticResource EasternBlueBrush}"
                               Cursor="SizeWE"/>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="ToolTip" Value="Click to sort."/>
                            <Setter Property="Background" Value="{StaticResource CuriousBlueBrush}"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Ascending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="SortArrow" Property="Text" Value="&#8595;"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Descending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="SortArrow" Property="Text" Value="&#8593;"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="{x:Null}">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I was expecting to have only one column called "First column", but here is the result: Result

As you can see, there is an other column called by the name of my ViewModel that appears. This doesn't happen when I remove the Template property. Also, while this new column looks like the other one, it doesn't react when hovered.

EDIT

As I said under @ketan's answer, I was able to remove the weird column header by setting the DataContext of my DataGrid to {x:Null} and by setting the ItemsSource directly from the code-behind, which shows that the problem is linked to the DataGrid's DataContext, but I still need to keep it, any idea?

Also, here's the list I use as ItemsSource:

public ObservableCollection<Dummy> Rejects { get; set; } = new ObservableCollection<Dummy>()
        {
            new Dummy()
            {
                Id = 1,
                Prop1 = "A"
            },
            new Dummy()
            {
                Id = 2,
                Prop1 = "B"
            }
        };

SOLUTION

I finally found out what was going wrong. It's all linked to the Content property of my ContentPresenter inside the template: I set the Content property instead of the ContentSource. Thus, the solution is:

<ContentPresenter ContentSource="Header"/>

Upvotes: 0

Views: 115

Answers (1)

user11362349
user11362349

Reputation:

<DataGrid Grid.Row="2" x:Name="gridDemo" ItemsSource="{Binding lst}" AutoGenerateColumns="False" Loaded="gridDemo_Loaded_1" >
            <DataGrid.Columns>
                <DataGridTextColumn Width="*" Header="First column" Binding="{Binding id}"/>
            </DataGrid.Columns>
        </DataGrid>

pass the colun width to *

Upvotes: 0

Related Questions