Format Margin / Padding in DataGrid ColumnHeader

Question

I want to place a canvas in the columnheader of a datagrid, which is aligned to the far left of the colum, i.e. no margin between the column and the control. However, there is always some space between the column and the control. I'm wondering how I get rid of the small space shown yellow in the picture? I also wonder, why none of the background colors (ItemsControl = LightBlue, Canvas = LemonChiffon) are visible, but I guess that is the same reason.

The desired design looks like this:

Here is my code:

<Grid DataContext="{StaticResource vmJp}">
    <DataGrid  x:Name="dgProj" AutoGenerateColumns="False" IsReadOnly="True"  CanUserAddRows="False" Margin="10" ItemsSource="{Binding Baustellen}" BorderThickness="0" HeadersVisibility="Column" Padding="0">
        <DataGrid.Columns>
         ....

            <DataGridTemplateColumn Width="1*" x:Name="coPlanung">
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding DataContext.Monate, ElementName=dgProj}" Margin="0" VerticalAlignment="Center" Background="LightBlue">
                            <ItemsControl.ItemContainerStyle>
                                <Style TargetType="ContentPresenter">
                                    <Setter Property="Canvas.Left">
                                        <Setter.Value>
                                            <MultiBinding Converter="{StaticResource d2x}">
                                                <Binding Path="Date" Mode="OneWay" />
                                                <Binding Path="ActualWidth" ElementName="coPlanung" Mode="OneWay"/>
                                            </MultiBinding>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ItemsControl.ItemContainerStyle>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Canvas Width="{Binding ActualWidth, ElementName=coPlanung}" Margin="0" Background="LemonChiffon"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <!--Monthnames-->
                                    <TextBox Text="{Binding Path=Date, StringFormat={}{0:MMM-yyyy}, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Margin="0">
                                        <TextBox.Width>
                                            <MultiBinding Converter="{StaticResource d2b}">
                                                <Binding Path="Date" Mode="OneWay" />
                                                <Binding Path="ActualWidth" ElementName="coPlanung" Mode="OneWay"/>
                                            </MultiBinding>
                                        </TextBox.Width>
                                    </TextBox>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>

Setting the margin to -5 doesn't show the desired design:

Code

<DataGridTemplateColumn x:Name="coPlanung">
    <DataGridTemplateColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="-5"/>
        </Style>
    </DataGridTemplateColumn.HeaderStyle>
    <DataGridTemplateColumn.HeaderTemplate>
    ...

Answer 1

I'm wondering how I get rid of the small space shown yellow in the picture?

You could set the HeaderStyle of the DataGridTemplateColumn to a DataGridColumnHeader style with negative margins:

<DataGridTemplateColumn x:Name="coPlanung">
    <DataGridTemplateColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="-5"/>
        </Style>
    </DataGridTemplateColumn.HeaderStyle>
    <DataGridTemplateColumn.HeaderTemplate>
    ...

I also wonder, why none of the background colors (ItemsControl = LightBlue, Canvas = LemonChiffon) are visible, but I guess that is the same reason.

Try to specify a Height for the Canvas. The ItemsControl's background is "hidden" behind the ItemsPanel.

Edit: As you have already noticed you could also try set the Margin of the ContentPresenter:

<Style TargetType="ContentPresenter">                                        
    <Setter Property="Margin" Value="-5"/>
</Style>