How To Lighten/Darken Kachelhintergrundfarbe auf Mouse Over?

Question

Ich benutze MahApps Framework und ich habe den Stil (siehe How to change tile background on mouse over in WPF?) zum Hervorheben einer Kachel auf MouseOver.

<local:ColorConverter x:Key="colorConverter" /> 
<Style x:Key="highlightedTile" TargetType="mah:Tile"> 
    <Setter Property="Background" Value="Purple" /> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="{Binding Path=Background, RelativeSource={RelativeSource Self}, Converter={StaticResource colorConverter}, Mode=OneTime, FallbackValue=red}" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

Der Farbkonverter-Code ist:

class ColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     byte[] temp = StringToByteArray(value.ToString().Substring(1, 8)); // Remove # 
     Color color = Color.FromArgb(temp[0], temp[1], temp[2], temp[3]); 
     System.Drawing.Color darkColor = System.Windows.Forms.ControlPaint.Dark(System.Drawing.Color.FromArgb(color.A, color.R, color.G, color.B), 0.1f); 
     return new SolidColorBrush(Color.FromArgb(darkColor.A, darkColor.R, darkColor.G, darkColor.B)); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 

    public static byte[] StringToByteArray(string hex) 
    { 
     if (hex.Length % 2 == 1) 
      throw new Exception("The binary key cannot have an odd number of digits"); 

     byte[] arr = new byte[hex.Length >> 1]; 

     for (int i = 0; i <hex.Length>> 1; ++i) 
     { 
      arr[i] = (byte)((GetHexVal(hex[i << 1]) << 4) + (GetHexVal(hex[(i << 1) + 1]))); 
     } 

     return arr; 
    } 

    public static int GetHexVal(char hex) 
    { 
     int val = (int)hex; 
     //For uppercase A-F letters: 
     return val - (val < 58 ? 48 : 55); 
     //For lowercase a-f letters: 
     //return val - (val < 58 ? 48 : 87); 
     //Or the two combined, but a bit slower: 
     //return val - (val < 58 ? 48 : (val < 97 ? 55 : 87)); 
    } 
} 

Grundsätzlich möchte ich in der Lage sein:

1. setzen den Hintergrund der Fliese in der Entwurfsansicht; DONE
2. dann wenden Sie diesen Stil auf die Kachel; FERTIG
3. während der Laufzeit auf MouseOver, um zu sehen, dass der Hintergrund dunkler wird (Hervorhebung der Kachel) und zur Ausgangsfarbe zurückkehrt, wenn die Maus die Kachel enthält (der Hintergrund des Host-Steuerelements sollte diese Logik nicht beeinflussen). NEED

Mein Code HELP funktioniert nur, wenn ich die nicht-markierte Hintergrundfarbe im Stil (in diesem Fall "Purple") gesetzt. Ohne diese Farbe im Stil zu setzen (die erste Zeile zu entfernen), funktioniert der Code nur mit der blauen Standardhintergrundfarbe der Kachel (wenn ich die Farbe in MainWindow.xaml einstelle, wird der Konverter nicht einmal ausgelöst, was ich verifiziert habe einen Haltepunkt verwenden). Anfangs habe ich diese Bindung verwendet, funktioniert aber nicht:

<Setter Property="Background" Value="{Binding Path=Background.Color, RelativeSource={RelativeSource Self}}" /> 

Was mache ich falsch? Oder ist es das, worum ich eigentlich bitten möchte?

Answer 1

Ich empfehle Ihnen, den Stil für die Kachel zu überschreiben und Ihren Konverter bei den ControlTemplate-Triggern zu verwenden.

Die folgende XAML Quelle arbeitet mit der neuesten Quelle MahApps, die auch vie NuGet (pre-release) zur Verfügung steht.

<local:ColorConverter x:Key="colorConverter" /> 
<Style x:Key="CustomTileStyle" BasedOn="{StaticResource {x:Type controls:Tile}}" TargetType="{x:Type controls:Tile}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="controls:Tile"> 
       <Grid> 
        <Border x:Name="PART_Border" 
          Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"> 
         <Grid> 
          <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             Orientation="Horizontal"> 
           <ContentPresenter RecognizesAccessKey="True" /> 
           <TextBlock VerticalAlignment="Center" 
              FontSize="{TemplateBinding CountFontSize}" 
              Text="{TemplateBinding Count}" /> 
          </StackPanel> 
          <Label HorizontalAlignment="{TemplateBinding HorizontalTitleAlignment}" 
            VerticalAlignment="{TemplateBinding VerticalTitleAlignment}" 
            Foreground="{TemplateBinding Foreground}"> 
           <AccessText Margin="3" 
              Foreground="{TemplateBinding Foreground}" 
              FontSize="{TemplateBinding TitleFontSize}" 
              Text="{TemplateBinding Title}" 
              TextWrapping="Wrap" /> 
          </Label> 
         </Grid> 
        </Border> 
        <Border x:Name="PART_HoverBorder" 
          BorderBrush="{TemplateBinding controls:ControlsHelper.MouseOverBorderBrush}" 
          BorderThickness="2" 
          Opacity="0" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="PART_Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background, Mode=OneWay, Converter={StaticResource colorConverter}}" /> 
        </Trigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=(controls:ControlsHelper.MouseOverBorderBrush), Mode=OneWay, Converter={x:Static converters:IsNullConverter.Instance}}" Value="False" /> 
          <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver, Mode=OneWay}" Value="True" /> 
         </MultiDataTrigger.Conditions> 
         <Setter TargetName="PART_HoverBorder" Property="Opacity" Value="0.6" /> 
        </MultiDataTrigger> 
        <Trigger Property="Button.IsPressed" Value="True"> 
         <Setter Property="RenderTransform"> 
          <Setter.Value> 
           <ScaleTransform CenterX="0.5" 
               CenterY="0.5" 
               ScaleX="0.98" 
               ScaleY="0.98" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Opacity" Value=".55" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Hoffe, dass hilft!