Binding the value of an UIElement within GridViewDataColumn.Header not working

I am trying to show a circle in a telrik gridview and I wanted to bind the colour dynamically to this circle.Since I am working with MVVM pattern I have to bound my view model to the datacontext of my page.But the binding does not seems to be working for me.When I investigated the issue was because the column headers does not have any datacontext, so I tried bound the value using 'ElementName' and tried to use its datacontext but even that is also not working.

Could anyone please help me resolving this issue.

This is my xaml code

<UserControl x:Class="TelrikStyling.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikGrid="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:myColour="clr-namespace:TelrikStyling"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" x:Name="myMainPage">
        <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
            <telerikGrid:RadGridView x:Name="radGridView"
                        AutoGenerateColumns="False">
            <telerikGrid:RadGridView.Columns>
                <telerikGrid:GridViewDataColumn>
                    <telerikGrid:GridViewDataColumn.Header>
    开发者_如何学C                        <StackPanel Orientation="Horizontal">
                                <Ellipse x:Name="headerEllipse" Width="20" Height="20" Fill="{Binding ElementName=myMainPage, Path=DataContext.Colour}"></Ellipse>
                            </StackPanel>
                    </telerikGrid:GridViewDataColumn.Header>
                </telerikGrid:GridViewDataColumn>
            </telerikGrid:RadGridView.Columns>
        </telerikGrid:RadGridView>
    </Grid>
</UserControl>

This is my view model

public MainPage()
{
    InitializeComponent();

    this.DataContext = new MainPageViewModel { Colour = new SolidColorBrush(Colors.Red) };
}

Try using RelativeSource instead of ElementName in your Binding

I've had similar issues in the past where I couldn't resolve a binding using ElementName but could with RelativeSource. I think it may have to do with the timing of resolving the binding.

<Ellipse Fill="{Binding RelativeSource={RelativeSource 
             AncestorType={x:Type myColour:MainPage}}, 
             Path=DataContext.Colour}" />

I have found a solution for my problem that is by adding new ellipse to the layout as a child of the layout grid and then bind the Colour property of the viewmodel to the Fill property of new ellipse.Later I have bound Fill property of the ellipse in the RadGrid to the newly added ellipse.

This is the new xaml

<UserControl x:Class="TelrikStyling.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikGrid="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:myColour="clr-namespace:TelrikStyling"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" x:Name="myMainPage">
        <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
            <telerikGrid:RadGridView x:Name="radGridView"
                        AutoGenerateColumns="False">
            <telerikGrid:RadGridView.Columns>
                <telerikGrid:GridViewDataColumn>
                    <telerikGrid:GridViewDataColumn.Header>
                            <StackPanel Orientation="Horizontal">
                                <Ellipse x:Name="headerEllipse" Width="20" Height="20" Fill="{Binding ElementName=invisibleEllipse, Path=Fill}"></Ellipse>
                            </StackPanel>
                    </telerikGrid:GridViewDataColumn.Header>
                </telerikGrid:GridViewDataColumn>
            </telerikGrid:RadGridView.Columns>
        </telerikGrid:RadGridView>
   <Ellipse x:Name="invisibleEllipse" Width="20" Height="20" Fill="{Binding Colour}"></Ellipse>
    </Grid>
</UserControl>

Can anyone tell me why the binding was not working when I gives myMainPage as the element name and it started working when I given a new elisple?

Untill someone answer to this question, I am marking this as an answer.