2017-02-24 52 views
2

我正試圖將Mouse Fill上的路徑填充=「#ff147f2e」更改爲較亮的顏色並撞上牆。我只是無法弄清楚如何參數化這個特定的填充顏色。任何想法或指針。WPF在MouseOver上更改路徑填充

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

回答

3

使用IsMouseOver觸發器:

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

你需要命名的路徑(如<Path x:Name="NameOfPath" />)和

+1

謝謝你把我在正確的道路上。很棒。 –

+0

很高興聽到它!考慮將其標記爲答案呢? – Dmihawk

-1

替換爲相應的顏色試試這個:

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

呼叫按鈕:

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

只需設置紅色和黃色的填充值,以滿足您在鼠標懸停和按下時所需的任何內容。不透明只是一個例子,我用他們在我的原始按鈕,並離開那些。

0

這裏是事件別人的最終代碼需要學習這個

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