wpf 按钮的边距在鼠标悬停时突出显示

Question

我是 WPF 新手，我有一个小问题。我有一个带有 XAML 的按钮：

<Button  FontSize="17" Margin="15" Background="White" 
         BorderThickness="0" BorderBrush="#f6f6f6"
         FontWeight="DemiBold"
                   fluent:KeyTip.Keys="X"
                   CommandParameter="{Binding}"                                                               
                   Click="OnLoadPluginClick">                                                
    <Button.Effect>
        <DropShadowEffect Opacity="0.15"/>
    </Button.Effect>                                                
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"
                    Grid.Row="0" Margin="5,10,0,0"  Height="180" Width="180" VerticalAlignment="Top" 
                    Background="{TemplateBinding Background}"
                   HorizontalAlignment="Left" >
                <Grid Height="180" Width="180" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Margin="10,10,0,0" FontSize="15" FontStretch="ExtraCondensed" Height="20" VerticalAlignment="Top"
                   HorizontalAlignment="Left" Text="{Binding Name}" />
                    <Image Stretch="Uniform" Width="70" Height="70" Grid.Row="1" HorizontalAlignment="Center" 
               VerticalAlignment="Center" Source="{Binding ImageSource}" />
                </Grid>
            </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="Button.IsPressed" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="WhiteSmoke" />

                </Trigger>                                                            
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="WhiteSmoke" Opacity="0.6" BlurRadius="20"/>
                        </Setter.Value>
                    </Setter>
                    <!--<Setter TargetName="Border" Property="Background" Value="LightGreen"></Setter>-->
                </Trigger>                                                            
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

如您所见，我有自己的触发器，但无法获得我想要的外观（鼠标在按钮上时的阴影）。我得到这样的东西：

如你所见，我只有我的页边距用 akward 灰色突出显示...

我需要什么：当鼠标在按钮边框上时，边框的阴影变大，当按下边框时，它的背景设置为 WhiteSmoke

类似这样，但带有图像：

如何正确实现这个按钮？

如果有任何帮助，我将不胜感激。

Answer 1

在 IsMouseOver 触发器的 setter 标签中设置 TargetName=Border。它可能会起作用..