WPF Material Design Raised Button Hovered state

Question

I'm trying to recreate a material design look & feel for a button. For the focused (hovered) state the guidelines say to make a 12 % #000000 shade over the button. I was wondering how this could be achieved in WPF.

I've been looking around a good option would be to add a non-hittable rectangle over the button with a 12 % opacity and a color of #000000. I want to implement this as a style, but I have no idea how to do that.

My style looks like this at moment:

<Style x:Key="MaterialRaisedButton" TargetType="ToggleButton">
        <Setter Property="Padding" Value="8 0"/>
        <Setter Property="Margin" Value="8 6 8 6"/>
        <Setter Property="Height" Value="36"/>
        <Setter Property="MinWidth" Value="64"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="{StaticResource MaterialSecondaryColorBrush}"/>
        <Setter Property="Effect" Value="{StaticResource z-depth2}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                    <Rectangle RadiusX="4" RadiusY="4" Fill="#000000" Opacity="0.12"/>
                    <Border CornerRadius="4" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource Material12Black}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

If there are any other methods of doing this, I'm all ear as well :)

Answer 1

In the fill of the rectangle you can specify opacity in the hex color like #00000000, the first two values are the opacity. So 12% would be #1e000000. The following will show .5 opacity rectangle when mouse is over other wise opacity is 0.

 <Rectangle.Style>
            <Style TargetType="{x:Type Rectangle}">
                <Setter Property="Opacity" Value="0"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter  Property="Opacity" Value=".5"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="false">
                        <Setter  Property="Opacity" Value="0"/>
                    </Trigger>

                </Style.Triggers>
            </Style>
        </Rectangle.Style>

    </Rectangle>