マウスオーバーでタイルの背景色を明るく/暗くするには？

Question

私はMahAppsフレームワークを使用しており、MouseOverでタイルを強調表示するスタイル（How to change tile background on mouse over in WPF?を参照）があります。

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

色変換コードは次のとおりです。

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)); 
    } 
} 

は基本的に、私のことができるようにしたい：

1. は、デザイナビューでタイルの背景を設定します。 DONE
2. このスタイルをタイルに適用します。ランタイム中にMouseOverでその背景が黒くなる（タイルを強調表示する）ようにし、マウスがタイルを持っているときに初期カラーに戻ります（ホストコントロールの背景はこのロジックに影響しません）。 NEED HELPの

私のコードは、私は、スタイル（この場合は、「パープル」）で非強調表示の背景色を設定している場合にのみ機能します。この色をスタイルに設定しないと（最初の行を削除すると）、コードは、タイルのデフォルトの青色の背景色でのみ機能します（MainWindow.xamlで色を設定した場合、コンバータはトリガーされません。ブレークポイントを使用して）。当初はこのバインディングを使用しましたが、うまくいきませんでした。

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

私は間違っていますか？それとも、私は実際に達成可能なことを求めているのですか？

Answer 1

タイルのスタイルをオーバーライドし、ControlTemplateトリガーでコンバーターを使用することをお勧めします。

次XAMLソースも利用可能であるMahAppsの最新のソースで動作しますNuGet（プレリリース）を争います。

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

希望します。