更改按钮的“悬停区域”形状答案

【问题标题】：Changing the "Hover Area" Shape of a Button更改按钮的“悬停区域”形状
【发布时间】：2016-04-21 23:29:39
【问题描述】：

  <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的形状发生了变化，但悬停区域的形状仍然是一样的。上面的红色区域是悬停区域。

有没有办法像“播放”Image 一样更改悬停区域的形状？？

【问题讨论】：

标签： wpf xaml button hover

【解决方案1】：

避免使用路径本身的高度/宽度绑定。如果需要，RelativeSource，但在这种情况下，这些都不是必需的。此外，您的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>

【讨论】：