Erweiterte Schaltfläche Hover-Effekt in Xaml

Question

Ich bin neu bei C# und XAML, aber habe Erfahrung mit Web-Design-Sprachen. Derzeit ich an meinem ersten Programm arbeiten, aber ich habe ein Problem ..

in XAML habe ich meine Button:

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

Und jetzt auf dem Hover Ereignis, möchte ich Die anderen Buttons sehen wie der Button in der Mitte aus!

Ich habe versucht, mit:

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

ich es auch mit mehr Code versucht, aber ich nicht, dass es mehr, weil es nicht funktioniert ..

Ich würde für Hilfe sehr dankbar!

Answer 1

Ihr Code fehlt x:Name="ellipse1": korrigieren, wie unten dargestellt, so dass die Trigger funktionieren (dh die Fill Farbe Orange auf MouseOver Ereignis zu ändern):

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