Animieren von SolidColorBrush im Hintergrund

Question

Ich versuche, einen einfachen Button-Stil zu erstellen, der die Deckkraft des Hintergrunds von 0.0 auf 1.0 ändern wird (und umgekehrt). Ich erstelle eine Vorlage für die Schaltfläche und ich binde alle Eigenschaften in der Vorlage. Es funktioniert alles einwandfrei, mit Ausnahme der SolidColorBrush im Hintergrund, die ich nicht an die Vorlagenbindung binden kann. Ich habe einige Erwähnungen von TemplateBinding gesehen, die aufgrund von Kontexten nicht die richtige sind, aber ich bin nicht in der Lage, eine andere Lösung zu finden. Ich vermute, es könnte ein Problem von Background sein, ein Brush und ich brauche nur eine Color Komponente dieser Bürste, aber ich bin nicht in der Lage, es zu erhalten.

Die offensichtliche Überschreibung besteht darin, zwei Vorlagenstile mit zwei verschiedenen Farben zu erstellen (was funktioniert), aber ich möchte solche Hard-Coding und Copy-Paste vermeiden. Was ich möchte, ist eine Option, Background Eigenschaft auf Button anzugeben, die in SolidColorBrush verwendet würde und dann würde die Opazität den Rest tun.

<Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle"> 
    <Setter Property="Width" Value="46" /> 
    <Setter Property="Height" Value="32" /> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="VerticalAlignment" Value="Center" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
        <Border.Background> 
         <SolidColorBrush x:Name="ButtonBackgroundBrush" Color="???" Opacity="0.0" /> 
        </Border.Background> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" /> 
       </Border> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="MouseOverAnimation"> 
         <DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.15" /> 
        </Storyboard> 
        <Storyboard x:Key="MouseOutAnimation"> 
         <DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.15" /> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" /> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" /> 
         </Trigger.ExitActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Dann wird die Taste so benutzt:

<Button x:Name="MinimizeButton" Style="{StaticResource WindowButtonStyle}" Click="MinimizeButton_Click" Background="Green"> 
    <Image Source="../Resources/WindowButtons/Images/win-minimize.png" Width="12" Height="12"></Image> 
</Button> 

Added Background="Green" Eigenschaftseinstellung zu testen, aber nicht funktionierte.

Answer 1

Beantworten Sie meine eigenen, wie immer - Sie finden die Lösung, gleich nachdem Sie auf S/O veröffentlichen. Also ich hoffe, dass es jemand helfen:

... 
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
         <Border.Background> 
          <!-- ReSharper disable once Xaml.BindingWithContextNotResolved --> 
          <SolidColorBrush x:Name="ButtonBackgroundBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.Color}" Opacity="0.0" /> 
         </Border.Background> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" /> 
        </Border> 
... 

ich die ReSharper disable auch enthalten haben, weil die Warnung Form ReSharper wurde, was mich immer diese eine von dem Versuch - und Verzweiflung hat mich gezwungen, es trotzdem zu versuchen.

Answer 2

könnten Sie eine TemplateBinding verwenden, um die Background Eigenschaft des Border zum Background des Button und dann animieren die Opacity Eigenschaft des SolidColorBrush wie folgt zu binden:

<Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle"> 
    <Setter Property="Width" Value="46" /> 
    <Setter Property="Height" Value="32" /> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="VerticalAlignment" Value="Center" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
           Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" /> 
       </Border> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="MouseOverAnimation"> 
         <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)" To="1.0" Duration="0:0:0.15" /> 
        </Storyboard> 
        <Storyboard x:Key="MouseOutAnimation"> 
         <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)" To="0.0" Duration="0:0:0.15" /> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" /> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" /> 
         </Trigger.ExitActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>