Wpf 更改「；悬停区“；钮扣形状

我成功地将

按钮的
边框
形状更改为跟随
图像
（椭圆）。但不是悬停区

    <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>

经过一些实验，我可以得出结论，虽然
边界的形状发生了变化，但悬停区域的形状仍然相同。上面的红色区域是悬停区域

    <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>

是否有一种方法可以像“播放”
图像一样更改悬停区域的形状？
避免使用路径为自身的高度/宽度绑定。如果需要，请使用RelativeSource，但在这种情况下，这些都不是必需的。此外，您已经有两个
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>