xamlの高度なボタンホバー効果

Question

私はC＃とXAMLで新しくなったが、ウェブデザイン言語の経験がある。

<Button Margin="10 0 0 0" Click="CloseClick"> 
    <Button.Template> 
     <ControlTemplate> 
      <Border Background="{x:Null}" IsHitTestVisible="True"> 
       <Canvas Width="15" Height="15"> 
        <Ellipse HorizontalAlignment="Left" Height="15" Grid.Row="0" Width="15"> 
         <Ellipse.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#FF8C8E8D" Offset="0"/> 
           <GradientStop Color="#FF54545C" Offset="0.987"/> 
          </LinearGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF3D3E50" Width="8" Height="8" Canvas.Top="3.5" Canvas.Left="3.5"/> 
       </Canvas> 
      </Border> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

そして今、ホバーイベントに、私がしたい：現在、私は私のボタンを作成し、XAMLで

..私は私の最初のプログラムで動作しますが、私は問題を抱えています他のボタンを中央のボタンのように見せてください！

私が試した：私は助けのために非常に感謝される..私はまた、より多くのコードでそれを試してみましたが、私はそれが動作しないので、もうそれを持っていけない

<Style.Triggers> 
    <Trigger Property="IsMouseOver" Value="True"> 
     <Setter TargetName="ellipse1" Property="Fill" Value="Orange"/> 
    </Trigger> 
    </Style.Triggers> 

を！

Answer 1

あなたのコードはx:Name="ellipse1"が欠落しています。下記のようにそれを修正し、そうTriggerは動作します（つまり、MouseOverイベントにオレンジにFill色を変更）：

<Button Margin="10 0 0 0" Click="CloseClick"> 
    <Button.Template> 
     <ControlTemplate> 
      <Border Background="{x:Null}" IsHitTestVisible="True"> 
       <Canvas Width="15" Height="15"> 
        <Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Height="15" Grid.Row="0" Width="15"> 
         <Ellipse.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#FF8C8E8D" Offset="0"/> 
           <GradientStop Color="#FF54545C" Offset="0.987"/> 
          </LinearGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF3D3E50" Width="8" Height="8" Canvas.Top="3.5" Canvas.Left="3.5"/> 
       </Canvas> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter TargetName="ellipse1" Property="Fill" Value="Orange"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Button.Template> 
</Button>