How to animate the StartPoint of LinearGradient

Question

I have a LinearGradientBrush used as an OpacityMask and I want my animation to rotate the gradient, so I'm trying to animate the position of the StartPoint and EndPoint but I can't make it work for hours :(

    <Style x:Key="NewContentStyle" TargetType="ContentPresenter">
        <Setter Property="OpacityMask">
            <Setter.Value>
                <LinearGradientBrush x:Name="FillGradient"  EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0.5"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>

    <Storyboard x:Key="NewContentStoryboard">
        <PointAnimation Storyboard.TargetProperty="StartPoint" Storyboard.TargetName="FillGradient" From="0.5 0" To="0 0.5" Duration="00:00:1" />
        <PointAnimation Storyboard.TargetProperty="EndPoint" Storyboard.TargetName="FillGradient" From="1 0.5" To="0 0.5" Duration="00:00:1"/>
    </Storyboard>

I get an error "'FillGradient' name cannot be found in the name scope of 'System.Windows.Controls.ContentPresenter'."

score 3 · Accepted Answer · answered Aug 05 '11 at 11:00

3

Please try this:

<Storyboard x:Key="NewContentStoryboard">
    <PointAnimation Storyboard.TargetProperty="OpacityMask.(LinearGradientBrush.StartPoint)" From="0.5 0" To="0 0.5" Duration="00:00:1" />
    <PointAnimation Storyboard.TargetProperty="OpacityMask.(LinearGradientBrush.EndPoint)" From="1 0.5" To="0 0.5" Duration="00:00:1"/>
</Storyboard>

answered Aug 05 '11 at 11:00

LPL

16,827
6
51
95

This works! :) I didn't know that there is such thing as "property path syntax" :( Thank you very much! – Anna Ivanova Aug 05 '11 at 11:33

How to animate the StartPoint of LinearGradient

1 Answers1