Set Fill to LinearGradientBrush on Button Click - wpf

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