在 GridViewDataColumn.Header 中绑定 UIElement 的值不起作用答案

【问题标题】：Binding the value of an UIElement within GridViewDataColumn.Header not working在 GridViewDataColumn.Header 中绑定 UIElement 的值不起作用
【发布时间】：2011-07-18 06:30:46
【问题描述】：

我试图在 telrik gridview 中显示一个圆圈，我想将颜色动态绑定到这个圆圈。由于我正在使用 MVVM 模式，我必须将我的视图模型绑定到我页面的数据上下文。但是绑定似乎对我不起作用。当我调查问题时，因为列标题没有任何数据上下文，所以我尝试使用'ElementName'绑定值并尝试使用它的数据上下文，但即使这样也不起作用。

谁能帮我解决这个问题。

这是我的 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=myMainPage, Path=DataContext.Colour}"></Ellipse>
                            </StackPanel>
                    </telerikGrid:GridViewDataColumn.Header>
                </telerikGrid:GridViewDataColumn>
            </telerikGrid:RadGridView.Columns>
        </telerikGrid:RadGridView>
    </Grid>
</UserControl>

这是我的视图模型

public MainPage()
{
    InitializeComponent();

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

【问题讨论】：

标签： silverlight-4.0 c#-4.0 mvvm telerik radgridview

【解决方案1】：

尝试在绑定中使用RelativeSource 而不是ElementName

过去我遇到过类似的问题，我无法使用 ElementName 解析绑定，但可以使用 RelativeSource。我认为这可能与解决绑定的时间有关。

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

【讨论】：

感谢您的回复，遗憾的是 Silverlight 不支持 RelativeSource。所以我不得不选择另一个选项，即在网格中添加一个椭圆 coltrol 并将该值绑定到 Radgrid 中的椭圆。这似乎奏效了。

【解决方案2】：

我找到了解决我的问题的方法，即通过将新椭圆添加到布局中作为布局网格的子项，然后将视图模型的 Color 属性绑定到新椭圆的 Fill 属性。后来我绑定了 Fill 属性将 RadGrid 中的椭圆转换为新添加的椭圆。

这是新的 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>

谁能告诉我为什么当我给出 myMainPage 作为元素名称时绑定不起作用，而当我给出一个新的 elisple 时它开始起作用？

在有人回答此问题之前，我将其标记为答案。

【讨论】：