How To Bind to a Control Reference from a DataTemplate within DataGrid

Question

I am not using MVVM or PRISM based models. I am trying to bind inside a DataGrid DataTemplate to a control that lives on the same level as my DataGrid. When I do this, I am returned null.

2 Questions:

What is LayoutRoot? When I refer to it, which in this case is a Grid, I am returned an object. If I change LayoutRoot to a canvas in my XAML, I am returned null.
How do I bind to a Canvas in my XAML inside the DataTemplate of a DataGrid Column?

I have the following XAML: (Trimmed because of Length)

<Grid x:Name="LayoutRoot" Background="#F7F7F7">
    <Border>
        <Canvas x:Name="LayoutCanvas">
            <!-- A lot of Xaml -->
        </Canvas>
    </Border>
</Grid>

Within my Canvas, I have the following DataGrid:

<sdk:DataGrid x:Name="dgOrderContents" AutoGenerateColumns="False">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTemplateColumn Header="Thumb">
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ucp:PhotoComponentForDataGrid Source="{Binding PhotoUrl}" PopupTarget="{Binding ElementName='LayoutCanvas' }" Width="60" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

My problem is when I try to bind using 'LayoutCanvas', the value is null which causes an error. If I bind to 'LayoutRoot', it works, except I need the Canvas because a a FloatableWindow control that lives inside my UserControl relies on a Canvas.

Thanks in advance for any help or suggestions.

Agilis Agilis · Accepted Answer · 2013-01-23T14:20:37

It's possible that I was not able to get the binding to work because I am not using a MVVM or PRISM model. But I did get it to work by using my DataGrid's LoadingRow event.

private void dgOrderContents_LoadingRow(object sender, DataGridRowEventArgs e)
{
    foreach (DataGridColumn col in dgOrderContents.Columns)
    {
        if (col.Header.ToString() == "Thumb")
        {
            PhotoComponentForDataGrid pcdControl = (PhotoComponentForDataGrid)col.GetCellContent(e.Row);
            pcdControl.PopupTarget= this.LayoutCanvas;
        }
    }
}

This allowed me to reference the LayoutCanvas control from my custom user control.

How To Bind to a Control Reference from a DataTemplate within DataGrid

1 Answers