ボタン

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> 

私は正常Image（楕円）を追従するButtonのBorder形状を変更しました。しかし、ホバーエリアではありません。

いくつかの実験の後で、Borderの形状は変更されましたが、ホバー領域の形状は依然として同じであると結論づけられます。上の赤​​い領域はホバー領域です。

「再生」のようにホバーエリアの形状を変更する方法はありますかImage ??

Answer 1

あなた自身のパスがある高さ/幅のバインディングのようなものは避けてください。必要に応じてRelativeSourceが必要ですが、この場合は必要ありません。また、すでにすでにHeightとWidthハードセットで2 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>