Databinding the color of a RadialGradient brush in silverlight 3

Question

Hi,

I am trying to databind the color of a RadialGradientBrush in silverlight 3 to a property, but just can't seem to get it to work.

For example, in a sample test app all I have is

<navigation:Page x:Class="SilverlightNavigator.HomePage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
x:Name="HomePageUC"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
       Title="HomePage Page">
<Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>

            <TextBlock 
                       DataContext="{Binding ElementName=HomePageUC}" 
                        Text="{Binding TestColorOne}" />

        <Rectangle x:Name="testRectangle" Height="100" Width="100" 
                   DataContext="{Binding ElementName=HomePageUC}" >
                <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="{Binding TestColorOne}" Offset="0" />
                    <GradientStop Color="{Binding TestColorTwo}" Offset="1"/>
                    <!--
                    <GradientStop Color="#FFFF0000" />
                    <GradientStop Color="#FF00FF00" Offset="1"/>
                    -->
                </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

        </StackPanel>

In the code behind, I have even made them dependency properties like this ..

    public static readonly DependencyProperty TestColorOneProperty =
        DependencyProperty.RegisterAttached("TestColorOne", typeof(Color), typeof(HomePage), null);

    public static readonly DependencyProperty TestColorTwoProperty =
        DependencyProperty.RegisterAttached("TestColorTwo", typeof(Color), typeof(HomePage), null);


    public Color TestColorOne
    {
        get { return (Color)GetValue(TestColorOneProperty); }
        set { SetValue(TestColorOneProperty, value); }
    }

    public Color TestColorTwo
    {
        get { return (Color)GetValue(TestColorTwoProperty); }
        set { SetValue(TestColorTwoProperty, value); }
    }

But this still gives me the very unhelpful AG_E_PARSER_BAD_PROPERTY_VALUE exception. If I uncomment the two Xaml lines where the colors are hard coded, it works fine. I know the properties are fine because if I hard code the colors or comment out the rectangle, it displays the text fine. (Via the binding to the TextBlock)

I have also tried passing in the string "Red", "Blue" etc. instead of the color object. But the binding just doesn't seem to work.

Any advice?

Answer 1

Unfortunately, you cannot do that since Binding happens on FrameworkElement and every object that inherits it. GradientStop is not a FrameworkElement, which prevents you from binding its Color property.

Answer 2

Ok, I solved this problem by going one level higher and databinding the RadialGradientBrush itself.

        <Rectangle x:Name="testRectangle" Height="100" Width="100" 
                   Fill="{Binding TestRadialGradientBrush}"
                   DataContext="{Binding ElementName=HomePageUC}" >
            </Rectangle>

The RadialGradientBrush in turn is instantiated with the GradientStops set to the colors I want in the code behind.