binding LinearGradientBrush StartPoint in a custom control

Question

In a previous question kbmax told me how I could bind custom properties in my generic.xaml. This answer was at Setting Border background with a template binding

It worked great until I tried to do this with a LinearGradientBrush StartPoint, Here is an example:

This obviously works fine:

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

I would like to bind them to a Custom Property like this: This does not work, I always get a left to right gradient no matter what I set the properties to.

<LinearGradientBrush StartPoint="{Binding HeaderBorderGradientStartPoint, RelativeSource={RelativeSource TemplatedParent}}" EndPoint="{Binding HeaderBorderGradientEndPoint, RelativeSource={RelativeSource TemplatedParent}}">

Here is the code in the class.

    public static readonly DependencyProperty HeaderBorderGradientStartPointProperty =
        DependencyProperty.Register("HeaderBorderGradientStartPoint", typeof(Point), typeof(GalleryExpander), new PropertyMetadata(new Point(0.5,0)));
    public Point HeaderBorderGradientStartPoint {
        get { return (Point)GetValue(HeaderBorderGradientStartPointProperty); }
        set { SetValue(HeaderBorderGradientStartPointProperty, value); }
    }

    public static readonly DependencyProperty HeaderBorderGradientEndPointProperty =
        DependencyProperty.Register("HeaderBorderGradientEndPoint", typeof(Point), typeof(GalleryExpander), new PropertyMetadata(new Point(0.5,1)));
    public Point HeaderBorderGradientEndPoint {
        get { return (Point)GetValue(HeaderBorderGradientEndPointProperty); }
        set { SetValue(HeaderBorderGradientEndPointProperty, value); }
    }


<Border.BorderBrush>
    <LinearGradientBrush StartPoint="{Binding HeaderBorderGradientStartPoint, RelativeSource={RelativeSource TemplatedParent}}" EndPoint="{Binding HeaderBorderGradientEndPoint, RelativeSource={RelativeSource TemplatedParent}}">
        <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.0" Color="Transparent" />
            <GradientStop Offset="0.25" Color="Transparent" />
            <GradientStop Offset="0.50" Color="Transparent" />
            <GradientStop Offset="0.75" Color="Transparent" />
            <GradientStop Offset="1.0" Color="Transparent" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
</Border.BorderBrush>

Thanks for any direction...

score 2 · Answer 1 · answered Aug 10 '11 at 21:51

Hm, I created a small custom control to check this and it works just fine. My control looks like this:

public class MyGradientControl : Control
{
    public static readonly DependencyProperty StartPointDProperty =
        DependencyProperty.Register("StartPointD", typeof (Point), 
        typeof (MyGradientControl), new PropertyMetadata(new Point(0.5, 0.5)));

    static MyGradientControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof (MyGradientControl), 
            new FrameworkPropertyMetadata(typeof (MyGradientControl)));
    }

    public Point StartPointD
    {
        get { return (Point) GetValue(StartPointDProperty); }
        set { SetValue(StartPointDProperty, value); }
    }
}

And has the following style (in Themes\generic.xaml):

<Style TargetType="{x:Type local:MyGradientControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyGradientControl}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid VerticalAlignment="Stretch" 
                          HorizontalAlignment="Stretch">
                        <Grid.Background>
                            <LinearGradientBrush 
                                StartPoint="{Binding StartPointD, 
                                             RelativeSource={RelativeSource 
                                                  TemplatedParent}}" 
                                EndPoint="0, 0">
                                <GradientStop Color="Red" Offset="0"/>
                                <GradientStop Color="White" Offset="1"/>
                            </LinearGradientBrush>
                        </Grid.Background>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Do you provide GradientStops for the LinearGradientBrush? Do they have offsets?

Thanks, I'll put my actual LinearGradientBrush at the bottom of my original question so it will be formatted. — Terco, Aug 11 '11 at 15:11
The only difference I really see is I derive my control from ContentControl, and in the constructor I only have this.DefaultStyleKey = typeof(GalleryExpander); where as you derive from control and have DefaultStyleKeyProperty.OverrideMetadata(typeof (MyGradientControl), new FrameworkPropertyMetadata(typeof (MyGradientControl))); in your constructor — Terco, Aug 11 '11 at 15:45
The more complex assignment of DefaultStyleKey is what VisualStudio does when you create a new CustomControl. It's actually almost the same thing, only that it's done in a static constructor of the custom control instead of an instance constructor. I've just tried both ways and it made no difference (both ways worked fine). Deriving from ContentControl instead of Control also worked. Do you mind sharing your code? I'm out of ideas.. — andyp, Aug 11 '11 at 17:32

binding LinearGradientBrush StartPoint in a custom control

1 Answers1