更改按钮的 "Hover Area" 形状

Question

  <Button x:Name="ListItem_Button_Play" VerticalAlignment="Center" 
          Style="{StaticResource PlayButtonStyle}" Foreground="{x:Null}">
          <Image Source="Resources/ListItem_Button_Play.png"/>
  </Button>

我的 DataTemplate 中有一个 Button。我对其应用了 Style 以删除默认的悬停效果。另外，当鼠标指针进入悬停区域时，使其变大。

    <Style x:Key="PlayButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border"
                        Width="{Binding Path=ActualHeight, ElementName=border}"
                        BorderThickness="0"
                        CornerRadius="{Binding Path=ActualHeight, ElementName=border}" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Height" Value="93"/>
        <Setter Property="Width" Value="93"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
                            <DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
                            <DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>

我成功地将 Button 的 Border 形状更改为跟随 Image（椭圆）。但不是悬停区域。

经过一些实验，我可以得出结论，虽然 Border 的形状发生了变化，但悬停区域的形状仍然是一样的。上图红色区域为悬停区域

有没有办法像 "Play" Image 一样改变悬停区域的形状？？

Answer 1

避免像 Height/Width 绑定那样的路径本身。 RelativeSource 如果你需要，但在这种情况下 none 应该是必要的。此外，您的 Height 和 Width 硬装置已经有两个 Setter 了……

我做了一些小调整，但这应该可以解决您的问题，并且我的测试也很好。

<Style x:Key="PlayButtonStyle" TargetType="Button">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Background" Value="Purple"/>
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Height" Value="93"/>
                <Setter Property="Width" Value="93"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border x:Name="border"
                                    CornerRadius="50"
                                    Background="{TemplateBinding Background}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>                    
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
                                    <DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
                                    <DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>

更改按钮的 "Hover Area" 形状

Changing the "Hover Area" Shape of a Button

wpf

xaml

button

hover