WPF Change Path Fill auf MouseOver

Question

Ich versuche, den Path Fill = "# ff147f2e" zu einer helleren Farbe auf MouseOver zu ändern und eine Wand zu treffen. Ich kann einfach nicht herausfinden, wie diese spezielle Füllfarbe zu parametrisieren ist. Irgendwelche Gedanken oder Hinweise.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:local="clr-namespace:Controller.Resources.Buttons"> 
    <Style x:Key="PowerButton" TargetType="{x:Type Button}"> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}">      
        <Grid>       
         <!-- Layer 1/<Group>/<Group>/<Group>/<Path> --> 
         <Path Fill="#ff147f2e" Data="F1 M 104.825,50.080 C 104.825,77.693 82.440,100.078 54.826,100.078 C 27.213,100.078 4.825,77.693 4.825,50.080 C 4.825,22.466 27.213,0.081 54.826,0.081 C 82.440,0.081 104.825,22.466 104.825,50.080 Z"/> 
         <!-- Layer 1/<Group>/<Compound Path> --> 
         <Path Fill="#ffe5e5e5" Data="F1 M 55.146,74.711 C 41.972,74.711 31.256,63.993 31.256,50.821 C 31.256,42.275 35.873,34.323 43.305,30.073 C 44.939,29.139 47.022,29.706 47.958,31.340 C 48.893,32.974 48.325,35.057 46.691,35.992 C 41.375,39.032 38.074,44.713 38.074,50.821 C 38.074,60.234 45.733,67.893 55.146,67.893 C 64.559,67.893 72.218,60.234 72.218,50.821 C 72.218,44.713 68.916,39.032 63.600,35.992 C 61.966,35.058 61.398,32.975 62.333,31.340 C 63.269,29.705 65.350,29.138 66.986,30.073 C 74.420,34.323 79.036,42.272 79.036,50.821 C 79.036,63.993 68.320,74.711 55.146,74.711 Z M 51.737,24.895 C 51.737,23.012 53.263,21.486 55.146,21.486 C 57.029,21.486 58.555,23.012 58.555,24.895 L 58.555,48.370 C 58.555,50.253 57.029,51.779 55.146,51.779 C 53.263,51.779 51.737,50.253 51.737,48.370 L 51.737,24.895 Z M 55.146,16.008 C 36.498,16.008 21.380,31.125 21.380,49.773 C 21.380,68.421 36.496,83.538 55.146,83.538 C 73.795,83.538 88.912,68.420 88.912,49.772 C 88.912,31.124 73.795,16.008 55.146,16.008 Z"/>       
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

Answer 1

Verwenden Sie den IsMouseOver Trigger:

<ControlTemplate.Triggers> 
    <Trigger Property="IsMouseOver" Value="True"> 
     <Setter TargetName="NameOfPath" Property="Fill" Value="Colour" /> 
    </Trigger> 
</ControlTemplate.Triggers> 

Sie müssen Ihre Pfade nennen (zB <Path x:Name="NameOfPath" />) und ersetzen die entsprechende Farbe in

Answer 2

