更改按钮

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> 

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

经过一番实验，我可以得出结论，尽管Border的形状已经改变，悬停区域的形状仍然是相同的。上面的红色区域是悬停区域。

有没有办法改变悬停区域的形状就像“玩”Image？

Answer 1

避免像路径本身的Height/Width绑定那样的东西。 RelativeSource如果你需要，但在这种情况下，这些都不是必须的。再说了，你已经有两个Setter的你Height和Width硬组已经完成了一半了下来...

我做了一些小的调整，但是这应该你理清和我的最终测试的罚款。

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