How to Trigger a Visual Brush (with storyboard) within a Button Style?

Question

I am from a Motion Graphics background and I am new to Expression Blend. I will try to explain what exactly I want to achieve.

1. I created an animation (storyboard), of a 'Polygon - Star'. This Polygon-Star is placed within a Grid (x:Name="vbGrid").

2. I made this Grid (x:Name="vbGrid") into a Visual Brush Resource.

3. I created another design object within another Grid (x:Name="OpMaskGrid"), and applied this Visual Brush as an Opacity-Mask for the Grid. The storyboard gets triggered On Load of the window when I run the application. Till here everything is fine.

4. I created a Button Style. This is where I am struggling... I want to place this Grid (x:Name="OpMaskGrid") within the Button Style. I want to run this Visual Brush Effect - On Mouse Over of the Button. (NOT ON LOAD OF THE WINDOW)

How can I achieve this? Please Help.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:LOBTest"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="LOBTest.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Storyboard x:Key="vbStoryBoard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="3.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="3.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-2.667"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-11.333"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <VisualBrush x:Key="VisualBrushStarAnim" Visual="{Binding ElementName=vbGrid}"/>

    <Style x:Key="SimpleButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.3">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF1F7385"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.11"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.11"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="Aqua"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.03"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.03"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF01DEFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="rectangle" Stroke="#7F1F7385" Fill="#FF7FE8FF" RadiusX="10" RadiusY="10" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Grid x:Name="OpMaskGrid1" Background="#FF0598A6" Grid.Column="2" Opacity="0.9">
                            <Grid.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=vbGrid}" Stretch="None"/>
                            </Grid.OpacityMask>
                            <Rectangle Width="20" Fill="#FFFF8000" />
                            <Rectangle Width="20" Fill="#FFFF8000" RenderTransformOrigin="0.5,0.5" >
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="90"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true"/>
                        <Trigger Property="IsMouseOver" Value="true"/>
                        <Trigger Property="IsPressed" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource vbStoryBoard}"/>
    </EventTrigger>
</Window.Triggers>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>
    <Grid x:Name="vbGrid" Width="100" Height="100" ClipToBounds="True" >
        <ed:RegularPolygon x:Name="Star" InnerRadius="0.45" PointCount="5" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Fill="Black">
            <ed:RegularPolygon.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </ed:RegularPolygon.RenderTransform>
        </ed:RegularPolygon>
    </Grid>
    <Grid x:Name="OpMaskGrid" Background="#FF0598A6" Grid.Column="2">
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=vbGrid}" Stretch="None"/>
        </Grid.OpacityMask>
        <Rectangle Width="20" Fill="#FFFF8000" />
        <Rectangle Width="20" Fill="#FFFF8000" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
    <Button Grid.Column="1" Grid.Row="1" Width="100" Height="100" Style="{DynamicResource SimpleButton}" Content="VB BUTTON" FontWeight="Bold"/>
</Grid>

Answer 1

You can define the VisualBrush inline in your button's style, something like this:

<!--...-->
<Rectangle x:Name="rectangle" Stroke="#7F1F7385" Fill="#FF7FE8FF" RadiusX="10" RadiusY="10" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
    <!--...-->
</Rectangle>
<Grid Background="#FF0598A6" Grid.Column="2" Opacity="0.9">
    <Grid.OpacityMask>
        <VisualBrush Stretch="None">
            <VisualBrush.Visual>
                <Grid x:Name="vbGrid" Width="100" Height="100" ClipToBounds="True" >
                    <ed:RegularPolygon x:Name="Star" InnerRadius="0.45" PointCount="5" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Fill="Black">
                        <ed:RegularPolygon.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </ed:RegularPolygon.RenderTransform>
                    </ed:RegularPolygon>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.OpacityMask>
    <!--...-->
</Grid>

And in control template, use a trigger to start your storyboard:

<ControlTemplate.Triggers>
    <!--...-->
    <Trigger Property="IsMouseOver" Value="true">
        <Trigger.EnterActions>
            <BeginStoryboard x:Name="Storyboard" Storyboard="{StaticResource vbStoryBoard}"/>
        </Trigger.EnterActions>
        <Trigger.ExitActions>
            <StopStoryboard BeginStoryboardName="Storyboard"/>
        </Trigger.ExitActions>
    </Trigger>
    <!--...-->
</ControlTemplate.Triggers>