定义DataGridTemplateColumn.Header导致“指定的元素已经是另一个元素的逻辑子级。 首先断开连接”异常

Question

I have an MVVM WPF application. This application has two datagrids.

One of them has a DataGridTemplateColumn among others. This DataGridTemplateColumn is causing an exception when I reload UI. Below the screenshot of the error (Note: if I remove this DataGridTemplateColumn then all work ok, no exception is raised):

It is in Spanish. In English is: "Specified element is already the logical child of another element. Disconnect it first"

I have detected that the culprit is when I define the header of the DataGridTemplateColumn by doing this:

<dg:DataGridTemplateColumn.Header>
    <StackPanel  Orientation="Horizontal" >
        <Image RenderOptions.BitmapScalingMode="NearestNeighbor"
               Width="32" Height="32" 
               Source="/My.Utilities.Resources;component/Images/MyIcon.png"/>
        <TextBlock Text="Show PDF" VerticalAlignment="Center"/>
    </StackPanel>
</dg:DataGridTemplateColumn.Header>

If I remove above DataGridTemplateColumn.Header section then it works and no exception is raised. Why? How to solve this?

The DataGrid is initialized by assigning a List of items to ItemsSource datagrid property.

DataGrid Resources are:

<!-- DataGrid Resources -->
<dg:DataGrid.Resources>
    <proxy:BindingProxy x:Key="myProxy" Data="{Binding}" />                       
</dg:DataGrid.Resources>

and the Proxy class is:

public class BindingProxy : Freezable
{
    #region Overrides of Freezable

    protected override Freezable CreateInstanceCore()
    {
        return new BindingProxy();
    }

    #endregion

    public object Data
    {
        get { return (object)GetValue(DataProperty); }
        set { SetValue(DataProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Data.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DataProperty =
        DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}

The DataGridTemplateColumn is as below. Basically It contains a link that when is clicked it calls to a command with a parameter. This parameter is the pdf file name contained in another column of the same datagrid:

<dg:DataGridTemplateColumn MinWidth="100" Width="auto">
    <dg:DataGridTemplateColumn.Header>
        <StackPanel  Orientation="Horizontal" >
            <Image RenderOptions.BitmapScalingMode="NearestNeighbor"
                   Width="32" Height="32" 
                   Source="/My.Utilities.Resources;component/Images/MyIcon.png"/>
            <TextBlock Text="Show PDF" VerticalAlignment="Center"/>
        </StackPanel>
    </dg:DataGridTemplateColumn.Header>
    <dg:DataGridTemplateColumn.CellTemplate>                               
        <DataTemplate>
                <TextBlock VerticalAlignment="Center">  

                    <Hyperlink Command="{Binding Path=Data.ShowPdf, Source={StaticResource myProxy}}" 
                               CommandParameter="{Binding Path=FileName}" >
                        Show PDF
                    </Hyperlink>                

                </TextBlock>
        </DataTemplate>
    </dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>

Answer 1

I have solved it. I have changed the way to define the DataGridTemplateColumn header by changing:

<dg:DataGridTemplateColumn.Header>
    <StackPanel  Orientation="Horizontal" >
        <Image RenderOptions.BitmapScalingMode="NearestNeighbor"
               Width="32" Height="32" 
               Source="/My.Utilities.Resources;component/Images/MyIcon.png"/>
        <TextBlock Text="Show PDF" VerticalAlignment="Center"/>
    </StackPanel>
</dg:DataGridTemplateColumn.Header>

by this one:

<dg:DataGridTemplateColumn.HeaderStyle>
    <Style TargetType="dg:DataGridColumnHeader">
      <Setter Property="ContentTemplate">
        <Setter.Value>
             <DataTemplate>
                 <StackPanel  Orientation="Horizontal" >
                      <Image RenderOptions.BitmapScalingMode="NearestNeighbor"
                           Width="32" Height="32"                              Source="/My.Utilities.Resources;component/Images/MyIcon.png"/>
                      <TextBlock Text="Show PDF" VerticalAlignment="Center"/>
                 </StackPanel>
             </DataTemplate>
        </Setter.Value>
      </Setter>
     </Style>
</dg:DataGridTemplateColumn.HeaderStyle>

Now it works like a charm!

I have found the solution here proposed by Frydex.