背景でのSolidColorBrushのアニメーション

Question

単純なボタンスタイルを作成しようとしています。マウスオーバー時に背景の不透明度が0.0から1.0に変更されます（逆も同様です）。ボタンのテンプレートを作成していて、テンプレートのすべてのプロパティをバインドしています。バックグラウンドでSolidColorBrushを除いてすべて正常に動作します。テンプレートバインドにバインドできません。私はTemplateBindingのいくつかの言及が文脈のために正しいものではないことを見てきましたが、私は別の解決策を見つけることができません。私は、BackgroundがBrushという問題があり、そのブラシのコンポーネントがColorである必要がありますが、それを得ることはできません。

明白なオーバーライドは、2つの異なる色（いずれも機能する）で2つのテンプレートスタイルを作成することですが、そのようなハードコーディングとコピー貼り付けは避けたいと思います。私が望むものは、Backgroundというボタンのプロパティを指定するオプションです。これはSolidColorBrushで使用され、残りの部分は不透明になります。

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

すると、ボタンは次のように使用されます。

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

はそれをテストするために設定Background="Green"プロパティを追加しましたが、働いていませんでした。

Answer 1

いつものように、あなたはS/Oに投稿した直後に解決策を見つけます。だから私はそれが誰かを助けることを願っています：

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

警告フォームReSharperのはこの1つを試してから私を保持するものだったので、私は、同様ReSharper disableを含めました - と絶望はとにかくそれをしようとする私を余儀なくされました。

Answer 2

あなたはButtonのBackgroundにBorderのBackgroundプロパティをバインドしてから、このようSolidColorBrushのOpacityプロパティをアニメーション化するTemplateBindingを使用することができます。

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