Question

I am creating a button style. Paste this into a window to see the idea:

<Style x:Key="SelectionButton3"
        TargetType="{x:Type Button}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ClipToBounds="False">

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

                    <Border x:Name="TheBorder" 
                            BorderThickness="0,1.5,1.5,1.5"
                            CornerRadius="3"
                            Background="SteelBlue"
                            Height="35"
                            Grid.Column="1"
                            Grid.Row="0"
                            Margin="-31"
                            BorderBrush="DarkSlateBlue">

                        <Border.BitmapEffect>
                            <DropShadowBitmapEffect x:Name="BorderShadow" 
                                                    ShadowDepth="0"/>
                        </Border.BitmapEffect>

                    </Border>

                    <Rectangle Fill="SteelBlue"
                                Stroke="DarkSlateBlue"
                                Grid.Row="0"
                                Grid.Column="0">

                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45" />
                        </Rectangle.LayoutTransform>

                        <Rectangle.BitmapEffect>
                            <DropShadowBitmapEffect ShadowDepth="5"/>
                        </Rectangle.BitmapEffect>

                    </Rectangle>

                    <ContentPresenter x:Name="ContentArea"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>

            </ControlTemplate>
        </Setter.Value>

    </Setter>

    <Setter Property="Foreground"
            Value="LightGray" />
    <Setter Property="FontFamily"
            Value="Segoe UI" />



</Style>

<Button Click="Button_Click"
        Style="{StaticResource SelectionButton3}"
        Width="185">

</Button>

What I would like to have happen is for the Borders drop shadow to appear when the mouse is over either the Border or the Rectangle. I know I need a trigger, but I’m not really sure where & how to do it.

Can someone point me in the right direction?

Thanks

Answer 1

<Style x:Key="SelectionButton3"
        TargetType="{x:Type Button}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ClipToBounds="False">

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

                    <Border x:Name="TheBorder" 
                            BorderThickness="0,1.5,1.5,1.5"
                            CornerRadius="3"
                            Background="SteelBlue"
                            Height="35"
                            Grid.Column="1"
                            Grid.Row="0"
                            Margin="-31"
                            BorderBrush="DarkSlateBlue">
                    </Border>

                    <Rectangle Name="rect" Fill="SteelBlue"
                                Stroke="DarkSlateBlue"
                                Grid.Row="0"
                                Grid.Column="0">

                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45" />
                        </Rectangle.LayoutTransform>

                    </Rectangle>

                    <ContentPresenter x:Name="ContentArea"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>
                <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="TheBorder" Property="BitmapEffect">
                      <Setter.Value>
                        <DropShadowBitmapEffect ShadowDepth="0" />
                      </Setter.Value>
                    </Setter>
                    <Setter TargetName="rect" Property="BitmapEffect">
                      <Setter.Value>
                        <DropShadowBitmapEffect ShadowDepth="5"/>
                      </Setter.Value>
                    </Setter>
                  </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>

    </Setter>

    <Setter Property="Foreground"
            Value="LightGray" />
    <Setter Property="FontFamily"
            Value="Segoe UI" />



</Style>

Note that unless you’re using .NET 3.0 or 3.5 pre SP1, you should use Effect instead of BitmapEffect. The BitmapEffect property has been deprecated in 3.5 SP1