Set Fill to LinearGradientBrush on Button Click

Question

For reference, I am using this MSDN tutorial: https://msdn.microsoft.com/en-us/library/bb613545(v=vs.100).aspx

I have finished the tutorial, and I simply wanted to change the Click EventTrigger animation from the 360 spin to a simple change of the LinearGradientBrush.

My GradientStopCollections as per the tutorial. One is an altered one that I want to use in the animation when I click the button

<GradientStopCollection x:Key="MyGlassGradientStopsResource">
        <GradientStop Offset="0.2" Color="WhiteSmoke" />
        <GradientStop Offset="0.4" Color="Transparent" />
        <GradientStop Offset="0.5" Color="WhiteSmoke" />
        <GradientStop Offset="0.75" Color="Transparent" />
        <GradientStop Offset="0.9" Color="WhiteSmoke" />
        <GradientStop Offset="1" Color="Transparent" />
    </GradientStopCollection>

    <GradientStopCollection x:Key="MyRedGlassGradientStopsResource">
        <GradientStop Offset="0.2" Color="IndianRed" />
        <GradientStop Offset="0.4" Color="Transparent" />
        <GradientStop Offset="0.5" Color="IndianRed" />
        <GradientStop Offset="0.75" Color="Transparent" />
        <GradientStop Offset="0.9" Color="IndianRed" />
        <GradientStop Offset="1" Color="Transparent" />
    </GradientStopCollection>

    <LinearGradientBrush x:Key="MyGlassBrushResource" 
                         GradientStops="{StaticResource MyGlassGradientStopsResource}" 
                         Opacity="0.75"
                         StartPoint="0,0" 
                         EndPoint="1,1" />

    <LinearGradientBrush x:Key="MyRedGlassBrushResource" 
                         GradientStops="{StaticResource MyRedGlassGradientStopsResource}" 
                         Opacity="0.75" 
                         StartPoint="0,0" 
                         EndPoint="1,1" />

The button itself. The rectangle being affected is the glassCube rectangle.

<Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
        <Setter Property="Width" Value="90" />
        <Setter Property="Margin" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Width="{TemplateBinding Width}"
                          Height="{TemplateBinding Height}"
                          ClipToBounds="True">

                        <!--  Outer rectangle with rounded corners  -->
                        <Rectangle x:Name="outerRectangle"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"
                                   Fill="Transparent"
                                   RadiusX="20"
                                   RadiusY="20"
                                   Stroke="{TemplateBinding Background}"
                                   StrokeThickness="5" />

                        <!--  Inner rectangle with rouded corners  -->
                        <Rectangle x:Name="innerRectangle"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"
                                   Fill="{TemplateBinding Background}"
                                   RadiusX="20"
                                   RadiusY="20"
                                   Stroke="Transparent"
                                   StrokeThickness="20" />

                        <!--  Glass Rectangle  -->
                        <Rectangle x:Name="glassCube"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"
                                   Fill="{StaticResource MyGlassBrushResource}"
                                   Opacity="0"
                                   RadiusX="10"
                                   RadiusY="10"
                                   RenderTransformOrigin="0.5,0.5"
                                   StrokeThickness="2">
                            <Rectangle.Stroke>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0.0" Color="LightBlue" />
                                        <GradientStop Offset="1.0" Color="Gray" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>

                            <!--
                                These tranforms have no effect as they are declared here.
                                The reason the transforms are included is to be targets for animation
                                (See later)
                            -->
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform />
                                    <RotateTransform />
                                </TransformGroup>
                            </Rectangle.RenderTransform>

                            <!--  A BevelBitmapEffect if applied to give the button a "Bevelled" look  -->
                            <Rectangle.BitmapEffect>
                                <BevelBitmapEffect />
                            </Rectangle.BitmapEffect>

                        </Rectangle>


                        <!--  Present content (text) of the button  -->
                        <DockPanel Name="myContentPresenterDockPanel">
                            <ContentPresenter x:Name="myContentPresenter"
                                              Margin="20"
                                              Content="{TemplateBinding Content}"
                                              TextBlock.Foreground="Black" />
                        </DockPanel>

                    </Grid>
                </ControlTemplate>
                <!---Snipped the triggers-->
            </Setter.Value>

And this is the trigger I am trying to use to change the Fill of the glassCube rectangle from the MyGlassGradientStopsResource brush to the MyGlassGradientStopsResource brush.

<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation  Duration="0:0:0.5"
                             Storyboard.TargetName="glassCube"
                             Storyboard.TargetProperty="Rectangle.Fill" 
                             To="{StaticResource MyRedGlassBrushResource}"/>

        </Storyboard>
    </BeginStoryboard>
</EventTrigger.Actions>

However, trying to do this gives me an XAMLParseException. The error in the error list shows as An object of the type "System.Windows.Media.LinearGradientBrush" cannot be applied to a property that expects the type "System.Nullable`1[[System.Windows.Media.Color, PresentationCore, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35]]".

Any idea what I might be doing wrong? I've tried finding out how to change a Fill to a different LinearGradientBrush in an EventTrigger, but to no avail. I may just suck at wording my searches, or at searching in general. Any help is greatly appreciated

Answer 1

I did some modification of your style. Also, i fixed your Storyboard.

It should now work properly.

 <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
            <Setter Property="Width" Value="90" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
                            <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" RadiusX="20" RadiusY="20" Stroke="{TemplateBinding Background}" StrokeThickness="5" />
                            <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" Stroke="Transparent" StrokeThickness="20" />
                            <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="1" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" StrokeThickness="2">
                                <Rectangle.Style>
                                    <Style TargetType="Rectangle">
                                        <Setter Property="Fill" Value="{StaticResource MyGlassBrushResource}"></Setter>
                                    </Style>
                                </Rectangle.Style>
                                <Rectangle.Stroke>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="LightBlue" />
                                            <GradientStop Offset="1.0" Color="Gray" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <RotateTransform />
                                    </TransformGroup>
                                </Rectangle.RenderTransform>

                                <!--  A BevelBitmapEffect if applied to give the button a "Bevelled" look  -->
                                <Rectangle.BitmapEffect>
                                    <BevelBitmapEffect />
                                </Rectangle.BitmapEffect>

                            </Rectangle>


                            <!--  Present content (text) of the button  -->
                            <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="Center">
                                <ContentPresenter x:Name="myContentPresenter"  Content="{TemplateBinding Content}" TextBlock.Foreground="Black" />
                            </DockPanel>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Button.Click">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="glassCube" Storyboard.TargetProperty="Fill"  Duration="0:0:0.5" BeginTime="0">
                                                <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                    <DiscreteObjectKeyFrame  KeyTime="0:0:0" Value="{StaticResource MyRedGlassBrushResource}" />
                                                </ObjectAnimationUsingKeyFrames.KeyFrames>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>

                </Setter.Value>

            </Setter>
        </Style>

Note

You cannot set a Brush as ColorAnimation. Use a ObjectAnimationUsingKeyFrames instead. If you still need a BrushAnimation, have a look here