starten:

  <Style x:Key="PowerButton" TargetType="{x:Type Button}"> 
      <Setter Property="SnapsToDevicePixels" Value="True"/> 
      <Setter Property="OverridesDefaultStyle" Value="False"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 

         <Grid> 
          <!-- Layer 1/<Group>/<Group>/<Group>/<Path> --> 
          <Path Name="PowerButtonPath" Fill="#ff147f2e" Data="F1 M 104.825,50.080 C 104.825,77.693 82.440,100.078 54.826,100.078 C 27.213,100.078 4.825,77.693 4.825,50.080 C 4.825,22.466 27.213,0.081 54.826,0.081 C 82.440,0.081 104.825,22.466 104.825,50.080 Z"/> 
          <!-- Layer 1/<Group>/<Compound Path> --> 
          <Path Fill="#ffe5e5e5" Data="F1 M 55.146,74.711 C 41.972,74.711 31.256,63.993 31.256,50.821 C 31.256,42.275 35.873,34.323 43.305,30.073 C 44.939,29.139 47.022,29.706 47.958,31.340 C 48.893,32.974 48.325,35.057 46.691,35.992 C 41.375,39.032 38.074,44.713 38.074,50.821 C 38.074,60.234 45.733,67.893 55.146,67.893 C 64.559,67.893 72.218,60.234 72.218,50.821 C 72.218,44.713 68.916,39.032 63.600,35.992 C 61.966,35.058 61.398,32.975 62.333,31.340 C 63.269,29.705 65.350,29.138 66.986,30.073 C 74.420,34.323 79.036,42.272 79.036,50.821 C 79.036,63.993 68.320,74.711 55.146,74.711 Z M 51.737,24.895 C 51.737,23.012 53.263,21.486 55.146,21.486 C 57.029,21.486 58.555,23.012 58.555,24.895 L 58.555,48.370 C 58.555,50.253 57.029,51.779 55.146,51.779 C 53.263,51.779 51.737,50.253 51.737,48.370 L 51.737,24.895 Z M 55.146,16.008 C 36.498,16.008 21.380,31.125 21.380,49.773 C 21.380,68.421 36.496,83.538 55.146,83.538 C 73.795,83.538 88.912,68.420 88.912,49.772 C 88.912,31.124 73.795,16.008 55.146,16.008 Z"/> 
         </Grid> 

         <ControlTemplate.Triggers> 
          <Trigger Property="IsEnabled" Value="True"> 
           <Setter TargetName="PowerButtonPath" Property="Opacity" Value=".75" /> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter TargetName="PowerButtonPath" Property="Opacity" Value=".35" /> 
          </Trigger> 
          <Trigger Property="ButtonBase.IsMouseOver" Value="True"> 
           <Setter Property="Path.Fill" TargetName="PowerButtonPath" Value="Red" /> 
          </Trigger> 
          <Trigger Property="ButtonBase.IsPressed" Value="True"> 
           <Setter Property="Path.Fill" TargetName="PowerButtonPath" Value="Yellow" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

Rufen Sie die Schaltfläche mit:

   <Button Style="{StaticResource PowerButton}" /> 

Setzen Sie einfach die Füllung Werte von rot und gelb für was auch immer in der Maus über und drückte die Sie benötigen. Die Opazität ist nur ein Beispiel, ich habe sie in meinem Origonal-Knopf verwendet und habe sie verlassen.

Answer 3

Hier ist der endgültige Code für den Fall, jemand anderes dieses

<Style x:Key="PowerButton" TargetType="{x:Type Button}"> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 

        <Grid> 

         <!-- <Path> --> 
         <Path x:Name="Power" Fill="#FF147D2E" Data="F1 M 104.825,50.080 C 104.825,77.693 82.440,100.078 54.826,100.078 C 27.213,100.078 4.825,77.693 4.825,50.080 C 4.825,22.466 27.213,0.081 54.826,0.081 C 82.440,0.081 104.825,22.466 104.825,50.080 Z"/> 

         <!-- <Compound Path> --> 
         <Path Fill="White" Data="F1 M 55.146,74.711 C 41.972,74.711 31.256,63.993 31.256,50.821 C 31.256,42.275 35.873,34.323 43.305,30.073 C 44.939,29.139 47.022,29.706 47.958,31.340 C 48.893,32.974 48.325,35.057 46.691,35.992 C 41.375,39.032 38.074,44.713 38.074,50.821 C 38.074,60.234 45.733,67.893 55.146,67.893 C 64.559,67.893 72.218,60.234 72.218,50.821 C 72.218,44.713 68.916,39.032 63.600,35.992 C 61.966,35.058 61.398,32.975 62.333,31.340 C 63.269,29.705 65.350,29.138 66.986,30.073 C 74.420,34.323 79.036,42.272 79.036,50.821 C 79.036,63.993 68.320,74.711 55.146,74.711 Z M 51.737,24.895 C 51.737,23.012 53.263,21.486 55.146,21.486 C 57.029,21.486 58.555,23.012 58.555,24.895 L 58.555,48.370 C 58.555,50.253 57.029,51.779 55.146,51.779 C 53.263,51.779 51.737,50.253 51.737,48.370 L 51.737,24.895 Z M 55.146,16.008 C 36.498,16.008 21.380,31.125 21.380,49.773 C 21.380,68.421 36.496,83.538 55.146,83.538 C 73.795,83.538 88.912,68.420 88.912,49.772 C 88.912,31.124 73.795,16.008 55.146,16.008 Z"/> 

        </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Power" Property="Fill" Value="#FF00B400" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 

      </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>