Ändern der "Hover-Bereich" Form eines Button

Question

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

Ich habe einen Button in meinem DataTemplate. Ich habe eine Style darauf angewendet, um den Standard-Hover-Effekt zu entfernen. Um es größer zu machen, wenn der Mauszeiger den Hover-Bereich betritt.

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

Ich änderte erfolgreich die Border Form des Button die Image (Ellipse) zu folgen. Aber nicht das Hover-Gebiet.

Nach einigen Experimenten kann ich schließen, dass, obwohl die Form der Border hat sich geändert, die Form der Hover-Bereich sind immer noch die gleichen. Der rote Bereich darüber ist der Schwebeflugbereich.

Gibt es eine Möglichkeit, die Hover Area Form zu ändern, genau wie beim "Play" Image ??

Answer 1

Vermeiden Sie Dinge wie die Höhe/Breite-Bindungen, die Sie haben, deren Pfad selbst ist. RelativeSource, wenn Sie es benötigen, aber in diesem Fall sollte das alles nicht notwendig sein. Außerdem haben Sie bereits zwei Setter ‚s auf halbem Weg nach unten mit Ihrem Height und Width harten Satz bereits ...

ich ein paar kleineren Verbesserungen vorgenommen, aber diese sollten Sie und Tests auf meinem Ende sortieren.

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