ボタンパス上のIsMouseOverトリガーが機能しない

Question

Path要素を含むカスタムコンテンツのボタンがあります。 パスのFillプロパティは、ボタンのIsMouseOverプロパティに接続されています。

コード&が原因で何が間違っているのかを指摘することはできますか？以下は

完全なサンプルコードです -

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <Button Grid.Row="0" 
       Grid.Column="8" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Center" 
       HorizontalContentAlignment="Center" 
       VerticalContentAlignment="Center"> 
      <Path Width="10" 
       Height="10"      
       Margin="0,0,0,0" 
       Fill="Orange" 
       Stretch="Uniform" 
       RenderTransformOrigin="0.5,0.5" 
       Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z"> 
       <Path.RenderTransform> 
        <TransformGroup> 
         <TransformGroup.Children> 
          <RotateTransform Angle="0" /> 
          <ScaleTransform ScaleX="1" ScaleY="1" /> 
         </TransformGroup.Children> 
        </TransformGroup> 
       </Path.RenderTransform> 
       <Path.Style> 
        <Style TargetType="{x:Type Path}"> 
         <Style.Triggers> 
         <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True" > 
           <Setter Property="Fill" Value="#FF5733" ></Setter> 
          </DataTrigger> 
         <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="False" > 
           <Setter Property="Fill" Value="Orange" ></Setter> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Path.Style> 
      </Path> 
     </Button> 
    </Grid> 
</Window> 

Answer 1

だけPathからプロパティFillを削除し、のみStyleにオレンジ値を設定します。 2つのTriggerを実装する代わりに、1つのみを使用して、StyleのFalseの値をSetterに直接設定することができます。 Triggerが一致しない場合、このデフォルト値が設定されます。ここで

<Button Grid.Row="0" 
     Grid.Column="8" 
     VerticalAlignment="Center" 
     HorizontalAlignment="Center" 
     HorizontalContentAlignment="Center" 
     VerticalContentAlignment="Center"> 
    <Path Width="10" 
      Height="10"      
      Margin="0,0,0,0" 
      Stretch="Uniform" 
      RenderTransformOrigin="0.5,0.5" 
      Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z"> 
     <Path.RenderTransform> 
      <TransformGroup> 
       <TransformGroup.Children> 
        <RotateTransform Angle="0" /> 
         <ScaleTransform ScaleX="1" ScaleY="1" /> 
       </TransformGroup.Children> 
      </TransformGroup> 
     </Path.RenderTransform> 
     <Path.Style> 
      <Style TargetType="{x:Type Path}"> 
       <Setter Property="Fill" Value="Orange" /> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True" > 
         <Setter Property="Fill" Value="#FF5733" /> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Path.Style> 
    </Path> 
</Button> 

Answer 2

<Button x:Name="btn" 
       Grid.Row="0" 
       Grid.Column="8" 
       Width="100" 
       Height="100" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       HorizontalContentAlignment="Center" 
       VerticalContentAlignment="Center"> 
      <Path Width="50" 
        Height="50" 
        Margin="0,0,0,0" 
        Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z" 
        RenderTransformOrigin="0.5,0.5" 
        Stretch="Uniform"> 
       <Path.RenderTransform> 
        <TransformGroup> 
         <TransformGroup.Children> 
          <RotateTransform Angle="0" /> 
          <ScaleTransform ScaleX="1" ScaleY="1" /> 
         </TransformGroup.Children> 
        </TransformGroup> 
       </Path.RenderTransform> 
       <Path.Style> 
        <Style TargetType="{x:Type Path}"> 

         <Style.Triggers> 
          <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="True"> 
           <Setter Property="Fill" Value="#FF5733" /> 
          </DataTrigger> 
          <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="False"> 
           <Setter Property="Fill" Value="Orange" /> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Path.Style> 
      </Path> 

     </Button> 

別の方法です